Context Menu · base-ui-svelte

API Reference

Props mirror Base UI React where applicable, adapted for Svelte 5. Native HTML attributes for the rendered element are also accepted unless noted.

ContextMenu.Root

A component that creates a context menu activated by right clicking or long pressing. Doesn't render its own HTML element.

Props

open boolean —

Name: open
Description: Whether the component is open (controlled).
Type: boolean | undefined

defaultOpen boolean false

Name: defaultOpen
Description: Whether the component is initially open (uncontrolled).
Type: boolean
Default: false

onOpenChange function —

Name: onOpenChange
Description: Event handler called when the open state changes.
Type: ((open: boolean, eventDetails: { reason: OpenChangeReason }) => void) | undefined

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet<[{ open: boolean }]>

Data attributes

Attribute	Description
`data-closed`	Present when the part is closed.
`data-open`	Present when the part is open.

ContextMenu.Arrow

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

Props

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Data attributes

Attribute	Description
`data-closed`	Present when the menu popup is closed.
`data-open`	Present when the menu popup is open.

ContextMenu.Backdrop

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

Props

render string —

Name: render
Description: HTML element tag to render instead of the default host element.
Type: string

dismissible boolean —

Name: dismissible
Description: —
Type: boolean

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Data attributes

Attribute	Description
`data-closed`	Present when the menu is closed.
`data-open`	Present when the menu is open.

ContextMenu.CheckboxItem

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

Props

checked boolean —

Name: checked
Description: Controlled checked state.
Type: boolean | undefined

defaultChecked boolean false

Name: defaultChecked
Description: Uncontrolled initial checked state.
Type: boolean
Default: false

onCheckedChange function —

Name: onCheckedChange
Description: Event handler called when the checked state changes.
Type: ((checked: boolean, event: Event) => void) | undefined

disabled boolean false

Name: disabled
Description: Whether the control ignores user interaction.
Type: boolean
Default: false

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet<[{ checked: boolean }]>

Data attributes

Attribute	Description
`data-checked`	Present when the menu checkbox item is checked.
`data-disabled`	Present when the menu checkbox item is disabled.
`data-highlighted`	Present when the menu checkbox item is highlighted.
`data-unchecked`	Present when the menu checkbox item is not checked.

ContextMenu.CheckboxItemIndicator

Indicates whether the checkbox item is ticked. Renders a <span> element.

Props

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Data attributes

Attribute	Description
`data-checked`	Present when the menu checkbox item is checked.
`data-disabled`	Present when the menu checkbox item is disabled.
`data-unchecked`	Present when the menu checkbox item is not checked.

ContextMenu.Group

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

Props

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

ContextMenu.GroupLabel

An accessible label that is automatically associated with its parent group. Renders a <div> element.

Props

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

ContextMenu.Item

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

Props

disabled boolean false

Name: disabled
Description: Whether the control ignores user interaction.
Type: boolean
Default: false

onClick function —

Name: onClick
Description: The click handler for the menu item.
Type: ((event: MouseEvent) => void) | undefined

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Data attributes

Attribute	Description
`data-disabled`	Present when the menu item is disabled.
`data-highlighted`	Present when the menu item is highlighted.

ContextMenu.LinkItem

A link in the menu that can be used to navigate to a different page or section. Renders an <a> element.

Props

disabled boolean false

Name: disabled
Description: Whether the control ignores user interaction.
Type: boolean
Default: false

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Data attributes

Attribute	Description
`data-disabled`	Present when the part is disabled.
`data-highlighted`	Present when the link is highlighted.

ContextMenu.Popup

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

Props

render string —

Name: render
Description: HTML element tag to render instead of the default host element.
Type: string

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Data attributes

Attribute	Description
`data-closed`	Present when the menu is closed.
`data-ending-style`	Present when the menu is animating out.
`data-open`	Present when the menu is open.
`data-starting-style`	Present when the menu begins animating in.

ContextMenu.Portal

A portal element that moves the popup to a different part of the DOM. By default, the portal element is appended to <body>. Renders a <div> element.

Props

container HTMLElement | string | null —

Name: container
Description: A parent element to render the portal element into.
Type: HTMLElement | string | null

keepMounted boolean false

Name: keepMounted
Description: Whether to keep the portal mounted in the DOM while the popup is hidden.
Type: boolean
Default: false

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

ContextMenu.Positioner

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

Props

side => v 'bottom'

Name: side
Description: Which side of the anchor element to align the popup against. May automatically change to avoid collisions.
Type: => v
Default: 'bottom'

