edbnedbn/ui
ComponentsMapsPDF
GitHub stars
Explorer
Get Started
Components

Context Menu

Right-click context menu with items, checkboxes, radio groups, and submenus.

Componentsdocsbase-ui/context-menu

Installation

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

Manual

API Reference

Root

Creates a context menu activated by right click or long press. 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<ContextMenu.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<unknown>

Handle for associated menu triggers

loopFocusboolean
=true

Loop keyboard focus through menu items

triggerIdstring | null

Controlled trigger id for an open menu

disabledboolean
=false

Ignore user interaction

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

Roving-focus orientation

childrenReactNode | PayloadChildRenderFunction<unknown>

Menu content; inherited Base UI render functions receive an unknown payload

Trigger

An area that opens the menu on right click or long press. Renders a div element.

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 context 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 context 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 menu is open
data-closedPresent when menu is closed
data-starting-stylePresent when animating in
data-ending-stylePresent when animating out

Positioner

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

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

Preferred side relative to the anchor

sideOffsetnumber | OffsetFunction
=0

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 the 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 context 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

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

insetboolean
=false

EDBN wrapper prop that aligns text with indicator rows

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

insetboolean
=false

EDBN wrapper prop that aligns text with indicator rows

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.

insetboolean
=false

EDBN wrapper prop that aligns text with indicator rows

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; inherited Base UI render functions receive an unknown payload

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

insetboolean
=false

EDBN wrapper prop that aligns text with indicator rows

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