Breadcrumb 10.18.1

ARIA

RTL

A list of links showing the location of the current page in the navigational hierarchy.

Five and more items

You can control the number of visible crumbs using the collapseAfter prop. If not specified, the default is set to 4, with additional crumbs collapsing to create a streamlined view.

"use client";

import { Breadcrumb } from "@heathmont/moon-core-tw";

const breadcrumbs = [
  <a href="#" key="Home">
    Home
  </a>,
  <a href="#" key="Page 1">
    Page 1
  </a>,
  <a href="#" key="Page 2">
    Page 2
  </a>,
  <a href="#" key="Page 3">
    Page 3
  </a>,
  <a href="#" key="Page 4">
    Page 4
  </a>,
  <span key="Current">Current page</span>,
];

export const Collapsed = () => <Breadcrumb breadcrumbs={breadcrumbs} />;

export default Collapsed;

Four Items

By default, a maximum of 4 crumbs are visible.

"use client";

import { Breadcrumb } from "@heathmont/moon-core-tw";

const breadcrumbs = [
  <a href="#" key="home">
    Home
  </a>,
  <a href="#" key="page 1">
    Page 1
  </a>,
  <a href="#" key="page 2">
    Page 2
  </a>,
  <span key="current">Current page</span>,
];

export const FourItems = () => <Breadcrumb breadcrumbs={breadcrumbs} />;

export default FourItems;

Two Items

"use client";

import { Breadcrumb } from "@heathmont/moon-core-tw";

const breadcrumbs = [
  <a href="#" key="home">
    Home
  </a>,
  <span key="current">Current page</span>,
];

export const TwoItems = () => <Breadcrumb breadcrumbs={breadcrumbs} />;

export default TwoItems;

One Item

"use client";

import { Breadcrumb } from "@heathmont/moon-core-tw";

const breadcrumbs = [<span key="current">Current page</span>];

export const OneItem = () => <Breadcrumb breadcrumbs={breadcrumbs} />;

export default OneItem;

Icon as starting item & custom divider

To tailor to your product's needs, you can not only switch dividers but also add icons to the crumbs.

"use client";

import { Breadcrumb } from "@heathmont/moon-core-tw";
import { GenericHome, ControlsChevronRight } from "@heathmont/moon-icons-tw";

const breadcrumbs = [
  <a href="#" aria-label="Home" key="Home">
    <GenericHome className="text-moon-24" />
  </a>,
  <a href="#" key="Page 1">
    Page 1
  </a>,
  <a href="#" key="Page 2">
    Page 2
  </a>,
  <a href="#" key="Page 3">
    Page 3
  </a>,
  <a href="#" key="Page 5">
    Page 4
  </a>,
  <span key="Current">Current page</span>,
];

export const CustomDivider = () => (
  <Breadcrumb
    breadcrumbs={breadcrumbs}
    divider={<ControlsChevronRight className="text-moon-16 rtl:rotate-180" />}
  />
);

export default CustomDivider;

These are props specific to the Breadcrumb component:

Name	Type	Default
breadcrumbs*	"React.ReactNode[]"	-
divider	"React.ReactNode"	-
collapseAfter	number	4

Properties indicated with * are required.