LayoutDmduskmoonimplemented5 demos

DmLayout

DmLayout combines menus, breadcrumbs, and collapsible navigation in an application shell.

Import@duskmoon-dev/components/dm-layout

2API sections

23documented props

3behavior scenarios

Key API

menusselectedKeyopenAllKeyscollapseddefaultCollapsedhideProductHeader

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

DmLayout is most often configured through `menus`, `selectedKey`, `openAllKeys`, `collapsed`.

Covered behavior

Derives selected menu, open keys, breadcrumb, and tips

Feature Demos

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

Preview

DuskMoon Dm Layout

Basic usage

authored

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

Source

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

export function Example() {
  return (<DmLayout>DuskMoon Dm Layout</DmLayout>);
}

Preview

DuskMoon Dm Layout

Derives selected menu, open keys, breadcrumb, and tips

test-backed

DmLayout scenario from the component test coverage: derives selected menu, open keys, breadcrumb, and tips.

Source

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

export function DmLayoutDerivesSelectedMenuOpenDemo() {
  return (<DmLayout>DuskMoon Dm Layout</DmLayout>);
}

Preview

DuskMoon Dm Layout

Renders composed menu, breadcrumb, tips, and content

test-backed

DmLayout scenario from the component test coverage: renders composed menu, breadcrumb, tips, and content.

Source

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

export function DmLayoutRendersComposedMenuBreadcrumbDemo() {
  return (<DmLayout>DuskMoon Dm Layout</DmLayout>);
}

Preview

DuskMoon Dm Layout

Supports menu clicks, collapse, and explicit breadcrumb items

test-backed

DmLayout scenario from the component test coverage: supports menu clicks, collapse, and explicit breadcrumb items.

Source

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

export function DmLayoutSupportsMenuClicksCollapseDemo() {
  return (<DmLayout>DuskMoon Dm Layout</DmLayout>);
}

Preview

Sunshine Theme

DuskMoon Dm Layout

Moonlight Theme

DuskMoon Dm Layout

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">
  <DmLayout>DuskMoon Dm Layout</DmLayout>
</div>

<div data-theme="moonlight">
  <DmLayout>DuskMoon Dm Layout</DmLayout>
</div>

API

The API reference below lists every parsed exported type or interface for DmLayout. Start with `menus`, `selectedKey`, `openAllKeys`, `collapsed` for common usage.

Types: packages/components/src/components/dm-layout/DmLayout.types.tsScenarios: packages/components/src/components/dm-layout/DmLayout.test.tsx

DmLayoutPropsinterface extends Omit<ComponentProps<"div">, "onSelect">, Omit<LayoutProps, "children">

Prop	Type	Required	Description
`menus`	`DmMenuSchema[]`	No	menus configures DmLayout.
`selectedKey`	`string`	No	selectedKey configures DmLayout.
`openAllKeys`	`boolean`	No	openAllKeys configures DmLayout.
`collapsed`	`boolean`	No	collapsed configures DmLayout.
`defaultCollapsed`	`boolean`	No	defaultCollapsed configures DmLayout.
`hideProductHeader`	`boolean`	No	hideProductHeader configures DmLayout.
`productIcon`	`ReactNode`	No	productIcon configures DmLayout.
`productTitle`	`ReactNode`	No	productTitle configures DmLayout.
`breadcrumbItems`	`DmBreadcrumbItem[]`	No	breadcrumbItems configures DmLayout.
`aheadBreadcrumbItems`	`DmBreadcrumbItem[]`	No	aheadBreadcrumbItems configures DmLayout.
`behindBreadcrumbItems`	`DmBreadcrumbItem[]`	No	behindBreadcrumbItems configures DmLayout.
`tips`	`ReactNode`	No	tips configures DmLayout.
`locale`	`string`	No	locale configures DmLayout.
`menuProps`	`Omit<`	No	menuProps configures DmLayout.
`onCollapse`	`(collapsed: boolean) => void`	No	onCollapse configures DmLayout.
`onMenuClick`	`(key: string, menu?: DmMenuSchema) => void`	No	onMenuClick configures DmLayout.
`onBreadcrumbClick`	`(url: string) => void`	No	onBreadcrumbClick configures DmLayout.
`children`	`ReactNode`	No	children configures DmLayout.

DmLayoutSelectioninterface

Prop	Type	Required	Description
`selectedMenuKey`	`string`	Yes	selectedMenuKey configures DmLayout.
`selectedBreadcrumbKey`	`string`	Yes	selectedBreadcrumbKey configures DmLayout.
`openKeys`	`string[]`	Yes	openKeys configures DmLayout.
`breadcrumbItems`	`DmBreadcrumbItem[]`	Yes	breadcrumbItems configures DmLayout.
`tips`	`ReactNode`	No	tips configures DmLayout.