edbnedbn/ui
ComponentsMapsPDF
GitHub stars
Explorer
Get Started
Components

Dropdown Menu

Dropdown menu with items, separators, and keyboard navigation.

Componentsdocsbase-ui/menu

Installation

npx shadcn@latest add https://ui.edbn.me/api/analytics/registry/dropdown-menu.json

Manual

API Reference

Root

Groups all parts of the menu. Doesn't render its own HTML element.

defaultOpenboolean
=false

Initial open state

openboolean

Controlled open state

onOpenChange(open, eventDetails) => void

Called when the menu opens or closes

onOpenChangeComplete(open: boolean) => void

Called after close animations complete

highlightItemOnHoverboolean
=true

Highlight items when the pointer moves over them

actionsRefRefObject<Menu.Root.Actions | null>

Imperative close and unmount actions

closeParentOnEscboolean
=false

Close the parent menu when Escape is pressed in a submenu

defaultTriggerIdstring | null

Initial trigger id for an initially open menu

handleMenu.Handle<Payload>

Handle for detached triggers

loopFocusboolean
=true

Loop keyboard focus through menu items

modalboolean
=true

Whether outside interaction is blocked while open

triggerIdstring | null

Controlled trigger id for menus with multiple triggers

disabledboolean
=false

Ignore user interaction

orientation'horizontal' | 'vertical'
='vertical'

Roving-focus orientation

childrenReactNode | PayloadChildRenderFunction<Payload>

Menu content or render function receiving trigger payload

Trigger

A button that opens the menu. Renders a button element.

handleMenu.Handle<Payload>

Handle that connects this trigger to a detached root

payloadPayload

Payload passed to the root render function when opened

disabledboolean
=false

Ignore user interaction

openOnHoverboolean

Also open the menu when the trigger is hovered

delaynumber
=100

Hover-open delay in milliseconds

closeDelaynumber
=0

Hover-close delay in milliseconds

nativeButtonboolean
=true

Whether a custom render target is a native button

classNamestring | function

CSS class name or state-based class function

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

Trigger data attributes
AttributeDescription
data-popup-openPresent when the corresponding menu is open
data-pressedPresent while the trigger is pressed

Portal

Moves the popup to a different part of the DOM. Renders a div element.

containerHTMLElement | ShadowRoot | RefObject | null

Portal container

keepMountedboolean
=false

Keep the portal mounted while hidden

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

Backdrop

An overlay displayed beneath the menu popup. Renders a div element.

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

Backdrop data attributes
AttributeDescription
data-openPresent when the menu is open
data-closedPresent when the menu is closed
data-starting-stylePresent when animating in
data-ending-stylePresent when animating out

Positioner

Positions the menu popup against the trigger. Renders a div element.

side'top' | 'bottom' | 'left' | 'right' | 'inline-start' | 'inline-end'
='bottom'

Preferred side relative to the anchor

sideOffsetnumber | OffsetFunction
=4

Distance from the anchor

align'start' | 'center' | 'end'
='center'

Alignment relative to the side

alignOffsetnumber | OffsetFunction
=0

Offset along the alignment axis

arrowPaddingnumber
=5

Minimum distance between arrow and popup edge

anchorElement | VirtualElement | RefObject | function | null

Custom anchor element

collisionAvoidanceCollisionAvoidance

How to flip or shift when the popup would overflow

collisionBoundaryBoundary
='clipping-ancestors'

Boundary used for collision detection

collisionPaddingPadding
=5

Space to preserve from the collision boundary

disableAnchorTrackingboolean
=false

Stop tracking anchor layout shifts

stickyboolean
=false

Keep popup visible after the anchor scrolls out of view

positionMethod'absolute' | 'fixed'
='absolute'

CSS positioning strategy

classNamestring | function

CSS class name or state-based class function

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

Positioner data attributes
AttributeDescription
data-openPresent when popup is open
data-closedPresent when popup is closed
data-anchor-hiddenPresent when anchor is hidden
data-alignAlignment relative to side
data-sideSide popup is positioned on
Positioner CSS variables
VariableDescription
--anchor-heightAnchor height
--anchor-widthAnchor width
--available-heightAvailable height
--available-widthAvailable width
--transform-originOrigin used for anchored animations

Popup

A container for the menu items. Renders a div element.

finalFocusboolean | RefObject | function

Element or behavior to focus when the menu closes

childrenReactNode

Menu content

classNamestring | function

CSS class name or state-based class function

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

Popup data attributes
AttributeDescription
data-openPresent when menu is open
data-closedPresent when menu is closed
data-alignAlignment relative to side
data-instantPresent when animations should be skipped
data-sideSide popup is positioned on
data-starting-stylePresent when animating in
data-ending-stylePresent when animating out
Popup CSS variables
VariableDescription
--popup-heightCurrent popup height
--popup-widthCurrent popup width

Arrow

Displays an arrow element positioned against the menu anchor. Renders a div element.

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

Arrow data attributes
AttributeDescription
data-openPresent when popup is open
data-closedPresent when popup is closed
data-uncenteredPresent when arrow cannot be centered
data-alignAlignment relative to side
data-sideSide popup is positioned on

Viewport

A viewport for displaying animated content transitions between trigger payloads. Renders a div element.

childrenReactNode

Content to render inside the transition container

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

Viewport data attributes
AttributeDescription
data-activation-directionDirection from previous trigger to new trigger
data-currentApplied to the current content container
data-instantPresent when animations should be skipped
data-previousApplied to the exiting content container
data-transitioningPresent while content is transitioning
Viewport CSS variables
VariableDescription
--popup-heightParent popup height for transition containers
--popup-widthParent popup width for transition containers

