Breadcrumbs

Breadcrumbs

The Breadcrumbs component displays a navigation hierarchy that helps users understand their current location within an application or website.

import Breadcrumbs from "rocksolidjs/Breadcrumbs";
import Link from "rocksolidjs/Link";
import Typography from "rocksolidjs/Typography";

export default function Example() {
  return (
    <Breadcrumbs aria-label="Breadcrumb">
      <Link color="inherit" href="/">Home</Link>
      <Link color="inherit" href="/products">Products</Link>
      <Typography as="span" color="textPrimary">Details</Typography>
    </Breadcrumbs>
  );
}

Examples

Custom Separator

Use the seperator prop to customize the separator displayed between breadcrumb items. The default separator is /.

import Breadcrumbs from "rocksolidjs/Breadcrumbs";
import Link from "rocksolidjs/Link";
import Typography from "rocksolidjs/Typography";

export default function Example() {
  return (
    <Breadcrumbs 
      aria-label="Breadcrumb"
      seperator="›"
    >
      <Link color="inherit" href="/">Home</Link>
      <Link color="inherit" href="/products">Products</Link>
      <Typography as="span" color="textPrimary">Details</Typography>
    </Breadcrumbs>
  );
}

Customization

Use class and slotProps to customize the Breadcrumbs container, breadcrumb items, and separators.

import Breadcrumbs from "rocksolidjs/Breadcrumbs";
import Link from "rocksolidjs/Link";
import Typography from "rocksolidjs/Typography";

export default function Example() {
  return (
    <Breadcrumbs
      aria-label="Breadcrumb"
      class="text-sm"
      seperator="›"
      slotProps={{
        ol: {
          class: "flex items-center gap-2.5",
        },
        li: {
          class: "text-gray-600 dark:text-gray-300",
        },
        seperator: {
          class: "text-gray-400 dark:text-gray-500 text-lg",
        },
      }}
    >
      <Link class="py-1 px-2 rounded-sm bg-neutral-200 text-neutral-900 dark:bg-neutral-800 dark:text-white" href="/">Home</Link>
      <Link class="py-1 px-2 rounded-sm bg-neutral-200 text-neutral-900 dark:bg-neutral-800 dark:text-white" href="/products">Products</Link>
      <Typography as="span" color="textPrimary">Details</Typography>
    </Breadcrumbs>
  );
}

Accessibility

The Breadcrumbs component follows common accessibility patterns for breadcrumb navigation.

  • Breadcrumbs should be contained within a navigation landmark.
  • The breadcrumb list should use an ordered list to represent the hierarchy.
  • Each breadcrumb should provide a clear and descriptive label.
  • The current page should be distinguishable from other breadcrumb links.
  • Separators are visual elements and should not be the only way to communicate the relationship between breadcrumb items.
  • Ensure custom separators do not introduce unnecessary information for screen readers.

API

The Breadcrumbs component supports custom separators, elements, and slot-level customization.

Prop Type Required Default Description
as string No "nav" Specifies the HTML element used to render the Breadcrumbs.
class string No — Custom CSS class applied to the Breadcrumbs.
seperator JSXElement No "/" Custom separator displayed between breadcrumb items.
slotProps { ol?: object; li?: object; seperator?: object } No — Provides props for customizing the Breadcrumbs slots.
  • ol — Props for the ordered list slot.
  • li — Props for the breadcrumb item slots.
  • seperator — Props for the separator slot.
  • Link — Use Link for navigation between pages.
  • Button — Use Button for actions that do not navigate to another page.