Breadcrumb — Sinapse Design System

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

export function BreadcrumbExample() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="/componentes">Componentes</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}

<script setup lang="ts">
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from '@/components/ui/breadcrumb'
</script>

<template>
  <Breadcrumb>
    <BreadcrumbList>
      <BreadcrumbItem>
        <BreadcrumbLink href="/">Home</BreadcrumbLink>
      </BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem>
        <BreadcrumbLink href="/componentes">Componentes</BreadcrumbLink>
      </BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem>
        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
      </BreadcrumbItem>
    </BreadcrumbList>
  </Breadcrumb>
</template>

<nav class="itps-breadcrumb" aria-label="Breadcrumb">
  <ol class="itps-breadcrumb__list">
    <li class="itps-breadcrumb__item">
      <a class="itps-breadcrumb__link" href="/">Home</a>
    </li>
    <li class="itps-breadcrumb__separator" aria-hidden="true">
      <i class="ti ti-chevron-right"></i>
    </li>
    <li class="itps-breadcrumb__item">
      <a class="itps-breadcrumb__link" href="/componentes">Componentes</a>
    </li>
    <li class="itps-breadcrumb__separator" aria-hidden="true">
      <i class="ti ti-chevron-right"></i>
    </li>
    <li class="itps-breadcrumb__item">
      <span class="itps-breadcrumb__page" aria-current="page">Breadcrumb</span>
    </li>
  </ol>
</nav>

Instalação

Instale o Breadcrumb da sua stack e rode o comando individual ITpS em seguida. O comando itps add breadcrumb é theme-only: ele valida o slug e confirma que o contrato visual vem do tema ITpS, das classes copy-first e dos snippets desta página.

terminal · React/Next

pnpm dlx shadcn@latest add breadcrumb
pnpm dlx github:ITPS/sinapse-ui-cli add breadcrumb

terminal · Vue3/Nuxt4

pnpm dlx shadcn-vue@latest add breadcrumb
pnpm dlx github:ITPS/sinapse-ui-cli add breadcrumb

O comando individual adapta só este componente; não instala o catálogo inteiro.

Uso

Use Breadcrumb quando o usuário precisa entender a hierarquia entre a raiz e a página atual. Ele é navegação auxiliar, não substitui o menu principal.

Em React/Next com shadcn/ui e Vue3/Nuxt4 com shadcn-vue, use os componentes compostos de @/components/ui/breadcrumb. Para HTML ou wrappers finos, use itps-breadcrumb com lista ordenada, links navegáveis e página atual marcada por aria-current="page".

Exemplos

Estrutura

Peça	React/Next e Vue3/Nuxt4	HTML
Landmark	`Breadcrumb`	`<nav class="itps-breadcrumb">`
Lista	`BreadcrumbList`	`itps-breadcrumb__list`
Item	`BreadcrumbItem`	`itps-breadcrumb__item`
Link	`BreadcrumbLink`	`itps-breadcrumb__link`
Página atual	`BreadcrumbPage`	`itps-breadcrumb__page` + `aria-current="page"`
Separador	`BreadcrumbSeparator`	`itps-breadcrumb__separator`
Colapso	`BreadcrumbEllipsis`	`itps-breadcrumb__ellipsis`

Colapso e raiz com ícone

Use a raiz com ícone quando ela melhora reconhecimento rápido. Para caminhos longos, substitua níveis intermediários por ellipsis e conecte o botão a um menu ou drawer da sua stack.

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

export function BreadcrumbCollapsed() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbEllipsis />
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="/componentes">Componentes</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}

<script setup lang="ts">
import {
  Breadcrumb,
  BreadcrumbEllipsis,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from '@/components/ui/breadcrumb'
</script>

<template>
  <Breadcrumb>
    <BreadcrumbList>
      <BreadcrumbItem>
        <BreadcrumbLink href="/">Home</BreadcrumbLink>
      </BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem>
        <BreadcrumbEllipsis />
      </BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem>
        <BreadcrumbLink href="/componentes">Componentes</BreadcrumbLink>
      </BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem>
        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
      </BreadcrumbItem>
    </BreadcrumbList>
  </Breadcrumb>
</template>

<nav class="itps-breadcrumb" aria-label="Breadcrumb compacto">
  <ol class="itps-breadcrumb__list">
    <li class="itps-breadcrumb__item">
      <a class="itps-breadcrumb__link" href="/">
        <i class="ti ti-home" aria-hidden="true"></i>
        <span>Home</span>
      </a>
    </li>
    <li class="itps-breadcrumb__separator" aria-hidden="true">
      <i class="ti ti-chevron-right"></i>
    </li>
    <li class="itps-breadcrumb__item">
      <button type="button" class="itps-breadcrumb__ellipsis" aria-label="Mostrar níveis intermediários">
        <i class="ti ti-dots" aria-hidden="true"></i>
      </button>
    </li>
    <li class="itps-breadcrumb__separator" aria-hidden="true">
      <i class="ti ti-chevron-right"></i>
    </li>
    <li class="itps-breadcrumb__item">
      <a class="itps-breadcrumb__link" href="/componentes">Componentes</a>
    </li>
    <li class="itps-breadcrumb__separator" aria-hidden="true">
      <i class="ti ti-chevron-right"></i>
    </li>
    <li class="itps-breadcrumb__item">
      <span class="itps-breadcrumb__page" aria-current="page">Breadcrumb</span>
    </li>
  </ol>
</nav>

API copy-first

Classe/atributo	Uso
`itps-breadcrumb`	Landmark de navegação auxiliar.
`itps-breadcrumb__list`	Lista ordenada flexível com quebra de linha.
`itps-breadcrumb__item`	Item da trilha.
`itps-breadcrumb__link`	Link navegável para níveis anteriores.
`itps-breadcrumb__page`	Página atual sem link.
`itps-breadcrumb__separator`	Separador decorativo entre itens.
`itps-breadcrumb__ellipsis`	Ação compacta para revelar níveis intermediários.
`aria-label`	Nomeia o landmark e botões sem texto visível suficiente.
`aria-current="page"`	Marca apenas a página atual.
`aria-hidden="true"`	Esconde separadores e ícones decorativos de tecnologias assistivas.

Acessibilidade

Use nav com aria-label="Breadcrumb" e mantenha a trilha em ol, porque a ordem comunica hierarquia. Separadores e ícones decorativos devem usar aria-hidden="true". Apenas o último item deve receber aria-current="page". Se a ellipsis abrir um menu, use um button real com nome acessível e conecte-o ao menu da sua stack.