Navigationduskmoonimplemented6 demos

Breadcrumb

Breadcrumb shows the current location in a nested route or information hierarchy.

Import@duskmoon-dev/components/breadcrumb

10API sections

36documented props

4behavior scenarios

Key API

itemsroutesparamsseparatoritemRenderkey

Usage

When to use

Use it when users need to move between sections, pages, steps, or contextual actions.
Expose current and disabled state so navigation remains clear to keyboard and screen-reader users.

Implementation notes

StylesheetImport @duskmoon-dev/components/styles.css once in the app or docs shell.

StateStart with default props for static examples, then switch to controlled props when state must be shared.

ThemeThe preview inherits the active DuskMoon data-theme value from the docs layout.

Features

Wayfinding

Covers the route, section, step, or action-list patterns that help users move through an interface.

Current state

Shows selected, active, open, or current props where the component exposes them.

Primary API surface

Breadcrumb is most often configured through `items`, `routes`, `params`, `separator`.

Covered behavior

Renders items with links, current item, and default separator

Feature Demos

Feature demos are authored for the component page, then supplemented with behavior scenarios from the component test coverage.

Preview

Basic usage

authored

Import the component stylesheet and Breadcrumb from its package subpath, then render it with the core props.

Source

import "@duskmoon-dev/components/styles.css";
import { Breadcrumb } from "@duskmoon-dev/components/breadcrumb";

export function Example() {
  return (<Breadcrumb
  items={[
    { title: "Home", href: "/" },
    { title: "Components", href: "/components" },
    { title: "Breadcrumb" }
  ]}
/>);
}

Preview

Renders items with links, current item, and default separator

test-backed

Breadcrumb scenario from the component test coverage: renders items with links, current item, and default separator.

Source

import "@duskmoon-dev/components/styles.css";
import { Breadcrumb } from "@duskmoon-dev/components/breadcrumb";

export function BreadcrumbRendersItemsWithLinksDemo() {
  return (<Breadcrumb
  items={[
    { title: "Home", href: "/" },
    { title: "Components", href: "/components" },
    { title: "Breadcrumb" }
  ]}
/>);
}

Preview

Supports route-style data, params, custom separator, and itemRender

test-backed

Breadcrumb scenario from the component test coverage: supports route-style data, params, custom separator, and itemrender.

Source

import "@duskmoon-dev/components/styles.css";
import { Breadcrumb } from "@duskmoon-dev/components/breadcrumb";

export function BreadcrumbSupportsRouteStyleDataDemo() {
  return (<Breadcrumb
  items={[
    { title: "Home", href: "/" },
    { title: "Components", href: "/components" },
    { title: "Breadcrumb" }
  ]}
/>);
}

Preview

Renders menu item data with click payloads

test-backed

Breadcrumb scenario from the component test coverage: renders menu item data with click payloads.

Source

import "@duskmoon-dev/components/styles.css";
import { Breadcrumb } from "@duskmoon-dev/components/breadcrumb";

export function BreadcrumbRendersMenuItemDataDemo() {
  return (<Breadcrumb
  items={[
    { title: "Home", href: "/" },
    { title: "Components", href: "/components" },
    { title: "Breadcrumb" }
  ]}
/>);
}

Preview

Supports explicit separator items, className, and ref

test-backed

Breadcrumb scenario from the component test coverage: supports explicit separator items, classname, and ref.

Source

import "@duskmoon-dev/components/styles.css";
import { Breadcrumb } from "@duskmoon-dev/components/breadcrumb";

export function BreadcrumbSupportsExplicitSeparatorItemsDemo() {
  return (<Breadcrumb
  items={[
    { title: "Home", href: "/" },
    { title: "Components", href: "/components" },
    { title: "Breadcrumb" }
  ]}
/>);
}

Preview

Sunshine Theme

Moonlight Theme

Theme aware

authored

Docs previews inherit the DuskMoon data-theme value. Use the header switch to compare light and dark rendering.

Source

<div data-theme="sunshine">
  <Breadcrumb
  items={[
    { title: "Home", href: "/" },
    { title: "Components", href: "/components" },
    { title: "Breadcrumb" }
  ]}
/>
</div>

