Breadcrumb

Trilha de navegação semântica com suporte a separadores personalizados, reticências e aria-current na página ativa.

Demonstração

Props

Prop	Tipo	Padrão	Descrição
`Breadcrumb`	`nav`	`—`	Root nav element with aria-label="breadcrumb".
`BreadcrumbList`	`ol`	`—`	Ordered list of breadcrumb items.
`BreadcrumbItem`	`li`	`—`	A single breadcrumb item wrapper.
`BreadcrumbLink`	`a`	`—`	A navigable link in the trail.
`BreadcrumbPage`	`span`	`—`	The current page label (aria-current="page").
`BreadcrumbSeparator`	`li`	`'/'`	Visual separator between items. Custom content via children.
`BreadcrumbEllipsis`	`span`	`—`	Ellipsis placeholder for collapsed middle items.

Uso

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

// Basic
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem><BreadcrumbLink href="/">Home</BreadcrumbLink></BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem><BreadcrumbLink href="/components">Components</BreadcrumbLink></BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem><BreadcrumbPage>Button</BreadcrumbPage></BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

// With ellipsis
<BreadcrumbSeparator />
<BreadcrumbItem><BreadcrumbEllipsis /></BreadcrumbItem>
<BreadcrumbSeparator />

// Custom separator
<BreadcrumbSeparator>›</BreadcrumbSeparator>

Ver no Storybook

Abrir no Storybook →

←Combobox Pagination→