Breadcrumbs

Display a trail of links to parent pages.

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.

Resize 👆

Truncation

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

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

`Breadcrumbs`

Inherits properties from HTMLElement.

Prop	Type	Default
`links`	`BreadcrumbLink[]`
`disabled`	`boolean`	`false`

`type BreadcrumbLink`

Inherits properties from HTMLLIElement.

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