<div data-theme="moonlight">
  <Breadcrumb
  items={[
    { title: "Home", href: "/" },
    { title: "Components", href: "/components" },
    { title: "Breadcrumb" }
  ]}
/>
</div>

API

The API reference below lists every parsed exported type or interface for Breadcrumb. Start with `items`, `routes`, `params`, `separator` for common usage.

Types: packages/components/src/components/breadcrumb/Breadcrumb.types.tsScenarios: packages/components/src/components/breadcrumb/Breadcrumb.test.tsx

BreadcrumbPropsinterface extends Omit< ComponentProps<"nav">, "children" >

Prop	Type	Required	Description
`items`	`BreadcrumbItemType[]`	No	items configures Breadcrumb.
`routes`	`BreadcrumbRoute[]`	No	routes configures Breadcrumb.
`params`	`BreadcrumbParams`	No	params configures Breadcrumb.
`separator`	`ReactNode`	No	separator configures Breadcrumb.
`itemRender`	`BreadcrumbItemRender`	No	itemRender configures Breadcrumb.
`children`	`ReactNode`	No	children configures Breadcrumb.

BreadcrumbMenuClickInfointerface

Prop	Type	Required	Description
`key`	`Key`	Yes	key configures Breadcrumb.
`item`	`BreadcrumbMenuItemType`	Yes	item configures Breadcrumb.
`domEvent`	`MouseEvent<HTMLElement>`	Yes	domEvent configures Breadcrumb.

BreadcrumbMenuItemTypeinterface

Prop	Type	Required	Description
`key`	`Key`	No	key configures Breadcrumb.
`label`	`ReactNode`	No	label configures Breadcrumb.
`title`	`ReactNode`	No	title configures Breadcrumb.
`href`	`string`	No	href configures Breadcrumb.
`path`	`string`	No	path configures Breadcrumb.
`icon`	`ReactNode`	No	icon configures Breadcrumb.
`disabled`	`boolean`	No	disabled configures Breadcrumb.
`onClick`	`MouseEventHandler<HTMLElement>`	No	onClick configures Breadcrumb.
`children`	`BreadcrumbMenuItemType[]`	No	children configures Breadcrumb.

BreadcrumbMenuPropsinterface

Prop	Type	Required	Description
`items`	`BreadcrumbMenuItemType[]`	No	items configures Breadcrumb.
`onClick`	`(info: BreadcrumbMenuClickInfo) => void`	No	onClick configures Breadcrumb.
`selectedKeys`	`Key[]`	No	selectedKeys configures Breadcrumb.

BreadcrumbRouteinterface extends Omit< ComponentProps<"span">, "children" | "title" | "onClick" >

Prop	Type	Required	Description
`key`	`Key`	No	key configures Breadcrumb.
`title`	`ReactNode`	No	title configures Breadcrumb.
`label`	`ReactNode`	No	label configures Breadcrumb.
`breadcrumbName`	`ReactNode`	No	breadcrumbName configures Breadcrumb.
`path`	`string`	No	path configures Breadcrumb.
`href`	`string`	No	href configures Breadcrumb.
`icon`	`ReactNode`	No	icon configures Breadcrumb.
`disabled`	`boolean`	No	disabled configures Breadcrumb.
`menu`	`BreadcrumbMenuProps`	No	menu configures Breadcrumb.
`onClick`	`MouseEventHandler<HTMLElement>`	No	onClick configures Breadcrumb.
`children`	`BreadcrumbRoute[]`	No	children configures Breadcrumb.

BreadcrumbSeparatorTypeinterface

Prop	Type	Required	Description
`type`	`"separator"`	Yes	type configures Breadcrumb.
`key`	`Key`	No	key configures Breadcrumb.
`separator`	`ReactNode`	No	separator configures Breadcrumb.
`className`	`string`	No	className configures Breadcrumb.

BreadcrumbParamstype

Record<string, string | number | undefined>

BreadcrumbItemTypetype

BreadcrumbRoute | BreadcrumbSeparatorType

BreadcrumbItemRendertype

( route: BreadcrumbRoute, params: BreadcrumbParams, routes: BreadcrumbRoute[], paths: string[], ) => ReactNode

BreadcrumbComponenttype

ForwardRefExoticComponent< BreadcrumbProps & RefAttributes<HTMLElement> >