k8ordo
  • UI
  • Form
  • State
  • Router
  • Static
  • Server
Switch to dark mode
  • Get Started
  • Theming
  • i18n
  • Components
  • Hooks
  • Helpers
  • AI
Open navigation
Buttons
  • Button
  • IconButton
Navigation
  • Anchor
  • Tabs
  • Breadcrumb
  • Pagination
Forms
  • TextField
  • Textarea
  • NumberField
  • Select
  • Checkbox
  • CheckboxCard
  • CheckboxGroup
  • Switch
  • PasswordInput
  • Radio
  • RadioCard
  • Autocomplete
  • Slider
  • FileField
  • FormControl
  • Form
Data Display
  • Accordion
  • Avatar
  • Badge
  • Card
  • Code
  • Table
  • Heading
Feedback
  • Alert
  • Skeleton
  • Spinner
  • Toast
  • Progress
Overlays
  • Dialog
  • Drawer
  • Modal
  • Popover
  • DropdownMenu
  • Tooltip
  • ListBox
Layout
  • Stack
  • Grid
  • Separator
  • ScrollLinked
Media
  • Icons
k8ordo

React libraries that use Baseline features without holding back.

Packages
  • @k8ordo/ui
  • @k8ordo/form
  • @k8ordo/state
  • @k8ordo/router
  • @k8ordo/static
  • @k8ordo/server
UI
  • Get Started
  • Theming
  • i18n
  • Components
  • Hooks
  • Helpers
  • AI Chat
  • Generative UI
  • AI Agents
  • Storybook
Resources
  • GitHub
  • npm

© 2026 k8o — MIT License

Typeset in Noto Sans JP & M PLUS 2

Components

Buttons
  • Button
  • IconButton
Navigation
  • Anchor
  • Tabs
  • Breadcrumb
  • Pagination
Forms
  • TextField
  • Textarea
  • NumberField
  • Select
  • Checkbox
  • CheckboxCard
  • CheckboxGroup
  • Switch
  • PasswordInput
  • Radio
  • RadioCard
  • Autocomplete
  • Slider
  • FileField
  • FormControl
  • Form
Data Display
  • Accordion
  • Avatar
  • Badge
  • Card
  • Code
  • Table
  • Heading
Feedback
  • Alert
  • Skeleton
  • Spinner
  • Toast
  • Progress
Overlays
  • Dialog
  • Drawer
  • Modal
  • Popover
  • DropdownMenu
  • Tooltip
  • ListBox
Layout
  • Stack
  • Grid
  • Separator
  • ScrollLinked
Media
  • Icons

DropdownMenu

A dropdown menu component.

View in Storybook

Import

Usage

With Icon Trigger

Sizes

Placement

Props

DropdownMenu.Root

children?
Type: ReactNode
Default: -
defaultOpen?
Type: boolean
Default: -
isOpen?
Type: boolean
Default: -
onChange?
Type: (isOpen: boolean) => void
Default: -
placement?
Type: Placement
Default: 'bottom-start'
PropTypeDefault
children?
ReactNode
-
defaultOpen?boolean-
isOpen?boolean-
onChange?(isOpen: boolean) => void-
placement?Placement'bottom-start'

DropdownMenu.Trigger

label
Type: string
Default: -
size?
Type: ComponentProps<typeof Button>['size']
Default: 'md'
variant?
Type: ComponentProps<typeof Button>['variant']
Default: 'solid'
PropTypeDefault
labelstring-
size?ComponentProps<typeof Button>['size']'md'
variant?ComponentProps<typeof Button>['variant']'solid'

DropdownMenu.IconTrigger

icon
Type: ReactNode
Default: -
label
Type: string
Default: -
PropTypeDefault
iconReactNode-
labelstring-

DropdownMenu.Content

children?
Type: ReactNode
Default: -
PropTypeDefault
children?ReactNode-

DropdownMenu.Item

label
Type: string
Default: -
onAction
Type: () => void
Default: -
PropTypeDefault
labelstring-
onAction() => void-

DropdownMenu.SubMenu

label
Type: string
Default: -
children?
Type: ReactNode
Default: -
PropTypeDefault
labelstring-
children?ReactNode-
import { DropdownMenu } from '@k8ordo/ui';
<DropdownMenu.Root>
  <DropdownMenu.Trigger label="Actions" />
  <DropdownMenu.Content>
    <DropdownMenu.Item label="Edit" onAction={() => {}} />
    <DropdownMenu.Item label="Duplicate" onAction={() => {}} />
    <DropdownMenu.Item label="Delete" onAction={() => {}} />
  </DropdownMenu.Content>
</DropdownMenu.Root>
import { DarkModeIcon } from '@k8ordo/ui';

<DropdownMenu.Root>
  <DropdownMenu.IconTrigger
    icon={<DarkModeIcon size="lg" />}
    label="Theme"
  />
  <DropdownMenu.Content>
    <DropdownMenu.Item label="Light" onAction={() => {}} />
    <DropdownMenu.Item label="Dark" onAction={() => {}} />
    <DropdownMenu.Item label="System" onAction={() => {}} />
  </DropdownMenu.Content>
</DropdownMenu.Root>
<DropdownMenu.Root>
  <DropdownMenu.Trigger label="Small" size="sm" />
  <DropdownMenu.Content>
    <DropdownMenu.Item label="Edit" onAction={() => {}} />
    <DropdownMenu.Item label="Delete" onAction={() => {}} />
  </DropdownMenu.Content>
</DropdownMenu.Root>

<DropdownMenu.Root>
  <DropdownMenu.Trigger label="Medium" size="md" />
  <DropdownMenu.Content>
    <DropdownMenu.Item label="Edit" onAction={() => {}} />
    <DropdownMenu.Item label="Delete" onAction={() => {}} />
  </DropdownMenu.Content>
</DropdownMenu.Root>

<DropdownMenu.Root>
  <DropdownMenu.Trigger label="Large" size="lg" />
  <DropdownMenu.Content>
    <DropdownMenu.Item label="Edit" onAction={() => {}} />
    <DropdownMenu.Item label="Delete" onAction={() => {}} />
  </DropdownMenu.Content>
</DropdownMenu.Root>
<DropdownMenu.Root placement="bottom-start">
  <DropdownMenu.Trigger label="Bottom Start" />
  <DropdownMenu.Content>
    <DropdownMenu.Item label="Edit" onAction={() => {}} />
    <DropdownMenu.Item label="Delete" onAction={() => {}} />
  </DropdownMenu.Content>
</DropdownMenu.Root>

<DropdownMenu.Root placement="bottom-end">
  <DropdownMenu.Trigger label="Bottom End" />
  <DropdownMenu.Content>
    <DropdownMenu.Item label="Edit" onAction={() => {}} />
    <DropdownMenu.Item label="Delete" onAction={() => {}} />
  </DropdownMenu.Content>
</DropdownMenu.Root>

<DropdownMenu.Root placement="top-start">
  <DropdownMenu.Trigger label="Top Start" />
  <DropdownMenu.Content>
    <DropdownMenu.Item label="Edit" onAction={() => {}} />
    <DropdownMenu.Item label="Delete" onAction={() => {}} />
  </DropdownMenu.Content>
</DropdownMenu.Root>