Dropdown menu

Installation

npx shadcn@latest add @sudokw/components-dropdown-menu

import { DropdownMenu } from "@gpuixui/components";

Usage

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@gpuixui/components/dropdown-menu";

<DropdownMenu>
  <DropdownMenuTrigger variant="secondary" size="sm">
    Actions
  </DropdownMenuTrigger>
  <DropdownMenuContent label="File actions" align="end">
    <DropdownMenuItem onSelect={() => rename(file)}>Rename</DropdownMenuItem>
    <DropdownMenuItem disabled>Duplicate</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem tone="destructive" onSelect={() => remove(file)}>
      Delete
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>;

Composition

DropdownMenu
├── DropdownMenuTrigger
└── DropdownMenuContent
    ├── DropdownMenuItem
    ├── DropdownMenuCheckboxItem
    ├── DropdownMenuRadioGroup
    │   └── DropdownMenuRadioItem
    ├── DropdownMenuSeparator
    ├── DropdownMenuLabel
    ├── DropdownMenuGroup
    └── DropdownMenuSub
        ├── DropdownMenuSubTrigger
        └── DropdownMenuSubContent

API reference

DropdownMenu

Prop	Type	Default
`open`	`boolean`	uncontrolled
`defaultOpen`	`boolean`	`false`
`onOpenChange`	`(open: boolean) => void`	none
`children`	parts — a trigger, the content and its rows	—

DropdownMenuContent

Prop	Type	Default
`label`	`string` (required)	the menu's accessible name
`side`	`"top" \| "right" \| "bottom" \| "left"`	`"bottom"` — a stored name the union does not carry
`align`	`"start" \| "center" \| "end"`	`"start"` — a stored name the union does not carry
`sideOffset`	`number`	`4`
`collisionPadding`	`number`	`8`
`alignOffset`	`number`	`0` — added to the measured centre correction
`className`	`string`	none — joined after the surface recipe
`children`	parts — the rows, groups and separators	none

DropdownMenuItem

Prop	Type	Default
`onSelect`	`() => void`	none — runs, then closes
`disabled`	`boolean`	`false`
`tone`	`"default" \| "destructive"`	`"default"` — a stored name the union does not carry
`leading`	`ReactNode`	none — a slot before the label
`trailing`	`ReactNode`	none — a slot after it, for a shortcut
`textValue`	`string`	the plain text children
`closeOnSelect`	`boolean`	`true`
`className`	`string`	none — joined after the row recipe
`style`	`StyleDesc \| (state: MenuItemState) => StyleDesc`	none

DropdownMenuCheckboxItem

Prop	Type	Default
`checked`	`boolean` (required)	none
`onCheckedChange`	`(checked: boolean) => void` (required)	none
`closeOnSelect`	`boolean`	`false` — the row stays open
`onSelect` / `disabled` / `tone` / `leading` / `trailing` / `textValue`	the row surface — see `DropdownMenuItem`	none
`className`	`string`	none — joined after the row recipe
`style`	`StyleDesc \| (state: MenuCheckboxItemState) => StyleDesc`	none

DropdownMenuRadioGroup / DropdownMenuRadioItem

Prop	Type	Default
`value`	`string` (required, group)	none — the choice the group marks
`onValueChange`	`(value: string) => void` (required, group)	none — reports the chosen row's value
`label`	`string`	none — the choice's accessible name
`className`	`string`	none — compiled through `@gpuixui/tw`
`children`	parts — the group's `DropdownMenuRadioItem` rows	none (group)
`value`	`string` (required, row)	none — this row's value in the group
`closeOnSelect` / `disabled` / `tone` / `leading` / `trailing` / `textValue`	the row surface — see `DropdownMenuItem`	none (row)
`style`	`StyleDesc \| (state: MenuRadioItemState) => StyleDesc`	none — resolved against `{ checked, disabled, highlighted }`

Keyboard

Arrow DownCtrl+N: opens on the first row, and moves down a row once open
Arrow UpCtrl+P: opens on the last row, and moves up a row once open
HomeEnd: the first or last row
EnterSpace: opens the trigger, then runs the highlighted row
Escape: closes the topmost surface
Tab: closes the menu and lets focus move on

read from dropdown-menu.tsx, surface.tsx, modal.ts

Edit this page on GitHubapps/docs/content/docs/components/dropdown-menu.mdx

Installation

npx shadcn@latest add @sudokw/components-dropdown-menu

npx shadcn@latest add @sudokw/components-dropdown-menu

import { DropdownMenu } from "@gpuixui/components";

import { DropdownMenu } from "@gpuixui/components";

Usage

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@gpuixui/components/dropdown-menu";

<DropdownMenu>
  <DropdownMenuTrigger variant="secondary" size="sm">
    Actions
  </DropdownMenuTrigger>
  <DropdownMenuContent label="File actions" align="end">
    <DropdownMenuItem onSelect={() => rename(file)}>Rename</DropdownMenuItem>
    <DropdownMenuItem disabled>Duplicate</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem tone="destructive" onSelect={() => remove(file)}>
      Delete
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>;

Composition

DropdownMenu
├── DropdownMenuTrigger
└── DropdownMenuContent
    ├── DropdownMenuItem
    ├── DropdownMenuCheckboxItem
    ├── DropdownMenuRadioGroup
    │   └── DropdownMenuRadioItem
    ├── DropdownMenuSeparator
    ├── DropdownMenuLabel
    ├── DropdownMenuGroup
    └── DropdownMenuSub
        ├── DropdownMenuSubTrigger
        └── DropdownMenuSubContent

