Breadcrumb — Sinapse Design System

Default

Itens com href viram links. O último (sem href ou explicitamente final) vira <span> com aria-current="page".

<Breadcrumb items={[
{ label: "Home", href: "/" },
{ label: "Componentes", href: "/componentes" },
{ label: "Breadcrumb" },
]} />

<template>
<nav aria-label="Breadcrumb">
  <ol class="flex items-center gap-2 text-sm">
    <li><a href="/" class="itps-link">Home</a></li>
    <li class="text-muted-foreground">/</li>
    <li><a href="/componentes" class="itps-link">Componentes</a></li>
    <li class="text-muted-foreground">/</li>
    <li><span aria-current="page" class="text-foreground font-medium">Breadcrumb</span></li>
  </ol>
</nav>
</template>

<nav aria-label="Breadcrumb">
<ol className="flex items-center gap-2 text-sm">
  <li><a href="/" className="itps-link">Home</a></li>
  <li className="text-muted-foreground">/</li>
  <li><a href="/componentes" className="itps-link">Componentes</a></li>
  <li className="text-muted-foreground">/</li>
  <li><span aria-current="page" className="text-foreground font-medium">Breadcrumb</span></li>
</ol>
</nav>

<nav aria-label="Breadcrumb">
<ol class="flex items-center gap-2 text-sm">
  <li><a href="/" class="itps-link">Home</a></li>
  <li class="text-muted-foreground">/</li>
  <li><a href="/componentes" class="itps-link">Componentes</a></li>
  <li class="text-muted-foreground">/</li>
  <li><span aria-current="page" class="text-foreground font-medium">Breadcrumb</span></li>
</ol>
</nav>

Com ícone na raiz

Use icon em qualquer item — costuma ficar bem na raiz.

<Breadcrumb items={[
{ label: "Home", href: "/", icon: "home" },
{ label: "Pacientes", href: "/pacientes" },
{ label: "João Silva" },
]} />

Hierarquia profunda

Sem limite hardcoded — fluxo natural via wrap se overflow. Mantenha curto.

<Breadcrumb items={[
{ label: "Home", href: "/" },
{ label: "Clínica", href: "/clinica" },
{ label: "Atendimentos", href: "/clinica/atendimentos" },
{ label: "2026", href: "/clinica/atendimentos/2026" },
{ label: "Maio" },
]} />

Props

Prop	Tipo	Default	Descrição
`items`	`Item[]`	obrigatório	Lista ordenada raiz → atual.
`class`	`string`	—	Classes adicionais.

Item

Prop	Tipo	Descrição
`label`	`string`	Texto visível.
`href`	`string`	URL. Sem href + último = página atual.
`icon`	`string`	Material Symbol opcional.