Breadcrumbs

Trilha de navegação que mostra onde a pessoa está na hierarquia.

O Breadcrumbs mostra o caminho até a página atual e leva de volta a cada nível. No Admin ele aparece acima do h1 nas telas de detalhe, como "Pedidos › ped-8". Não use no lugar de um botão "Voltar" nem em telas de nível único.

import { Breadcrumbs } from "@rastreio-x/ui";

Padrão

O último item é a página atual: sem href, é texto com aria-current="page".

Pedidos
ped-8

Vários níveis

Mantenha a trilha curta: dois a quatro níveis.

Configurações
Entradas de Pedidos
Checkout Yampi

Separador

O separador é padrão; troque por um ícone decorativo com separator.

Marca
Versões
Versão 3

Desabilitada

isDisabled desliga os links, por exemplo enquanto uma ação em andamento bloqueia a navegação.

Pedidos
ped-8

Anatomia

Breadcrumbs
└── Breadcrumbs.Item

Breadcrumbs.Item: um nível; com href é link, sem href é a página atual.

Propriedades

Raiz (Breadcrumbs):

Breadcrumbs
Prop	Tipo	Padrão	Descrição
`aria-label`	`string`	-	Nome acessível, lido por leitores de tela quando não há rótulo visível.
`children`	`React.ReactNode \| ((item: unknown) => React.ReactNode)`	-	Conteúdo do componente.
`className`	`string`	`'react-aria-Breadcrumbs'`	Classes CSS aplicadas ao elemento.
`dependencies`	`readonly any[]`	-	Valores que invalidam o cache dos itens em coleções dinâmicas.
`id`	`string`	-	Identificador único do elemento.
`isDisabled`	`boolean`	-	Desabilita o componente: sem foco, clique nem envio.
`items`	`Iterable<unknown>`	-	Itens a renderizar (coleção dinâmica).
`onAction`	`((key: Key) => void)`	-	Chamada quando o item é acionado.
`render`	`DOMRenderFunction<'ol', undefined>`	-	Troca o elemento DOM padrão por outro, mantendo o comportamento e as props do componente.
`separator`	`React.ReactNode`	-	Elemento exibido entre os itens.
`style`	`React.CSSProperties`	-	Estilos em linha aplicados ao elemento.

Item (Breadcrumbs.Item):

Breadcrumbs.Item
Prop	Tipo	Padrão	Descrição
`aria-label`	`string`	-	Nome acessível, lido por leitores de tela quando não há rótulo visível.
`autoFocus`	`boolean`	-	Foca o elemento ao renderizar.
`children`	`((string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| Rea…`	-	Conteúdo do componente.
`className`	`ClassNameOrFunction<BreadcrumbRenderProps>`	`'react-aria-Breadcrumb'`	Classes CSS aplicadas ao elemento.
`download`	`string \| boolean`	-	Faz o navegador baixar o arquivo do link; um texto sugere o nome.
`href`	`string`	-	URL de destino do link.
`hrefLang`	`string`	-	Idioma do recurso do link.
`id`	`string`	-	Identificador único do elemento.
`isDisabled`	`boolean`	-	Desabilita o componente: sem foco, clique nem envio.
`onPress`	`((e: PressEvent) => void)`	-	Chamada ao soltar o clique, o toque ou a tecla sobre o elemento.
`ping`	`string`	-	URLs notificadas quando o link é seguido.
`referrerPolicy`	`React.HTMLAttributeReferrerPolicy`	-	Quanto da origem (referrer) enviar ao seguir o link.
`rel`	`string`	-	Relação entre a página atual e o recurso do link.
`render`	`(DOMRenderFunction<'li', BreadcrumbRenderProps> & ((props: React.DetailedHTMLPr…`	-	Troca o elemento DOM padrão por outro, mantendo o comportamento e as props do componente.
`routerOptions`	`undefined`	-	Opções do roteador do lado do cliente.
`style`	`(StyleOrFunction<BreadcrumbRenderProps> & StyleOrFunction<LinkRenderProps>)`	-	Estilos em linha aplicados ao elemento.
`target`	`React.HTMLAttributeAnchorTarget`	-	Janela de destino do link (`_blank`, `_self`).

Animações

Sem movimento
indicativo

Sem animação própria. Os links só trocam de cor no hover e no foco.

Acessibilidade

Renderiza nav com uma lista ordenada; sempre passe aria-label ("Trilha do Pedido").
O item atual leva aria-current="page".
Dentro do OperationShell, o href navega no cliente (o shell envolve o conteúdo num roteador do React Aria); fora dele, recarrega a página.
Os links têm foco visível por teclado.

Boas práticas

Faça

Trilha igual nas telas de detalhe: Pedidos › ped-8, e Entradas de Pedidos › Checkout Yampi.

Evite

Link Voltar com seta solta ou uma trilha que repete o título da página.

O primeiro nível é a lista de onde se veio; o último é a página atual, sem link.
Rótulos curtos, em Title Case.
Uma trilha por página, acima do h1.

Relacionados

Tabs para alternar visões dentro de uma mesma página.
Button para ações, não para navegação de hierarquia.
Widget abaixo da trilha nas telas de detalhe.