BottomNav

BottomNav dá a aplicações mobile um seletor compacto e persistente de rotas. Use-o para poucos destinos principais; use AppSidebar quando a aplicação precisar de navegação agrupada e espaço para rótulos.

Exemplos

Destino mobile atual

Mantenha poucos itens e use active para a visualização exibida. onSelect recebe o item selecionado depois do próprio callback dele, para que o conteúdo ao redor mude com a navegação.

Current view: Home

Um rótulo ReactNode

label aceita ReactNode, não somente uma string. Use essa flexibilidade para conteúdo de rótulo conciso e significativo, mantendo claro o nome completo do botão quando ícone e texto são lidos juntos.

Selected: Inbox

Quando usar

Use BottomNav para três a cinco destinos mobile de nível superior entre os quais as pessoas alternam com frequência.

Prefira outro componente quando:

A aplicação tem grupos, utilitários ou muitos destinos — use AppSidebar.
Os destinos são visualizações dentro da página atual — use Tabs.
O controle abre uma lista temporária de ações — use Dropdown.

Acessibilidade

BottomNav renderiza um <nav> nativo com links para destinos e botões para ações. O rótulo visível de cada item faz parte de seu nome acessível; forneça ícone e rótulo que descrevam o mesmo destino.
active adiciona aria-current="page" ao item atual. Mantenha esse estado sincronizado com a visualização exibida pela aplicação.
O onClick de um item roda antes do onSelect(id, item) do nível de navegação. Use um dos callbacks para atualizar a visualização. href navega com link nativo; asChild usa o router.
O componente não dá um nome acessível ao landmark de navegação. Passe aria-label quando houver mais de um landmark de navegação na página.

Links de router

tsx

// React Router
<BottomNav items={[{ id: 'inicio', icon: homeIcon, label: 'Início', active: true,
  asChild: <Link to="/inicio" /> }]} />

// Next.js
<BottomNav items={[{ id: 'conta', icon: accountIcon, label: 'Conta',
  asChild: <Link href="/conta" /> }]} />

Use href para links nativos. target: '_blank' com rel: 'noopener noreferrer' permite abrir em outra aba. Itens somente com onClick continuam botões.

API e código

Nome	Tipo	Obrigatória	Descrição
`items`	`BottomNavItem[]`	Obrigatória	Navigation items, typically three to five destinations.
`onSelect`	`(id: string, item: BottomNavItem) => void`	—	Called after an item-level callback with the selected item.

Use âncoras para destinos e marque a página atual:

html

<nav class="lyra-bottomnav" aria-label="Navegação principal">
  <a class="lyra-bottomnav__item lyra-bottomnav__item--active" href="/inicio" aria-current="page">
    <span class="lyra-bottomnav__icon" aria-hidden="true">⌂</span>
    <span class="lyra-bottomnav__label">Início</span>
  </a>
  <a class="lyra-bottomnav__item" href="/atividade">
    <span class="lyra-bottomnav__icon" aria-hidden="true">◔</span>
    <span class="lyra-bottomnav__label">Atividade</span>
  </a>
</nav>

<lyra:bottom-nav> Gerado do lyra-ds/blade v0.10.0.

Prop	Padrão	Obrigatória	Valores de exemplo
`items`	—	Obrigatória	—

blade

<lyra:bottom-nav :items="[
    ['label' => 'Home', 'icon' => '🏠', 'active' => true],
    ['label' => 'Search', 'icon' => '🔍'],
    ['label' => 'Profile', 'icon' => '👤'],
]" />