Skip to content
Stylus UI

Breadcrumbs

Display a trail of links to parent pages.

Usage

Section titled “Usage”

To display <Breadcrumbs>, supply an array of link objects (BreadcrumbLink).

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

Section titled “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.

Resize 👆

Truncation

Section titled “Truncation”

Long text will truncate. The full text is always displayed for a breadcrumb element via the native title attribute. The last breadcrumb item is truncated at 320px; all other items are truncated at 160px.

Icons

Section titled “Icons”

Font Awesome 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

Section titled “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

Section titled “API Reference”
Section titled “Breadcrumbs”

Display a trail of links to parent pages.

links

Required
BreadcrumbProps[]

Ordered list of breadcrumb items (label, optional href/onClick, icon). Excess items collapse into an ellipsis menu.

disabled

boolean = false

Disable all links and the ellipsis dropdown.

theme

"light" | "dark" = "light"

Visual theme for text and hover.

Section titled “BreadcrumbLink type”

Each item in the links array accepts: label (required), and optionally href, onClick, icon, and disabled. Use href or onClick to make an item clickable; the last item is rendered as plain text.