Breadcrumb

Navegação hierárquica que exibe o caminho da página atual. Usado no AppHeader de todos os portais SYSGO para orientação do usuário.

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

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Início</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Consultoras</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Básico

Navegação com dois níveis.

Três níveis

Caminho mais profundo como em detalhes de um pedido.

Com reticências

Caminhos longos com seções intermediárias ocultas.

API Reference

Prop	Type	Default	Descrição
`BreadcrumbLink.href`	`string`	—	URL de destino do link
`BreadcrumbLink.asChild`	`boolean`	false	Renderizar como componente filho (ex: Link do Next.js)
`BreadcrumbPage`	`ReactNode`	—	Página atual (não clicável, aria-current='page')
`BreadcrumbSeparator.children`	`ReactNode`	—	Ícone separador (padrão: ChevronRight)