Breadcrumb

A navigation aid that displays the user's current location within a site hierarchy.

Preview

Default

Usage

tsx

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

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/hostels">Hostels</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/hostels/manali">Manali</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Book</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Props

Prop	Type	Default	Description
`separator`	`ReactNode`	"/"	Custom separator element between breadcrumb items.
`children`	`ReactNode`	—	BreadcrumbList containing BreadcrumbItem components.
`className`	`string`	—	Additional CSS classes for the breadcrumb container.

separator

Type: ReactNode

Default: "/"

Custom separator element between breadcrumb items.

children

Type: ReactNode

Default: —

BreadcrumbList containing BreadcrumbItem components.

className

Type: string

Default: —

Additional CSS classes for the breadcrumb container.

Previous Menubar Next Pagination