Lyra DS

Breadcrumb mostra onde a página atual fica no site. Forneça a trilha da página e decida se a navegação ao redor precisa de uma localização de página ou da barra de caminho de pasta do FileManager.

Exemplos

Localização da página

O último item é sempre a página atual, mesmo que tenha href. Dê a cada item anterior um destino real para a trilha continuar útil a quem volta pelo site.

Dados parciais

Um item não final sem href ou asChild vira texto simples, sem um link enganoso para #. Esta trilha também leva o próprio aria-label, que é o que evita dois breadcrumbs na mesma página se apresentarem à tecnologia assistiva como dois landmarks de mesmo nome.

Quando usar

Use Breadcrumb para a posição de uma página na hierarquia do site, sobretudo quando a localização atual tiver mais de um pai relevante.

Prefira outro componente quando:

As pessoas navegam por pastas dentro de FileManager — use o path e onNavigate do FileManager; eles modelam a pasta atual, não a posição da página no site.
As pessoas alternam entre poucas visualizações pares — use Tabs.
O caminho tem só um destino útil para voltar — use um link normal de voltar, em vez de uma trilha.

Acessibilidade

Renderiza um landmark <nav> plano, não uma lista de <ol> ou <li>. O nome padrão é "Breadcrumb" (inglês); passe aria-label="Navegação estrutural" para traduzi-lo. Passe aria-label quando houver mais de uma trilha na página.
Cada item anterior com href ou asChild é um link; itens sem destino são texto simples. O último é um <span class="lyra-breadcrumb__current" aria-current="page">, mesmo quando seus dados têm href.
Separadores são spans vazios com aria-hidden, desenhados em CSS. Não adicione texto de chevron que um leitor de tela possa anunciar entre localizações.
Forneça rótulos curtos e ordenados que identifiquem as localizações sem depender da hierarquia visual.

Links de router

tsx

// React Router
<Breadcrumb aria-label="Navegação estrutural" items={[{ label: 'Projetos', asChild: <Link to="/projetos" /> },
  { label: 'Projeto atual' }]} />

// Next.js
<Breadcrumb aria-label="Navegação estrutural" items={[{ label: 'Projetos', asChild: <Link href="/projetos" /> },
  { label: 'Projeto atual' }]} />

O último item continua texto mesmo com href ou asChild. Nos ancestrais nativos, target: '_blank' e rel: 'noopener noreferrer' permitem abrir em outra aba.

API e código

Nome	Tipo	Obrigatória	Descrição
`'aria-label'`	`string`	—	Accessible name for the navigation landmark. Default: `"Breadcrumb"`.
`items`	`BreadcrumbItem[]`	Obrigatória	Navigation items; the final item is rendered as the current page.

O span separador é propositalmente vazio: o CSS desenha o chevron e a tecnologia assistiva o ignora.

html

<nav class="lyra-breadcrumb" aria-label="Navegação estrutural">
  <a href="/workspace">Workspace</a>
  <span class="lyra-breadcrumb__sep" aria-hidden="true"></span>
  <a href="/workspace/projects">Projetos</a>
  <span class="lyra-breadcrumb__sep" aria-hidden="true"></span>
  <span class="lyra-breadcrumb__current" aria-current="page">Atualização da marca</span>
</nav>

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

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

blade

<lyra:breadcrumb :items="[
    ['label' => 'Workspace', 'href' => '/workspace'],
    ['label' => 'Projects', 'href' => '/workspace/projects'],
    ['label' => 'Website redesign'],
]" />