prosekit/web/menu

<prosekit-menu-root>
  <prosekit-menu-trigger>...</prosekit-menu-trigger>
  <prosekit-menu-positioner>
    <prosekit-menu-popup>
       <prosekit-menu-item>...</prosekit-menu-item>
       <prosekit-menu-submenu-root>
         <prosekit-menu-submenu-trigger>...</prosekit-menu-submenu-trigger>
         <prosekit-menu-positioner>
           <prosekit-menu-popup>
             <prosekit-menu-item>...</prosekit-menu-item>
           </prosekit-menu-popup>
         </prosekit-menu-positioner>
       </prosekit-menu-submenu-root>
    </prosekit-menu-popup>
  </prosekit-menu-positioner>
</prosekit-menu-root>

<prosekit-menu-item> custom element.

Properties: MenuItemProps

Events: MenuItemEvents

Data attributes:

new MenuItemElement(): MenuItemElement

value: string

The unique value for this menu item.

Default

Section titled “Default”

""

disabled: boolean

Whether this menu item is disabled.

Default

Section titled “Default”

false

closeOnSelect: boolean

Whether to close the menu when the item is pressed.

Default

Section titled “Default”

true

addController(controller: ReactiveController): void

removeController(controller: ReactiveController): void

connectedCallback(): void

disconnectedCallback(): void

<prosekit-menu-popup> custom element.

Properties: MenuPopupProps

Data attributes:

new MenuPopupElement(): MenuPopupElement

eventTarget: EventTarget | HTMLElement | null

By default, the MenuPopup element will listen for keydown events. You can pass a different element to listen for keydown events.

Default

Section titled “Default”

null

addController(controller: ReactiveController): void

removeController(controller: ReactiveController): void

connectedCallback(): void

disconnectedCallback(): void

<prosekit-menu-positioner> custom element.

Properties: MenuPositionerProps

Data attributes:

CSS variables:

new MenuPositionerElement(): MenuPositionerElement

placement: Placement

The initial placement of the floating element

Default

Section titled “Default”

"bottom-start"

strategy: "fixed" | "absolute"

The strategy to use for positioning

Default

Section titled “Default”

"absolute"

autoUpdate: boolean | AutoUpdateOptions

Options to activate auto-update listeners

See

Section titled “See”

https://floating-ui.com/docs/autoUpdate

Default

Section titled “Default”

true

hoist: boolean

Whether to use the browser Popover API to place the floating element on top of other page content.

Default

Section titled “Default”

true

offset: OffsetOptions

The distance between the reference and floating element.

Default

Section titled “Default”

6

flip: boolean | Placement[]

Whether to flip the placement in order to keep it in view when the preferred placement(s) will overflow the clipping boundary. You can also provide an array of placements to try sequentially if the preferred placement does not fit.

Default

Section titled “Default”

true

shift: boolean

Whether the floating element should shift to keep it in view.

Default

Section titled “Default”

true

overlap: boolean

Whether the floating element can overlap the reference element to keep it in view.

Default

Section titled “Default”

false

fitViewport: boolean

Whether to constrain the floating element's width and height to not exceed the viewport.

Default

Section titled “Default”

false

sameWidth: boolean

Whether to constrain the floating element's width so that it matches the reference element.

Default

Section titled “Default”

false

sameHeight: boolean

Whether to constrain the floating element's height so that it matches the reference element.

Default

Section titled “Default”

false

inline: boolean

Whether to improve positioning for inline reference elements that span over multiple lines.

Default

Section titled “Default”

false

hide: boolean

Whether to hide the floating element when the reference element or the floating element is fully clipped.

Default

Section titled “Default”

false

boundary: Boundary

Describes the clipping element(s) or area that overflow will be checked relative to. Please see https://floating-ui.com/docs/detectoverflow#boundary for more information.

Default

Section titled “Default”

'clippingAncestors'

rootBoundary: RootBoundary

Describes the root boundary that the element will be checked for overflow relative to. Please see https://floating-ui.com/docs/detectoverflow#rootboundary for more information.

Default

Section titled “Default”

'viewport'

overflowPadding: number

Describes the virtual padding around the boundary to check for overflow. Please see https://floating-ui.com/docs/detectoverflow#padding for more information.

Default

Section titled “Default”

4

elementContext: ElementContext

The element that will be used to check for overflow. Please see https://floating-ui.com/docs/detectoverflow#elementcontext for more information.

Default

Section titled “Default”

'floating'

altBoundary: boolean

Whether to check the alternate elementContext's boundary. Please see https://floating-ui.com/docs/detectoverflow#altboundary for more information.

Default

Section titled “Default”

false

addController(controller: ReactiveController): void

removeController(controller: ReactiveController): void

connectedCallback(): void

disconnectedCallback(): void

<prosekit-menu-root> custom element.

Properties: MenuRootProps

Events: MenuRootEvents

Data attributes:

new MenuRootElement(): MenuRootElement

defaultOpen: boolean

Whether the overlay is initially open.

Default

Section titled “Default”

false

open: boolean | null

Whether the overlay is currently open.

Default

Section titled “Default”

null

disabled: boolean

Whether the component should ignore user interaction.

Default

Section titled “Default”

false

addController(controller: ReactiveController): void

removeController(controller: ReactiveController): void

connectedCallback(): void

disconnectedCallback(): void

<prosekit-menu-submenu-root> custom element.

Properties: MenuSubmenuRootProps

Events: MenuSubmenuRootEvents

Data attributes:

new MenuSubmenuRootElement(): MenuSubmenuRootElement

defaultOpen: boolean

Whether the overlay is initially open.

Default

Section titled “Default”

false

open: boolean | null

Whether the overlay is currently open.

Default

Section titled “Default”

null

