Skip to content
Stylus UI

Breadcrumbs

Display a trail of links to parent pages.
FigmaGitHubStorybook

Usage

To display <Breadcrumbs>, supply an array of Breadcrumb objects.

import { type BreadcrumbLink, Breadcrumbs } from "stylus-ui/Breadcrumbs";


const breadcrumbLinks: BreadcrumbLink[] = [
  { label: "Home", href: "/" },
  { label: "Account", href: "/account" },
  { label: "Settings", href: "/account/settings" },
  {
    label: "Privacy and Security",
    href: "/account/settings/privacy",
  },
];


export default () => <Breadcrumbs links={breadcrumbLinks} />;

Hidden items

Inner breadcrumb links will automatically collapse into a <DropdownMenu> when they can’t fit on the screen. This doesn’t require any extra configuration.

Click and drag (desktop only) 👆

Truncation

Long text will truncate in the middle and display the full text in a tooltip on hover. This doesn’t require extra configuration.

Icons

FontAwesome icons can be passed to breadcrumb items with the icon prop.

import { faHome, faUsers, faBan } from "@fortawesome/pro-regular-svg-icons";
import { type BreadcrumbLink, Breadcrumbs } from "stylus-ui/Breadcrumbs";


const breadcrumbLinks: BreadcrumbLink[] = [
  { label: "Admin", onClick: () => null, icon: faHome },
  { label: "Users", onClick: () => null, icon: faUsers },
  { label: "Bans", onClick: () => null, icon: faBan },
];


export default () => <Breadcrumbs links={breadcrumbLinks} />;

The icons will also display when collapsed into a dropdown.

Disabled

The entire breadcrumb can be put into view-only mode by passing disabled, which will disable all click events.

import { type BreadcrumbLink, Breadcrumbs } from "stylus-ui/Breadcrumbs";


const breadcrumbLinks: BreadcrumbLink[] = [
  { label: "Home", onClick: () => null },
  { label: "Account", onClick: () => null },
  { label: "Settings", onClick: () => null },
  {
    label: "Privacy and Security",
    onClick: () => null,
  },
];


export default () => <Breadcrumbs links={breadcrumbLinks} disabled />;

Individual elements can also be selectively disabled.

import { type BreadcrumbLink, Breadcrumbs } from "stylus-ui/Breadcrumbs";


const breadcrumbLinks: BreadcrumbLink[] = [
  { label: "Home", onClick: () => null },
  { label: "Account", onClick: () => null },
  { label: "Settings", onClick: () => null, disabled: true },
  {
    label: "Privacy and Security",
    onClick: () => null,
  },
];


export default () => <Breadcrumbs links={breadcrumbLinks} />;

API Reference

Inherits properties from HTMLElement.

Prop
Type
Default
links Required BreadcrumbLink[]
disabled boolean false

Inherits properties from HTMLLIElement.

Prop
Type
Default
label Required string
disabled boolean false
href string
icon IconDefinition
onClick () => void