Item

An individual interactive item in the menu. Renders a div element.

labelstring

Text label for keyboard typeahead

onClickfunction

Click handler

closeOnClickboolean
=true

Close menu when clicked

nativeButtonboolean
=false

Whether a custom render target is a native button

disabledboolean
=false

Ignore user interaction

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

Item data attributes
AttributeDescription
data-highlightedPresent when item is highlighted
data-disabledPresent when item is disabled

LinkItem

A link item used to navigate to another page or section. Renders an anchor element.

labelstring

Text label for keyboard typeahead

closeOnClickboolean
=false

Close menu when clicked

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

LinkItem data attributes
AttributeDescription
data-highlightedPresent when link is highlighted

Separator

A separator element accessible to screen readers. Renders a div element.

orientation'horizontal' | 'vertical'
='horizontal'

Separator orientation

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

Group

Groups related menu items with the corresponding label. Renders a div element.

childrenReactNode

Group contents

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

GroupLabel

An accessible label associated with its parent group. Renders a div element.

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

SubmenuRoot

Groups all parts of a submenu. Doesn't render its own HTML element.

defaultOpenboolean
=false

Initial open state

openboolean

Controlled open state

onOpenChange(open, eventDetails) => void

Called when the submenu opens or closes

highlightItemOnHoverboolean
=true

Highlight items when hovered

actionsRefRefObject<Menu.Root.Actions | null>

Imperative close and unmount actions

closeParentOnEscboolean
=false

Close the parent menu on Escape

defaultTriggerIdstring | null

Initial trigger id

handleMenu.Handle<unknown>

Handle for associated triggers

loopFocusboolean
=true

Loop keyboard focus

onOpenChangeComplete(open: boolean) => void

Called after close animations complete

triggerIdstring | null

Controlled trigger id

disabledboolean
=false

Ignore user interaction

orientation'horizontal' | 'vertical'
='vertical'

Roving-focus orientation

childrenReactNode | PayloadChildRenderFunction<unknown>

Submenu content

SubmenuTrigger

A menu item that opens a submenu. Renders a div element.

labelstring

Text label for keyboard typeahead

onClickfunction

Click handler

nativeButtonboolean
=false

Whether a custom render target is a native button

disabledboolean
=false

Ignore user interaction

openOnHoverboolean

Also open when hovered

delaynumber
=100

Hover-open delay in milliseconds

closeDelaynumber
=0

Hover-close delay in milliseconds

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

SubmenuTrigger data attributes
AttributeDescription
data-popup-openPresent when submenu is open
data-highlightedPresent when highlighted
data-disabledPresent when disabled

RadioGroup

Groups related radio items. Renders a div element.

defaultValueany

Initial selected value

valueany

Controlled selected value

onValueChange(value, eventDetails) => void

Called when selected value changes

disabledboolean
=false

Ignore user interaction

childrenReactNode

Radio item contents

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

RadioItem

A menu item that works like a radio button in a group. Renders a div element.

valueany
=required

Value selected in the radio group

labelstring

Text label for keyboard typeahead

onClickfunction

Click handler

closeOnClickboolean
=false

Close menu when clicked

nativeButtonboolean
=false

Whether a custom render target is a native button

disabledboolean
=false

Ignore user interaction

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

RadioItem data attributes
AttributeDescription
data-checkedPresent when selected
data-uncheckedPresent when not selected
data-highlightedPresent when highlighted
data-disabledPresent when disabled

RadioItemIndicator

Indicates whether the radio item is selected. Renders a span element.

keepMountedboolean
=false

Keep the indicator mounted when inactive

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

RadioItemIndicator data attributes
AttributeDescription
data-checkedPresent when selected
data-uncheckedPresent when not selected
data-disabledPresent when disabled
data-starting-stylePresent when animating in
data-ending-stylePresent when animating out

CheckboxItem

A menu item that toggles a setting on or off. Renders a div element.

labelstring

Text label for keyboard typeahead

defaultCheckedboolean
=false

Initial checked state

checkedboolean

Controlled checked state

onCheckedChange(checked, eventDetails) => void

Called when checked state changes

onClickfunction

Click handler

closeOnClickboolean
=false

Close menu when clicked

nativeButtonboolean
=false

Whether a custom render target is a native button

disabledboolean
=false

Ignore user interaction

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

CheckboxItem data attributes
AttributeDescription
data-checkedPresent when checked
data-uncheckedPresent when not checked
data-highlightedPresent when highlighted
data-disabledPresent when disabled

CheckboxItemIndicator

Indicates whether the checkbox item is checked. Renders a span element.

keepMountedboolean
=false

Keep the indicator mounted when unchecked

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

CheckboxItemIndicator data attributes
AttributeDescription
data-checkedPresent when checked
data-uncheckedPresent when not checked
data-disabledPresent when disabled
data-starting-stylePresent when animating in
data-ending-stylePresent when animating out

Shortcut

edbn/ui helper exported as MenuShortcut for trailing visual keyboard hints. This is not a Base UI primitive.

classNamestring

CSS class name

...spanPropsHTMLAttributes<HTMLSpanElement>

Native span attributes

Shortcut data attributes
AttributeDescription
data-slot="menu-shortcut"Stable slot selector for the shortcut helper

Handle

Base UI handle utility for detached triggers and imperative menu control.

isOpenboolean
=readonly

Whether the associated menu is open

open(triggerId: string) => void
=method

Open and associate the menu with a trigger id

close() => void
=method

Close the associated menu

createMenuHandle

edbn/ui export that maps to Base UI Menu.createHandle for creating typed detached-trigger handles.

returnMenu.Handle<Payload>

A new imperative menu handle