Actionsduskmoonimplemented6 demos

Dropdown

Dropdown attaches contextual action menus to a compact trigger.

Import@duskmoon-dev/components/dropdown

8API sections

24documented props

4behavior scenarios

Key API

menuoverlaydropdownRendertriggerplacementopen

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

Dropdown is most often configured through `menu`, `overlay`, `dropdownRender`, `trigger`.

Covered behavior

Renders menu items from menu prop

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

Source

import "@duskmoon-dev/components/styles.css";
import { Dropdown } from "@duskmoon-dev/components/dropdown";

export function Example() {
  return (<Dropdown
  defaultOpen
  trigger={["click"]}
  menu={{
    items: [
      { key: "edit", label: "Edit" },
      { key: "divider", type: "divider" },
      { key: "delete", label: "Delete", danger: true }
    ]
  }}
>
  Actions
</Dropdown>);
}

Preview

Renders menu items from menu prop

test-backed

Dropdown scenario from the component test coverage: renders menu items from menu prop.

Source

import "@duskmoon-dev/components/styles.css";
import { Dropdown } from "@duskmoon-dev/components/dropdown";

export function DropdownRendersMenuItemsFromDemo() {
  return (<Dropdown
  defaultOpen
  trigger={["click"]}
  menu={{
    items: [
      { key: "edit", label: "Edit" },
      { key: "divider", type: "divider" },
      { key: "delete", label: "Delete", danger: true }
    ]
  }}
>
  Actions
</Dropdown>);
}

Preview

Toggles open state on click trigger

test-backed

Dropdown scenario from the component test coverage: toggles open state on click trigger.

Source

import "@duskmoon-dev/components/styles.css";
import { Dropdown } from "@duskmoon-dev/components/dropdown";

export function DropdownTogglesOpenStateOnDemo() {
  return (<Dropdown
  defaultOpen
  trigger={["click"]}
  menu={{
    items: [
      { key: "edit", label: "Edit" },
      { key: "divider", type: "divider" },
      { key: "delete", label: "Delete", danger: true }
    ]
  }}
>
  Actions
</Dropdown>);
}

Preview

Calls menu onClick and closes uncontrolled popup

test-backed

Dropdown scenario from the component test coverage: calls menu onclick and closes uncontrolled popup.

Source

import "@duskmoon-dev/components/styles.css";
import { Dropdown } from "@duskmoon-dev/components/dropdown";

export function DropdownCallsMenuOnClickAndDemo() {
  return (<Dropdown
  defaultOpen
  trigger={["click"]}
  menu={{
    items: [
      { key: "edit", label: "Edit" },
      { key: "divider", type: "divider" },
      { key: "delete", label: "Delete", danger: true }
    ]
  }}
>
  Actions
</Dropdown>);
}

Preview

Exposes Dropdown.Button

test-backed

Dropdown scenario from the component test coverage: exposes dropdown.button.

Source

import "@duskmoon-dev/components/styles.css";
import { Dropdown } from "@duskmoon-dev/components/dropdown";

export function DropdownExposesDropdownButtonDemo() {
  return (<Dropdown
  defaultOpen
  trigger={["click"]}
  menu={{
    items: [
      { key: "edit", label: "Edit" },
      { key: "divider", type: "divider" },
      { key: "delete", label: "Delete", danger: true }
    ]
  }}
>
  Actions
</Dropdown>);
}

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">
  <Dropdown
  defaultOpen
  trigger={["click"]}
  menu={{
    items: [
      { key: "edit", label: "Edit" },
      { key: "divider", type: "divider" },
      { key: "delete", label: "Delete", danger: true }
    ]
  }}
>
  Actions
</Dropdown>
</div>

<div data-theme="moonlight">
  <Dropdown
  defaultOpen
  trigger={["click"]}
  menu={{
    items: [
      { key: "edit", label: "Edit" },
      { key: "divider", type: "divider" },
      { key: "delete", label: "Delete", danger: true }
    ]
  }}
>
  Actions
</Dropdown>
</div>

API

The API reference below lists every parsed exported type or interface for Dropdown. Start with `menu`, `overlay`, `dropdownRender`, `trigger` for common usage.

Types: packages/components/src/components/dropdown/Dropdown.types.tsScenarios: packages/components/src/components/dropdown/Dropdown.test.tsx

DropdownPropsinterface extends Omit<ComponentProps<"span">, "menu">

Prop	Type	Required	Description
`menu`	`DropdownMenu`	No	menu configures Dropdown.
`overlay`	`ReactNode`	No	overlay configures Dropdown.
`dropdownRender`	`(menus: ReactNode) => ReactNode`	No	dropdownRender configures Dropdown.
`trigger`	`DropdownTrigger[]`	No	trigger configures Dropdown.
`placement`	`DropdownPlacement`	No	placement configures Dropdown.
`open`	`boolean`	No	open configures Dropdown.
`defaultOpen`	`boolean`	No	defaultOpen configures Dropdown.
`arrow`	`boolean`	No	arrow configures Dropdown.
`disabled`	`boolean`	No	disabled configures Dropdown.
`destroyPopupOnHide`	`boolean`	No	destroyPopupOnHide configures Dropdown.
`onOpenChange`	`(open: boolean) => void`	No	onOpenChange configures Dropdown.
`children`	`ReactNode`	Yes	children configures Dropdown.

DropdownMenuIteminterface

Prop	Type	Required	Description
`key`	`string \| number`	Yes	key configures Dropdown.
`label`	`ReactNode`	No	label configures Dropdown.
`icon`	`ReactNode`	No	icon configures Dropdown.
`disabled`	`boolean`	No	disabled configures Dropdown.
`danger`	`boolean`	No	danger configures Dropdown.
`type`	`"item" \| "divider"`	No	type configures Dropdown.
`className`	`string`	No	className configures Dropdown.

DropdownMenuInfointerface

Prop	Type	Required	Description
`key`	`string`	Yes	key configures Dropdown.
`item`	`DropdownMenuItem`	Yes	item configures Dropdown.
`domEvent`	`MouseEvent<HTMLButtonElement>`	Yes	domEvent configures Dropdown.

DropdownMenuinterface

Prop	Type	Required	Description
`items`	`DropdownMenuItem[]`	No	items configures Dropdown.
`onClick`	`(info: DropdownMenuInfo) => void`	No	onClick configures Dropdown.

DropdownPlacementtype

| "top" | "bottom" | "left" | "right" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight"

DropdownTriggertype

"click" | "hover" | "contextMenu"

DropdownButtonPropstype

Omit< DropdownProps, "children" | "onClick" | keyof ButtonProps > & Omit<ButtonProps, "children" | "onClick"> & { buttonsRender?: (buttons: ReactNode[]) => ReactNode[]

DropdownComponenttype

ForwardRefExoticComponent< DropdownProps & RefAttributes<HTMLSpanElement> > & { Button: ForwardRefExoticComponent< DropdownButtonProps & RefAttributes<HTMLSpanElement> >