componentes / breadcrumb

Breadcrumb

Mostra onde a página atual está na hierarquia, com um link de volta para cada nível.

Como usar

Um `nav` com uma lista ordenada de `BreadcrumbItem`s. Dê `href` aos itens anteriores e marque o último como `current` (vira texto com `aria-current="page"`). Para usar o link de um roteador, passe-o como filho com `asChild`. Use `maxItems` para recolher trilhas longas atrás de um botão de reticências e `separator` para trocar o divisor.

preview

Breadcrumb.tsx

import { Breadcrumb, BreadcrumbItem } from "vaiperui";
 
<Breadcrumb>
  <BreadcrumbItem href="/">Dashboard</BreadcrumbItem>
  <BreadcrumbItem href="/settings">Configurações</BreadcrumbItem>
  <BreadcrumbItem current>Perfil</BreadcrumbItem>
</Breadcrumb>
 
// com um link de roteador
<BreadcrumbItem asChild>
  <Link href="/settings">Configurações</Link>
</BreadcrumbItem>

Separador

preview

›

→

separador.tsx

<Breadcrumb separator="›">…</Breadcrumb>
<Breadcrumb separator="→">…</Breadcrumb>

Recolhido

preview

maxItems={3}

recolhido.tsx

<Breadcrumb maxItems={3}>
  <BreadcrumbItem href="/">Home</BreadcrumbItem>
  <BreadcrumbItem href="/a">A</BreadcrumbItem>
  <BreadcrumbItem href="/b">B</BreadcrumbItem>
  <BreadcrumbItem href="/c">C</BreadcrumbItem>
  <BreadcrumbItem current>D</BreadcrumbItem>
</Breadcrumb>

Tamanhos

preview

tamanhos.tsx

<Breadcrumb size="sm">…</Breadcrumb>
<Breadcrumb size="md">…</Breadcrumb>
<Breadcrumb size="lg">…</Breadcrumb>

Cor personalizada

preview

Laranja

Violeta

cor-personalizada.tsx

<Breadcrumb customColor="#f97316">…</Breadcrumb>

Props

Prop	Valores	Padrão	Descrição
separator	ReactNode	/	Desenhado entre os itens, oculto para leitores de tela
maxItems	number	nenhum	Recolhe trilhas maiores em primeiro item, reticências e os últimos maxItems - 1
expandLabel	string	Show hidden items	Nome acessível do botão de reticências
aria-label	string	Breadcrumb	Nome da navegação
variantColor / customColor	ControlColors \| CustomColor	primary	Cor do anel de foco (e do hover do link com customColor)
size	sm \| md \| lg	md	Tamanho do texto
BreadcrumbItem: href, current, asChild	string, boolean, boolean	nenhum	Destino do link; marca a página atual; usa o elemento filho como link

Acessibilidade

Renderiza um `<nav>` com `aria-label` (padrão "Breadcrumb") envolvendo uma lista ordenada (`<ol>`/`<li>`).
`BreadcrumbItem current` renderiza um `<span>` com `aria-current="page"` em vez de link.
Os separadores são `aria-hidden`, então leitores de tela não os anunciam.
Itens com `href` são links reais; um item sem `href` é texto simples, não focável.
Com `maxItems`, o meio oculto vira um botão rotulado por `expandLabel` que revela todos os itens.

Teclado

Tecla	Ação
Tab	Percorre os links e o botão de expandir em ordem.
Enter	Segue o link focado; Enter ou Espaço ativa o botão de expandir.

Tenha em mente

Traduza `expandLabel` e `aria-label`; os padrões estão em inglês.
Marque o último item com `current`; o componente não deduz a página atual.