KnpMenu é uma biblioteca PHP especializada na criação e gerenciamento de menus de navegação para websitse. Esta implementação prática demonstra como construir menus responsivos utilizando KnpMenu, abordando desde configurações iniciais até funcionalidades avançadas.

Instalação e Configuração Inicial

Para utilizar KnpMenu, adicione a dependência via Composer no seu projeto:

composer require knplabs/knp-menu

Após a instalação, crie uma instância da fábrica de menus e defina a estrutura básica:

use Knp\Menu\MenuFactory;

$criadorDeMenu = new MenuFactory();
$navegacaoPrincipal = $criadorDeMenu->createItem('raiz');
$navegacaoPrincipal->addChild('Início', ['uri' => '/inicio']);
$navegacaoPrincipal->addChild('Serviços', ['uri' => '/servicos']);
$navegacaoPrincipal->addChild('Contato', ['uri' => '/contato']);

Estrutura de Menus Multinível

KnpMenu permite aninhar itens para criar hierarquias complexas. Veja como configurar um menu com subitens:

$menuPrincipal = $criadorDeMenu->createItem('navegacao');

$itemPai = $menuPrincipal->addChild('Produtos');
$itemPai->addChild('Eletrônicos', ['uri' => '/produtos/eletronicos']);
$itemPai->addChild('Roupas', ['uri' => '/produtos/roupas']);

$subItem = $itemPai->addChild('Categorias');
$subItem->addChild('Smartphones', ['uri' => '/produtos/eletronicos/smartphones']);

Renderização com Twig

Integre KnpMenu ao Twig para renderizar menus nos templates. Registre a extensão do KnpMenu na configuração do Twig e utilize:

{{ knp_menu_render('navegacao_principal') }}

Para personalizar a aparência, especifique um temlpate alternativo:

{{ knp_menu_render('navegacao_principal', {'template': 'meu_template_menu.html.twig'}) }}

Destaque Automático de Itens do Menu

Utilize o Matcher do KnpMenu para identificar e destacar o item do menu correspondente à página atual. Exemplo com votação baseada em rotas:

use Knp\Menu\Matcher\Matcher;
use Knp\Menu\Matcher\Voter\RouteVoter;

$seletorDeItens = new Matcher();
$seletorDeItens->addVoter(new RouteVoter($pilhaDeRequisicoes));

$renderizador->render($menuPrincipal, ['matcher' => $seletorDeItens]);

Design Responsivo para Menus

Para adaptar menus a dispositivos móveis, adicione classes CSS personalizadas aos itens do menu. KnpMenu facilita isso através de atributos:

$navegacaoPrincipal->addChild('Blog', [
    'uri' => '/blog',
    'attributes' => ['class' => 'item-nav'],
    'linkAttributes' => ['class' => 'link-nav']
]);

Combine essas classes com media queries e JavaScript para implementar comportamentos como colapso em telas pequenas.

Menipulação Avançada de Menus

A classe MenuManipulator oferece utilitários para reorganizar menus programaticamente. Exemplo de reordenação:

use Knp\Menu\Util\MenuManipulator;

$organizador = new MenuManipulator();
$organizador->reorderChildren($menuPrincipal, ['Início', 'Serviços', 'Blog', 'Contato']);

Este utilitário também permite mover itens entre menus ou duplicar estruturas conforme necessário.