disabled: boolean

Whether the component should ignore user interaction.

Default

Section titled “Default”

false

addController(controller: ReactiveController): void

removeController(controller: ReactiveController): void

connectedCallback(): void

disconnectedCallback(): void

<prosekit-menu-submenu-trigger> custom element.

Properties: MenuSubmenuTriggerProps

Data attributes:

new MenuSubmenuTriggerElement(): MenuSubmenuTriggerElement

value: string

The unique value for this submenu trigger in the parent menu.

Default

Section titled “Default”

""

disabled: boolean

Whether this submenu trigger is disabled.

Default

Section titled “Default”

false

addController(controller: ReactiveController): void

removeController(controller: ReactiveController): void

connectedCallback(): void

disconnectedCallback(): void

<prosekit-menu-trigger> custom element.

Properties: MenuTriggerProps

Events: MenuTriggerEvents

new MenuTriggerElement(): MenuTriggerElement

disabled: boolean

Whether the component should ignore user interaction.

Default

Section titled “Default”

false

addController(controller: ReactiveController): void

removeController(controller: ReactiveController): void

connectedCallback(): void

disconnectedCallback(): void

value: string

The unique value for this menu item.

Default

Section titled “Default”

""

disabled: boolean

Whether this menu item is disabled.

Default

Section titled “Default”

false

closeOnSelect: boolean

Whether to close the menu when the item is pressed.

Default

Section titled “Default”

true

eventTarget: EventTarget | HTMLElement | null

By default, the MenuPopup element will listen for keydown events. You can pass a different element to listen for keydown events.

Default

Section titled “Default”

null

placement: Placement

The initial placement of the floating element

Default

Section titled “Default”

"bottom-start"

strategy: "fixed" | "absolute"

The strategy to use for positioning

Default

Section titled “Default”

"absolute"

autoUpdate: boolean | AutoUpdateOptions

Options to activate auto-update listeners

See

Section titled “See”

https://floating-ui.com/docs/autoUpdate

Default

Section titled “Default”

true

hoist: boolean

Whether to use the browser Popover API to place the floating element on top of other page content.

Default

Section titled “Default”

true

offset: OffsetOptions

The distance between the reference and floating element.

Default

Section titled “Default”

6

flip: boolean | Placement[]

Whether to flip the placement in order to keep it in view when the preferred placement(s) will overflow the clipping boundary. You can also provide an array of placements to try sequentially if the preferred placement does not fit.

Default

Section titled “Default”

true

shift: boolean

Whether the floating element should shift to keep it in view.

Default

Section titled “Default”

true

overlap: boolean

Whether the floating element can overlap the reference element to keep it in view.

Default

Section titled “Default”

false

fitViewport: boolean

Whether to constrain the floating element's width and height to not exceed the viewport.

Default

Section titled “Default”

false

sameWidth: boolean

Whether to constrain the floating element's width so that it matches the reference element.

Default

Section titled “Default”

false

sameHeight: boolean

Whether to constrain the floating element's height so that it matches the reference element.

Default

Section titled “Default”

false

inline: boolean

Whether to improve positioning for inline reference elements that span over multiple lines.

Default

Section titled “Default”

false

hide: boolean

Whether to hide the floating element when the reference element or the floating element is fully clipped.

Default

Section titled “Default”

false

boundary: Boundary

Describes the clipping element(s) or area that overflow will be checked relative to. Please see https://floating-ui.com/docs/detectoverflow#boundary for more information.

Default

Section titled “Default”

'clippingAncestors'

rootBoundary: RootBoundary

Describes the root boundary that the element will be checked for overflow relative to. Please see https://floating-ui.com/docs/detectoverflow#rootboundary for more information.

Default

Section titled “Default”

'viewport'

overflowPadding: number

Describes the virtual padding around the boundary to check for overflow. Please see https://floating-ui.com/docs/detectoverflow#padding for more information.

Default

Section titled “Default”

4

elementContext: ElementContext

The element that will be used to check for overflow. Please see https://floating-ui.com/docs/detectoverflow#elementcontext for more information.

Default

Section titled “Default”

'floating'

altBoundary: boolean

Whether to check the alternate elementContext's boundary. Please see https://floating-ui.com/docs/detectoverflow#altboundary for more information.

Default

Section titled “Default”

false

defaultOpen: boolean

Whether the overlay is initially open.

Default

Section titled “Default”

false

open: boolean | null

Whether the overlay is currently open.

Default

Section titled “Default”

null

disabled: boolean

Whether the component should ignore user interaction.

Default

Section titled “Default”

false

defaultOpen: boolean

Whether the overlay is initially open.

Default

Section titled “Default”

false

open: boolean | null

Whether the overlay is currently open.

Default

Section titled “Default”

null

disabled: boolean

Whether the component should ignore user interaction.

Default

Section titled “Default”

false

value: string

The unique value for this submenu trigger in the parent menu.

Default

Section titled “Default”

""

disabled: boolean

Whether this submenu trigger is disabled.

Default

Section titled “Default”

false

disabled: boolean

Whether the component should ignore user interaction.

Default

Section titled “Default”

false

select: SelectEvent

Emitted when the the item is selected.

openChange: OpenChangeEvent

Emitted when the menu is opened or closed.

openChange: OpenChangeEvent

Emitted when the submenu is opened or closed.

openChange: OpenChangeEvent

Emitted when the menu is opened or closed.

function registerMenuRootElement(): void

function registerMenuTriggerElement(): void

function registerMenuPositionerElement(): void

function registerMenuPopupElement(): void

function registerMenuItemElement(): void

function registerMenuSubmenuRootElement(): void

function registerMenuSubmenuTriggerElement(): void

Re-exports OpenChangeEvent

Re-exports SelectEvent