Ravox KitNavegação
Trilha
Breadcrumb: mostra onde a pessoa está e o caminho de volta. Separador à sua escolha, o nível atual com aria-current e, quando a trilha é longa, os níveis do meio viram um … que abre a lista dos escondidos.
Ajustes
Separador
Exemplos
Com o Link do Next
Trilha longa: o meio vira …
Início com ícone
No topo da página
Pedido #4821
Marina Duarte · R$ 312,40 · pago no Pix
Instalação
O shadcn cria components/ui/trilha.tsx no seu projeto e instala o tema junto. O arquivo é seu: edite à vontade.
npx shadcn@latest add https://ui.ravoxlabs.com/r/trilha.jsonOpções
| Opção | Tipo | Padrão | O que faz |
|---|---|---|---|
| separador | ReactNode | setinha | O que vai entre os níveis ("/", um ponto, um ícone). Fica escondido de leitores de tela (Trilha). |
| maxVisiveis | number | — | Com mais níveis que isso, os do meio vão para dentro do …; ficam o primeiro e os últimos (Trilha). |
| rotulo | string | "Trilha" | Nome do <nav> para leitores de tela (Trilha). |
| atual | boolean | false | O nível em que a pessoa está: vira texto com aria-current="page" (TrilhaItem). |
| asChild | boolean | false | Passa o visual para o filho, como o <Link> do Next (TrilhaItem). |
| ...props | ComponentProps<"a"> | — | href e o resto do <a> (TrilhaItem). |