align en: ( 'center'

Name: align
Description: How to align the popup relative to the specified side.
Type: en: (
Default: 'center'

sideOffset expo 0

Name: sideOffset
Description: Distance between the anchor and the popup in pixels. Also accepts a function that returns the distance to read the dimensions of the anchor and positioner elements, along with its side and alignment. The function takes a data object parameter with the following properties: data.anchor: the dimensions of the anchor element with properties width and height.data.positioner: the dimensions of the positioner element with properties width and height.data.side: which side of the anchor element the positioner is aligned against.data.align: how the positioner is aligned relative to the specified side.
Type: expo
Default: 0

alignOffset nuCont 0

Name: alignOffset
Description: Additional offset along the alignment axis in pixels. Also accepts a function that returns the offset to read the dimensions of the anchor and positioner elements, along with its side and alignment. The function takes a data object parameter with the following properties: data.anchor: the dimensions of the anchor element with properties width and height.data.positioner: the dimensions of the positioner element with properties width and height.data.side: which side of the anchor element the positioner is aligned against.data.align: how the positioner is aligned relative to the specified side.
Type: nuCont
Default: 0

collisionPadding boolean 5

Name: collisionPadding
Description: Additional space to maintain from the edge of the collision boundary.
Type: : boolean; setOpen(open: boolean, rea
Default: 5

collisionBoundary void; readonl 'clipping-ancestors'

Name: collisionBoundary
Description: An element or a rectangle that delimits the area that the popup is confined to.
Type: void; readonl
Default: 'clipping-ancestors'

collisionAvoidance nly triggerId: str —

Name: collisionAvoidance
Description: Determines how to handle collisions when positioning the popup. side controls overflow on the preferred placement axis (top/bottom or left/right): 'flip': keep the requested side when it fits; otherwise try the opposite side
(top and bottom, or left and right).
'shift': never change side; keep the requested side and move the popup within the clipping boundary so it stays visible.
'none': do not correct side-axis overflow. align controls overflow on the alignment axis (start/center/end): 'flip': keep side, but swap start and end when the requested alignment overflows.
'shift': keep side and requested alignment, then nudge the popup along the alignment axis to fit.
'none': do not correct alignment-axis overflow. fallbackAxisSide controls fallback behavior on the perpendicular axis when the preferred axis cannot fit: 'start': allow perpendicular fallback and try the logical start side first
(top before bottom, or left before right in LTR).
'end': allow perpendicular fallback and try the logical end side first
(bottom before top, or right before left in LTR).
'none': do not fallback to the perpendicular axis. When side is 'shift', explicitly setting align only supports 'shift' or 'none'.
If align is omitted, it defaults to 'flip'.
Type: nly triggerId: str

arrowPadding upId: 5

Name: arrowPadding
Description: Minimum distance to maintain between the arrow and the edges of the popup. Use it to prevent the arrow element from hanging out of the rounded corners of a popup.
Type: upId:
Default: 5

sticky donly r false

Name: sticky
Description: Whether to maintain the popup in the viewport after the anchor element was scrolled out of view.
Type: donly r
Default: false

positionMethod donly anchorPoint: 'absolute'

Name: positionMethod
Description: Maps to Floating UI strategy (absolute | fixed).
Type: donly anchorPoint:
Default: 'absolute'

strategy only highlightedId —

Name: strategy
Description: —
Type: only highlightedId

anchor g, element: HTMLElement, … —

Name: anchor
Description: Override the positioning anchor (element or virtual element).
Type: g, element: HTMLElement, disabl

disableAnchorTracking donly i false

Name: disableAnchorTracking
Description: When true, skip continuous layout tracking of the anchor (position once; no resize/scroll auto-updates beyond the initial compute).
Type: donly i
Default: false

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Data attributes

Attribute	Description
`data-closed`	Present when the menu popup is closed.
`data-open`	Present when the menu popup is open.

ContextMenu.RadioGroup

Groups related radio items. Renders a <div> element.

Props

value string —

Name: value
Description: Controlled value.
Type: string | undefined

defaultValue string —

Name: defaultValue
Description: Uncontrolled initial value.
Type: string

onValueChange function —

Name: onValueChange
Description: Event handler called when the value changes.
Type: ((value: string, event: Event) => void) | undefined

disabled boolean false

Name: disabled
Description: Whether the control ignores user interaction.
Type: boolean
Default: false

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet<[{ value: string }]>

Data attributes

Attribute	Description
`data-disabled`	Present when the part is disabled.

ContextMenu.RadioItem

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

Props

value string —

Name: value
Description: Controlled value.
Type: string

disabled boolean false

Name: disabled
Description: Whether the control ignores user interaction.
Type: boolean
Default: false

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet<[{ checked: boolean }]>

Data attributes

Attribute	Description
`data-checked`	Present when the menu radio item is selected.
`data-disabled`	Present when the menu radio item is disabled.
`data-highlighted`	Present when the menu radio item is highlighted.
`data-unchecked`	Present when the menu radio item is not selected.

ContextMenu.RadioItemIndicator

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

Props

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Data attributes

Attribute	Description
`data-checked`	Present when the menu radio item is selected.
`data-disabled`	Present when the menu radio item is disabled.
`data-unchecked`	Present when the menu radio item is not selected.

ContextMenu.Separator

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

No component-specific props — HTML attributes and children only.

ContextMenu.SubmenuRoot

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

Props

open boolean —

Name: open
Description: Whether the component is open (controlled).
Type: boolean | undefined

defaultOpen boolean false

Name: defaultOpen
Description: Whether the component is initially open (uncontrolled).
Type: boolean
Default: false

onOpenChange function —

Name: onOpenChange
Description: Event handler called when the open state changes.
Type: ((open: boolean, eventDetails: { reason: OpenChangeReason }) => void) | undefined

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet<[{ open: boolean }]>

Data attributes

Attribute	Description
`data-closed`	Present when the part is closed.
`data-open`	Present when the part is open.

ContextMenu.SubmenuTrigger

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

Props

disabled boolean false

Name: disabled
Description: Whether the control ignores user interaction.
Type: boolean
Default: false

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Data attributes

Attribute	Description
`data-closed`	Present when the part is closed.
`data-disabled`	Present when the submenu trigger is disabled.
`data-highlighted`	Present when the submenu trigger is highlighted.
`data-open`	Present when the part is open.

ContextMenu.Trigger

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

Props

render string —

Name: render
Description: HTML element tag to render instead of the default host element.
Type: string

disabled boolean false

Name: disabled
Description: Whether the control ignores user interaction.
Type: boolean
Default: false

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Data attributes

Attribute	Description
`data-closed`	Present when the part is closed.
`data-disabled`	Present when the part is disabled.
`data-open`	Present when the part is open.

ContextMenu.Viewport

Extends div HTML attributes.

Props

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet