Lyra DS

Navbar é o seletor de rotas da página. Decida se ele fica sticky: mantenha para navegação durável do site ou defina sticky={false} quando outro shell já for dono do viewport.

Exemplos

Marca e rota atual

Dê um nome explícito à navegação sempre que a página tiver outro landmark de navegação. Marque o destino atual com active, para o estado visual e aria-current="page" concordarem.

Uma ação na extremidade

actions serve a operações disponíveis em todas as rotas, não ao trabalho específico da página. A ação principal de uma página fica no PageHeader, onde continua ligada ao título dela.

NavLink

Âncora e link composto

Use NavLink diretamente para uma âncora. Com asChild, o Link do seu framework continua filho, preservando routing, prefetch e abrir em nova aba enquanto NavLink fornece a semântica de página atual.

Overview Projects

Quando usar

Use Navbar para destinos do site que continuam disponíveis enquanto a pessoa navega entre páginas. Mantenha poucas rotas para leitura rápida; mais destinos pedem uma barra lateral, não uma linha cheia.

Prefira outro componente quando:

Os destinos são locais a um documento — use TableOfContents.
A pessoa muda entre poucas visualizações pares — use Tabs.
O controle executa trabalho em vez de navegar — use Button.

Acessibilidade

Navbar renderiza um <header> e, quando há nav, um <nav> nativo. Passe navLabel quando o documento tiver mais de um landmark de navegação.
NavLink renderiza uma âncora e define aria-current="page" para active. Seu anel de foco aparece em :focus-visible; não o remova.
Com asChild, forneça exatamente um elemento de link focável com href real; esse filho é dono do comportamento de teclado e do nome acessível.
Navbar não adiciona gerenciamento de foco. Mantenha marca, links de rota e ações numa ordem de DOM que continue fazendo sentido depois que a linha responsiva quebrar.

API e código

Nome	Tipo	Obrigatória	Descrição
`brand`	`ReactNode`	—	Optional brand content placed at the start of the navigation row.
`nav`	`ReactNode`	—	Optional primary navigation content rendered inside the navigation landmark.
`navLabel`	`string`	—	Accessible name for the navigation landmark.
`actions`	`ReactNode`	—	Optional controls placed at the end of the navigation row.
`sticky`	`boolean`	—	Keep the navbar fixed to the top while scrolling. Default `true`.

O cabeçalho é dono do landmark de página; a navegação nomeada contém âncoras reais e a rota atual se declara:

html

<header class="lyra-navbar">
  <div class="lyra-navbar__inner">
    <div class="lyra-navbar__brand"><a href="/">Acme</a></div>
    <nav class="lyra-navbar__nav" aria-label="Navegação principal">
      <a class="lyra-navlink lyra-navlink--active" href="/overview" aria-current="page"
        >Visão geral</a
      >
      <a class="lyra-navlink" href="/projects">Projetos</a>
    </nav>
    <div class="lyra-navbar__actions">
      <button class="lyra-btn lyra-btn--primary lyra-btn--sm">Novo projeto</button>
    </div>
  </div>
</header>

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

Prop	Padrão	Obrigatória	Valores de exemplo
`sticky`	`true`	—	—
`navLabel`	`null`	—	—

blade

<lyra:navbar sticky nav-label="Main navigation">
    <lyra:nav-link href="/overview" active>Overview</lyra:nav-link>
    <lyra:nav-link href="/projects">Projects</lyra:nav-link>
</lyra:navbar>