NavigationDmduskmoonimplemented5 demos

DmMenu

DmMenu renders navigation from menu schemas with product branding and click callbacks.

Import@duskmoon-dev/components/dm-menu

5API sections

33documented props

3behavior scenarios

Key API

menusitemshideProductHeaderproductIconproductTitlelocale

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

DmMenu is most often configured through `menus`, `items`, `hideProductHeader`, `productIcon`.

Covered behavior

Converts workflow menu schema into local menu 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 DmMenu from its package subpath, then render it with the core props.

Source

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

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

Preview

Converts workflow menu schema into local menu items

test-backed

DmMenu scenario from the component test coverage: converts workflow menu schema into local menu items.

Source

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

export function DmMenuConvertsWorkflowMenuSchemaDemo() {
  return (<DmMenu
  // Converts workflow menu schema into local menu items
  items={[{ key: "main", label: "Main", title: "Main" }]}
>
  DuskMoon Dm Menu
</DmMenu>);
}

Preview

Renders product header, selected/open keys, and collapse action

test-backed

DmMenu scenario from the component test coverage: renders product header, selected/open keys, and collapse action.

Source

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

export function DmMenuRendersProductHeaderSelectedDemo() {
  return (<DmMenu
  // Renders product header, selected/open keys, and collapse action
  items={[{ key: "main", label: "Main", title: "Main" }]}
>
  DuskMoon Dm Menu
</DmMenu>);
}

Preview

Reports clicked schema item and supports collapsed/no-header mode

test-backed

DmMenu scenario from the component test coverage: reports clicked schema item and supports collapsed/no-header mode.

Source

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

export function DmMenuReportsClickedSchemaItemDemo() {
  return (<DmMenu
  // Reports clicked schema item and supports collapsed/no-header mode
  items={[{ key: "main", label: "Main", title: "Main" }]}
>
  DuskMoon Dm Menu
</DmMenu>);
}

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

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

API

The API reference below lists every parsed exported type or interface for DmMenu. Start with `menus`, `items`, `hideProductHeader`, `productIcon` for common usage.

Types: packages/components/src/components/dm-menu/DmMenu.types.tsScenarios: packages/components/src/components/dm-menu/DmMenu.test.tsx

DmMenuPropsinterface extends Omit< MenuProps, "items" | "children" | "onClick" | "ref" >

Prop	Type	Required	Description
`menus`	`DmMenuSchema[]`	No	menus configures DmMenu.
`items`	`MenuProps["items"]`	No	items configures DmMenu.
`hideProductHeader`	`boolean`	No	hideProductHeader configures DmMenu.
`productIcon`	`ReactNode`	No	productIcon configures DmMenu.
`productTitle`	`ReactNode`	No	productTitle configures DmMenu.
`locale`	`string`	No	locale configures DmMenu.
`onCollapsed`	`() => void`	No	onCollapsed configures DmMenu.
`onClick`	`(info: DmMenuClickInfo) => void`	No	onClick configures DmMenu.

DmMenuPageElementinterface

Prop	Type	Required	Description
`eleId`	`number`	No	eleId configures DmMenu.
`eleCode`	`string`	No	eleCode configures DmMenu.
`operationName`	`string`	No	operationName configures DmMenu.
`apiUrl`	`string`	No	apiUrl configures DmMenu.
`operationType`	`string`	No	operationType configures DmMenu.
`description`	`string`	No	description configures DmMenu.
`sensitiveOperationProtection`	`boolean`	No	sensitiveOperationProtection configures DmMenu.

DmMenuSchemainterface

Prop	Type	Required	Description
`menuId`	`number \| string`	No	menuId configures DmMenu.
`parentId`	`number \| string`	No	parentId configures DmMenu.
`productId`	`number \| string`	No	productId configures DmMenu.
`menuName`	`string`	Yes	menuName configures DmMenu.
`menuNameEn`	`string`	No	menuNameEn configures DmMenu.
`menuType`	`number \| string`	No	menuType configures DmMenu.
`subRouter`	`boolean`	No	subRouter configures DmMenu.
`menuUrl`	`string`	Yes	menuUrl configures DmMenu.
`menuNum`	`number`	No	menuNum configures DmMenu.
`enable`	`boolean`	No	enable configures DmMenu.
`children`	`DmMenuSchema[]`	No	children configures DmMenu.
`menuIdentifier`	`string`	No	menuIdentifier configures DmMenu.
`iconStr`	`ReactNode`	No	iconStr configures DmMenu.
`tipsEnabled`	`boolean`	No	tipsEnabled configures DmMenu.
`tips`	`ReactNode`	No	tips configures DmMenu.
`tipsEn`	`ReactNode`	No	tipsEn configures DmMenu.
`pageElements`	`DmMenuPageElement[]`	No	pageElements configures DmMenu.

DmMenuClickInfointerface extends MenuClickInfo

Prop	Type	Required	Description
`menu`	`DmMenuSchema`	No	menu configures DmMenu.

DmMenuKeytype

Key