Visão geral

O Breadcrumb exibe o caminho de navegação com links clicáveis e a página atual não-interativa.

Demo básica

Import

import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis } from "@/components/ui/breadcrumb"

Estrutura base

Breadcrumb é o container nav. Dentro vai BreadcrumbList, depois pares de BreadcrumbItem + BreadcrumbSeparator, e o item final usa BreadcrumbPage (não é link).

Variações

Exemplos de usos comuns do breadcrumb em diferentes contextos.

Com elipse (caminho longo)

Com separador customizado (barra)

Dois níveis simples

Padrão de implementação

Snippets prontos para os contextos mais comuns.

Breadcrumb básico (3 níveis)

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/produtos">Produtos</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Detalhes do produto</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Com Next.js Link

import Link from "next/link"

<BreadcrumbLink render={<Link href="/produtos" />}>
  Produtos
</BreadcrumbLink>

Com elipse para caminho longo

<BreadcrumbItem>
  <BreadcrumbEllipsis />
</BreadcrumbItem>

Props e uso

API dos sub-componentes disponíveis no projeto.

Sub-componentes

Breadcrumb

nav

Container raiz com aria-label='breadcrumb'.

BreadcrumbList

Lista ordenada dos itens do caminho.

BreadcrumbItem

Container de cada item individual.

BreadcrumbLink

a | render prop

Link navegável. Use render={<Link href='...' />} para Next.js.

BreadcrumbPage

span

Item atual (não-navegável). Tem aria-current='page' automaticamente.

BreadcrumbSeparator

Separador visual (padrão: ChevronRight). Aceita children para customizar.

BreadcrumbEllipsis

span

Ícone de reticências para caminhos longos colapsados.

Acessibilidade

O componente usa nav aria-label="breadcrumb" automaticamente para identificação por leitores de tela.

O BreadcrumbPage inclui aria-current="page" para indicar a página atual.

Os separadores têm aria-hidden="true" para não serem anunciados por leitores de tela.

MN Design System · Primary #5FC318 · Brand Green #AFF000 · Font: Inter