Navigation Breadcrumb

Breadcrumb

Where you are, and the way back.

Preview

Default

Usage

tsx

import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator } from "zostel-ui";

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem><BreadcrumbLink href="/destinations">Places</BreadcrumbLink></BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem><BreadcrumbLink href="/destinations#himachal">Himachal Pradesh</BreadcrumbLink></BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem><BreadcrumbPage>Zostel Manali</BreadcrumbPage></BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Parts

Prop	Type	Default	Description
`Breadcrumb`	`nav`	—	aria-label="breadcrumb".
`BreadcrumbLink`	`a`	—	A step back (asChild for your router’s link).
`BreadcrumbPage`	`span`	—	Where you are (aria-current="page").
`BreadcrumbSeparator / BreadcrumbEllipsis`	`li / span`	—	Between steps / for a long trail.

Breadcrumb

Type: nav

Default: —

aria-label="breadcrumb".

BreadcrumbLink

Type: a

Default: —

A step back (asChild for your router’s link).

BreadcrumbPage

Type: span

Default: —

Where you are (aria-current="page").

BreadcrumbSeparator / BreadcrumbEllipsis

Type: li / span

Default: —

Between steps / for a long trail.