API reference

DropdownMenu

Prop	Type	Default
`open`	`boolean`	uncontrolled
`defaultOpen`	`boolean`	`false`
`onOpenChange`	`(open: boolean) => void`	none
`children`	parts — a trigger, the content and its rows	—

DropdownMenuContent

Prop	Type	Default
`label`	`string` (required)	the menu's accessible name
`side`	`"top" \| "right" \| "bottom" \| "left"`	`"bottom"` — a stored name the union does not carry
`align`	`"start" \| "center" \| "end"`	`"start"` — a stored name the union does not carry
`sideOffset`	`number`	`4`
`collisionPadding`	`number`	`8`
`alignOffset`	`number`	`0` — added to the measured centre correction
`className`	`string`	none — joined after the surface recipe
`children`	parts — the rows, groups and separators	none

DropdownMenuItem

Prop	Type	Default
`onSelect`	`() => void`	none — runs, then closes
`disabled`	`boolean`	`false`
`tone`	`"default" \| "destructive"`	`"default"` — a stored name the union does not carry
`leading`	`ReactNode`	none — a slot before the label
`trailing`	`ReactNode`	none — a slot after it, for a shortcut
`textValue`	`string`	the plain text children
`closeOnSelect`	`boolean`	`true`
`className`	`string`	none — joined after the row recipe
`style`	`StyleDesc \| (state: MenuItemState) => StyleDesc`	none

DropdownMenuCheckboxItem

Prop	Type	Default
`checked`	`boolean` (required)	none
`onCheckedChange`	`(checked: boolean) => void` (required)	none
`closeOnSelect`	`boolean`	`false` — the row stays open
`onSelect` / `disabled` / `tone` / `leading` / `trailing` / `textValue`	the row surface — see `DropdownMenuItem`	none
`className`	`string`	none — joined after the row recipe
`style`	`StyleDesc \| (state: MenuCheckboxItemState) => StyleDesc`	none

DropdownMenuRadioGroup / DropdownMenuRadioItem

Prop	Type	Default
`value`	`string` (required, group)	none — the choice the group marks
`onValueChange`	`(value: string) => void` (required, group)	none — reports the chosen row's value
`label`	`string`	none — the choice's accessible name
`className`	`string`	none — compiled through `@gpuixui/tw`
`children`	parts — the group's `DropdownMenuRadioItem` rows	none (group)
`value`	`string` (required, row)	none — this row's value in the group
`closeOnSelect` / `disabled` / `tone` / `leading` / `trailing` / `textValue`	the row surface — see `DropdownMenuItem`	none (row)
`style`	`StyleDesc \| (state: MenuRadioItemState) => StyleDesc`	none — resolved against `{ checked, disabled, highlighted }`

Keyboard

Arrow DownCtrl+N: opens on the first row, and moves down a row once open
Arrow UpCtrl+P: opens on the last row, and moves up a row once open
HomeEnd: the first or last row
EnterSpace: opens the trigger, then runs the highlighted row
Escape: closes the topmost surface
Tab: closes the menu and lets focus move on

read from dropdown-menu.tsx, surface.tsx, modal.ts

Edit this page on GitHubapps/docs/content/docs/components/dropdown-menu.mdx

Installation

Usage

Composition

API reference

DropdownMenu

DropdownMenuContent

DropdownMenuItem

DropdownMenuCheckboxItem

DropdownMenuRadioGroup / DropdownMenuRadioItem

On this page

Dropdown menu

Installation

Usage

Composition

API reference

DropdownMenu

DropdownMenuContent

DropdownMenuItem

DropdownMenuCheckboxItem

DropdownMenuRadioGroup / DropdownMenuRadioItem

On this page

Dropdown menu

InstallationCopy Anchor Link

Component source — packages/components/src/dropdown-menu.tsx

UsageCopy Anchor Link

CompositionCopy Anchor Link

API referenceCopy Anchor Link

DropdownMenuCopy Anchor Link

DropdownMenuContentCopy Anchor Link

DropdownMenuItemCopy Anchor Link

DropdownMenuCheckboxItemCopy Anchor Link

DropdownMenuRadioGroup / DropdownMenuRadioItemCopy Anchor Link

On this page

Dropdown menu

InstallationCopy Anchor Link

Component source — packages/components/src/dropdown-menu.tsx

UsageCopy Anchor Link

CompositionCopy Anchor Link

API referenceCopy Anchor Link

DropdownMenuCopy Anchor Link

DropdownMenuContentCopy Anchor Link

DropdownMenuItemCopy Anchor Link

DropdownMenuCheckboxItemCopy Anchor Link

DropdownMenuRadioGroup / DropdownMenuRadioItemCopy Anchor Link

On this page

Installation

Usage

Composition

API reference

DropdownMenu

DropdownMenuContent

DropdownMenuItem

DropdownMenuCheckboxItem

DropdownMenuRadioGroup / DropdownMenuRadioItem

Installation

Usage

Composition

API reference

DropdownMenu

DropdownMenuContent

DropdownMenuItem

DropdownMenuCheckboxItem

DropdownMenuRadioGroup / DropdownMenuRadioItem