Breadcrumb

PreviousNext

Shows where the current page sits in the site, with links back up each level.

import {
  Breadcrumb,
  BreadcrumbItem,

When to use it

Use a breadcrumb on pages that are nested several levels deep: an invoice inside Invoices inside Accounting, a product inside a category. It tells people where they are and gives them a quick way back up. On a flat site with only a couple of levels, it adds noise.

Import

import {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbEllipsis,
} from "@hel/ui/breadcrumb"

Anatomy

The parts follow the standard breadcrumb pattern for assistive technology: a navigation landmark that holds an ordered list of items.

  • Breadcrumb is the navigation landmark. It is named "Breadcrumb" for screen readers, and you can change that with aria-label.
  • BreadcrumbList is the list.
  • BreadcrumbItem is one step. It draws the separator after its content, and leaves it out on the last item.
  • BreadcrumbLink is a step people can go to.
  • BreadcrumbPage is the current page. It is not a link, and it is marked as the current page for screen readers.
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbItem>
      <BreadcrumbPage>INV-2041</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Examples

A long trail

When there are too many levels to show, collapse the middle ones into a BreadcrumbEllipsis. It is a small icon button, so it can do real work. This one shows the hidden pages in place when clicked.

import * as React from "react"

import {

Ellipsis menu

Use the ellipsis as the trigger of a dropdown menu to list the collapsed pages. Pass it to the trigger with render, so the trigger and the ellipsis stay one button.

import {
  Breadcrumb,
  BreadcrumbEllipsis,

Custom separator

separator on a BreadcrumbItem takes any element, so you can use a slash instead of the default chevron. Pass null to remove it.

import { Slash } from "lucide-react"

import {

With your router

BreadcrumbLink renders a normal link. To use your framework's link for client side navigation, pass it to render. The styling stays.

import Link from "next/link"
 
<BreadcrumbLink render={<Link href="/invoices" />}>Invoices</BreadcrumbLink>

Wrapping and direction

The list wraps onto more lines when the trail is wider than its container. Under a right-to-left direction the trail starts on the right and the separators point the other way.

Props

Takes the props of a nav. aria-label replaces the default name.

PropTypeDefault
separatorReactNodeA chevron
PropTypeDefault
hrefstringnone
renderReactElementAn a

An icon button with the dots icon. It takes the props of an icon button except icon. Its default label is "Show hidden pages", and aria-label replaces it.