Skip to main content

Breadcrumb

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

Open in Storybook

Import​

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

Basic usage​

Custom separator​

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.

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
classNamestring-Additional CSS class
childrenReactNode-Breadcrumb items
PropTypeDefaultDescription
hrefstring-Link destination (omit for current page)
isCurrentPagebooleanautoWhether this is the current page (auto-set for last item)
classNamestring-Additional CSS class
childrenReactNode-Item content

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";