Breadcrumbs
Mostra onde o usuário está dentro da hierarquia do site ou sistema e permite voltar a níveis anteriores.
'use client';
import { Breadcrumb, Breadcrumbs } from '@/components/ui/breadcrumbs';
export default function BreadcrumbsDemo() {
return (
<Breadcrumbs>
<Breadcrumb href="#">Início</Breadcrumb>
<Breadcrumb href="#">Tratamentos</Breadcrumb>
<Breadcrumb href="#">Ortodontia</Breadcrumb>
<Breadcrumb>Aparelho invisível</Breadcrumb>
</Breadcrumbs>
);
}Instalação
npx shadcn@latest add @lenstech/breadcrumbsUso
import { Breadcrumb, Breadcrumbs } from "@/components/ui/breadcrumbs"<Breadcrumbs>
<Breadcrumb href="/">Início</Breadcrumb>
<Breadcrumb href="/clientes">Clientes</Breadcrumb>
<Breadcrumb>Fernanda Ribeiro</Breadcrumb>
</Breadcrumbs>Separadores e página atual são automáticos
Não adicione separadores: o chevron aparece sozinho entre os itens. O último Breadcrumb é
marcado como página atual (aria-current="page") e renderizado como texto, mesmo que tenha href.
Exemplos
Com ícone
Use um ícone no primeiro nível e mantenha o nome para leitores de tela com sr-only.
'use client';
import { Home } from 'lucide-react';
import { Breadcrumb, Breadcrumbs } from '@/components/ui/breadcrumbs';
export default function BreadcrumbsWithIcon() {
return (
<Breadcrumbs>
<Breadcrumb href="#">
<Home aria-hidden="true" />
<span className="sr-only">Painel</span>
</Breadcrumb>
<Breadcrumb href="#">Clientes</Breadcrumb>
<Breadcrumb>Fernanda Ribeiro</Breadcrumb>
</Breadcrumbs>
);
}A partir de uma lista
Passe items e uma função de renderização; cada item precisa de id.
'use client';
import { Breadcrumb, Breadcrumbs } from '@/components/ui/breadcrumbs';
const trilha = [
{ id: 'loja', label: 'Loja', href: '#' },
{ id: 'cafes', label: 'Cafés', href: '#' },
{ id: 'especiais', label: 'Especiais', href: '#' },
{ id: 'produto', label: 'Café Bourbon Amarelo 250g' },
];
export default function BreadcrumbsDynamic() {
return (
<Breadcrumbs items={trilha}>
{(item) => (
<Breadcrumb id={item.id} href={item.href}>
{item.label}
</Breadcrumb>
)}
</Breadcrumbs>
);
}Responsivo
Esconda níveis intermediários em telas pequenas com className="hidden sm:inline-flex".
'use client';
import { Breadcrumb, Breadcrumbs } from '@/components/ui/breadcrumbs';
export default function BreadcrumbsResponsive() {
return (
<Breadcrumbs>
<Breadcrumb href="#" className="hidden sm:inline-flex">
Andrade & Lima
</Breadcrumb>
<Breadcrumb href="#" className="hidden sm:inline-flex">
Clientes
</Breadcrumb>
<Breadcrumb href="#">Padaria Pão Dourado</Breadcrumb>
<Breadcrumb>Notas fiscais</Breadcrumb>
</Breadcrumbs>
);
}Quando usar
- Use em sistemas e sites com 3 ou mais níveis (painel → clientes → cliente → notas).
- Não use em sites de uma página ou com hierarquia rasa — o menu principal basta.
- Não substitui o menu principal: combine com
Sidebarou o blocoSite Header. - Veja a composição completa no bloco
App Shell.
API
Breadcrumbs
Aceita todas as props do Breadcrumbs do React Aria, mais:
Prop
Type
Breadcrumb
Prop
Type