Skip to main content

Breadcrumb

Breadcrumb is a navigation trail that shows the user's location in a hierarchical structure.

Import​

import { Breadcrumb, BreadcrumbItem } from "@tosui/react";

Basic Usage​

<Breadcrumb>
  <BreadcrumbItem href="/">Home</BreadcrumbItem>
  <BreadcrumbItem href="/products">Products</BreadcrumbItem>
  <BreadcrumbItem>Electronics</BreadcrumbItem>
</Breadcrumb>

Custom Separator​

<Breadcrumb separator=">">
  <BreadcrumbItem href="/">Home</BreadcrumbItem>
  <BreadcrumbItem href="/docs">Docs</BreadcrumbItem>
  <BreadcrumbItem>Components</BreadcrumbItem>
</Breadcrumb>

<Breadcrumb separator="-">
  <BreadcrumbItem href="/">Home</BreadcrumbItem>
  <BreadcrumbItem href="/docs">Docs</BreadcrumbItem>
  <BreadcrumbItem>Components</BreadcrumbItem>
</Breadcrumb>

Icon Separator​

import { ChevronRightIcon } from "your-icon-library";

<Breadcrumb separator={<ChevronRightIcon size={14} />}>
  <BreadcrumbItem href="/">Home</BreadcrumbItem>
  <BreadcrumbItem href="/settings">Settings</BreadcrumbItem>
  <BreadcrumbItem>Profile</BreadcrumbItem>
</Breadcrumb>

Current Page​

The last item is automatically marked as the current page. It renders as text instead of a link.

<Breadcrumb>
  <BreadcrumbItem href="/">Home</BreadcrumbItem>
  <BreadcrumbItem href="/users">Users</BreadcrumbItem>
  <BreadcrumbItem href="/users/123">John Doe</BreadcrumbItem>
  <BreadcrumbItem>Edit Profile</BreadcrumbItem>
</Breadcrumb>

With Router​

import { Link as RouterLink } from "react-router-dom";

<Breadcrumb>
  <BreadcrumbItem as={RouterLink} to="/">Home</BreadcrumbItem>
  <BreadcrumbItem as={RouterLink} to="/products">Products</BreadcrumbItem>
  <BreadcrumbItem>Current Product</BreadcrumbItem>
</Breadcrumb>

Props Reference​

PropTypeDefaultDescription
separatorReactNode"/"Separator between items
PropTypeDefaultDescription
hrefstring-Link destination (omit for current page)
isCurrentPagebooleanautoWhether this is the current page (auto-set for last item)

Accessibility​

  • Renders as <nav aria-label="Breadcrumb"> for screen reader navigation
  • Uses <ol> for semantic list structure
  • Current page has aria-current="page"
  • Separators have aria-hidden="true"

TypeScript​

import { Breadcrumb, BreadcrumbItem, type BreadcrumbProps, type BreadcrumbItemProps } from "@tosui/react";