Breadcrumb

Exibe o caminho até o recurso atual por meio de uma hierarquia de links.

Exemplos

Básico

Com ícones

Só ícone

Com reticências

Separador personalizado

API

Estrutura do Breadcrumb

Componente	Descrição	Uso
Breadcrumb	Elemento raiz de navegação, com aria-label padrão "Trilha de navegação" (pode ser sobrescrito)	Envolve toda a navegação do breadcrumb
BreadcrumbList	Lista ordenada que contém os itens do breadcrumb	Agrupa todos os itens do breadcrumb
BreadcrumbItem	Container de um item do breadcrumb	Envolve links, páginas ou reticências
BreadcrumbLink	Link clicável para itens navegáveis do breadcrumb	Para itens que levam a outras páginas
BreadcrumbPage	Indicador não interativo da página atual	Para a página atual/ativa
BreadcrumbSeparator	Separador visual entre os itens	Exibe um chevron ou um separador personalizado
BreadcrumbEllipsis	Indicador de reticências para itens recolhidos	Aparece quando o caminho do breadcrumb é muito longo

Breadcrumb

Propriedade	Tipo	Padrão	Descrição
className	string	-	Classes CSS adicionais para o elemento nav.
...props	React.ComponentProps<"nav">	-	Aceita todas as props nativas de nav.

BreadcrumbList

Propriedade	Tipo	Padrão	Descrição
className	string	-	Classes CSS adicionais para a lista ordenada.
...props	React.ComponentProps<"ol">	-	Aceita todas as props nativas de ol.

BreadcrumbItem

Propriedade	Tipo	Padrão	Descrição
icon	React.ReactNode	-	Ícone opcional exibido à esquerda do conteúdo do item, com espaçamento gap-2.
className	string	-	Classes CSS adicionais para o item da lista.
...props	React.ComponentProps<"li">	-	Aceita todas as props nativas de li.

BreadcrumbLink

Propriedade	Tipo	Padrão	Descrição
asChild	boolean	false	Usa o Slot do Radix para mesclar as props no elemento filho (útil com o Link do Next.js).
href	string	-	URL para onde o link aponta.
className	string	-	Classes CSS adicionais para o elemento âncora.
...props	React.ComponentProps<"a">	-	Aceita todas as props nativas de a.

BreadcrumbPage

Propriedade	Tipo	Padrão	Descrição
className	string	-	Classes CSS adicionais para o elemento span.
...props	React.ComponentProps<"span">	-	Aceita todas as props nativas de span.

BreadcrumbSeparator

Propriedade	Tipo	Padrão	Descrição
children	React.ReactNode	Ícone ChevronRightMd	Conteúdo personalizado do separador. Se não for informado, usa um ícone de chevron.
className	string	-	Classes CSS adicionais para o item da lista.
...props	React.ComponentProps<"li">	-	Aceita todas as props nativas de li.

BreadcrumbEllipsis

Propriedade	Tipo	Padrão	Descrição
label	string	"Mais itens"	Texto lido pelos leitores de tela para os itens ocultos. Passe uma string vazia quando as reticências estiverem dentro de um controle que já tem nome, como o trigger de um menu.
className	string	-	Classes CSS adicionais para o elemento span.
...props	React.ComponentProps<"span">	-	Aceita todas as props nativas de span.