NavigationDmduskmoonimplemented5 demos

DmBreadcrumb

DmBreadcrumb shows page location with compact trails and optional stored navigation history.

Import@duskmoon-dev/components/dm-breadcrumb

3API sections

17documented props

3behavior scenarios

Key API

itemsisStoragePathstorageKeymaxHistoryLengthcompactmaxVisibleItems

Usage

When to use

Use it in DuskMoon application screens that need a packaged, opinionated workflow component.
Reach for the lower-level standard component when the screen needs custom composition.

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

DuskMoon workflow wrapper

Wraps lower-level primitives into a higher-level DuskMoon-prefixed workflow API.

Application defaults

Examples show the defaults and composition points expected by internal DuskMoon app screens.

Primary API surface

DmBreadcrumb is most often configured through `items`, `isStoragePath`, `storageKey`, `maxHistoryLength`.

Covered behavior

Renders Dm classes, values, and link items

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 DmBreadcrumb from its package subpath, then render it with the core props.

Source

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

export function Example() {
  return (<DmBreadcrumb
  items={[{ key: "main", label: "Main", title: "Main" }]}
>
  DuskMoon Dm Breadcrumb
</DmBreadcrumb>);
}

Preview

Renders Dm classes, values, and link items

test-backed

DmBreadcrumb scenario from the component test coverage: renders dm classes, values, and link items.

Source

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

export function DmBreadcrumbRendersDmClassesValuesDemo() {
  return (<DmBreadcrumb
  // Renders Dm classes, values, and link items
  items={[{ key: "main", label: "Main", title: "Main" }]}
>
  DuskMoon Dm Breadcrumb
</DmBreadcrumb>);
}

Preview

Uses recent path search when storage path is enabled

test-backed

DmBreadcrumb scenario from the component test coverage: uses recent path search when storage path is enabled.

Source

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

export function DmBreadcrumbUsesRecentPathSearchDemo() {
  return (<DmBreadcrumb
  // Uses recent path search when storage path is enabled
  items={[{ key: "main", label: "Main", title: "Main" }]}
>
  DuskMoon Dm Breadcrumb
</DmBreadcrumb>);
}

Preview

Collapses middle items for compact breadcrumb trails

test-backed

DmBreadcrumb scenario from the component test coverage: collapses middle items for compact breadcrumb trails.

Source

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

export function DmBreadcrumbCollapsesMiddleItemsForDemo() {
  return (<DmBreadcrumb
  // Collapses middle items for compact breadcrumb trails
  items={[{ key: "main", label: "Main", title: "Main" }]}
>
  DuskMoon Dm Breadcrumb
</DmBreadcrumb>);
}

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">
  <DmBreadcrumb
  items={[{ key: "main", label: "Main", title: "Main" }]}
>
  DuskMoon Dm Breadcrumb
</DmBreadcrumb>
</div>

<div data-theme="moonlight">
  <DmBreadcrumb
  items={[{ key: "main", label: "Main", title: "Main" }]}
>
  DuskMoon Dm Breadcrumb
</DmBreadcrumb>
</div>

API

The API reference below lists every parsed exported type or interface for DmBreadcrumb. Start with `items`, `isStoragePath`, `storageKey`, `maxHistoryLength` for common usage.

Types: packages/components/src/components/dm-breadcrumb/DmBreadcrumb.types.tsScenarios: packages/components/src/components/dm-breadcrumb/DmBreadcrumb.test.tsx

DmBreadcrumbPropsinterface extends Omit<ComponentProps<"nav">, "children" | "onClick">, Omit<BreadcrumbProps, "items" | "routes" | "onClick">

Prop	Type	Required	Description
`items`	`DmBreadcrumbItem[]`	Yes	items configures DmBreadcrumb.
`isStoragePath`	`boolean`	No	isStoragePath configures DmBreadcrumb.
`storageKey`	`string`	No	storageKey configures DmBreadcrumb.
`maxHistoryLength`	`number`	No	maxHistoryLength configures DmBreadcrumb.
`compact`	`boolean`	No	compact configures DmBreadcrumb.
`maxVisibleItems`	`number`	No	maxVisibleItems configures DmBreadcrumb.
`history`	`DmBreadcrumbHistoryItem[]`	No	history configures DmBreadcrumb.
`onClick`	`MouseEventHandler<HTMLElement>`	No	onClick configures DmBreadcrumb.

DmBreadcrumbIteminterface

Prop	Type	Required	Description
`title`	`ReactNode`	Yes	title configures DmBreadcrumb.
`url`	`string`	No	url configures DmBreadcrumb.
`href`	`string`	No	href configures DmBreadcrumb.
`value`	`ReactNode`	No	value configures DmBreadcrumb.
`onClick`	`(url: string) => void`	No	onClick configures DmBreadcrumb.
`itemRender`	`(item: DmBreadcrumbItem) => ReactNode`	No	itemRender configures DmBreadcrumb.
`menu`	`BreadcrumbMenuProps`	No	menu configures DmBreadcrumb.

DmBreadcrumbHistoryIteminterface

Prop	Type	Required	Description
`pathname`	`string`	Yes	pathname configures DmBreadcrumb.
`search`	`string`	No	search configures DmBreadcrumb.