Class ContextMenuItem

A context menu item that can be added to a context menu.

Menu items can display a label with optional content before and/or after it, and can be enabled or disabled. When clicked, menu items fire a "click" event with context data including the map, coordinates, and any features at the click location.

Example

const item = new ContextMenuItem({
  label: "Center here",
  start: { className: "fa-solid fa-crosshairs" }
});

item.on("click", ({ map, lngLat }) => {
  map.flyTo({ center: [lngLat.lng, lngLat.lat] });
});

menu.addItem(item);

Hierarchy (View Summary)

Evented<ContextMenuItemEvents>
- ContextMenuItem
  - ContextMenuSubmenu

Index

Constructors

constructor

new ContextMenuItem(options: ContextMenuItemOptions): ContextMenuItem
Creates a new context menu item.
Parameters
- options: ContextMenuItemOptions
  Configuration options for the menu item.
  
  Configuration options for creating a context menu item.
  - OptionalbuttonClassName?: string
    Custom CSS class name for the menu item's <button> element.
  - OptionalclassName?: string
    Custom CSS class name for the menu item's <li> element.
  - Optionaldisabled?: boolean
    Whether the menu item is disabled. Defaults to false.
  - Optionalend?: Content
    Content to display after the label.
  - label: string
    The text label to display.
  - Optionalstart?: Content
    Content to display before the label (e.g., an icon element).
Returns ContextMenuItem
Overrides Evented<ContextMenuItemEvents>.constructor
- Defined in components/ContextMenuItem/ContextMenuItem.ts:81

Accessors

disabled

get disabled(): boolean
Gets whether the menu item is disabled.

Returns boolean
true if the menu item is disabled, false otherwise.
- Defined in components/ContextMenuItem/ContextMenuItem.ts:153
set disabled(value: boolean): void
Sets whether the menu item is disabled.
Parameters
- value: boolean
  true to disable the menu item, false to enable it.
Returns void
- Defined in components/ContextMenuItem/ContextMenuItem.ts:161

end

get end(): Content | undefined
Gets the end slot content of the menu item.

Returns Content | undefined
The end content (string or HTMLElement), or undefined if not set.
- Defined in components/ContextMenuItem/ContextMenuItem.ts:136
set end(value: Content | undefined): void
Sets the end slot content of the menu item.
Parameters
- value: Content | undefined
  A string (rendered as text) or HTMLElement, or undefined to remove.
Returns void
- Defined in components/ContextMenuItem/ContextMenuItem.ts:144

label

get label(): string
Gets the label text of the menu item.

Returns string
The current label text.
- Defined in components/ContextMenuItem/ContextMenuItem.ts:99
set label(value: string): void
Sets the label text of the menu item.
Parameters
- value: string
  The new label text to display.
Returns void
- Defined in components/ContextMenuItem/ContextMenuItem.ts:107

start

get start(): Content | undefined
Gets the start slot content of the menu item.

Returns Content | undefined
The start content (string or HTMLElement), or undefined if not set.
- Defined in components/ContextMenuItem/ContextMenuItem.ts:119
set start(value: Content | undefined): void
Sets the start slot content of the menu item.
Parameters
- value: Content | undefined
  A string (rendered as text) or HTMLElement, or undefined to remove.
Returns void
- Defined in components/ContextMenuItem/ContextMenuItem.ts:127

Methods

blur

blur(): void
Removes focus from the menu item, removing the focused styling.

Returns void
- Defined in components/ContextMenuItem/ContextMenuItem.ts:201

click

click(): void
Programmatically triggers a click on the menu item. Only works if the item is not disabled. This will fire the "click" event with the current context data.

Returns void
- Defined in components/ContextMenuItem/ContextMenuItem.ts:211

fire

fire<K extends keyof ContextMenuItemEvents>(
type: K,
event: ContextMenuItemEvents[K],
): this
Fires an event, calling all registered handlers for the event type.
Type Parameters
- K extends keyof ContextMenuItemEvents
Parameters
- type: K
  The event type to fire.
- event: ContextMenuItemEvents[K]
  The event data to pass to the handlers.
Returns this
The instance for method chaining.
Inherited from Evented.fire
- Defined in util/evented.ts:45

focus

focus(): void
Focuses the menu item, adding the focused styling. Only works if the item is not disabled.

Returns void
- Defined in components/ContextMenuItem/ContextMenuItem.ts:191

listens

listens<K extends keyof ContextMenuItemEvents>(type: K): boolean
Checks whether there are any registered handlers for the specified event type.
Type Parameters
- K extends keyof ContextMenuItemEvents
Parameters
- type: K
  The event type to check.
Returns boolean
true if there are registered handlers for the event type, false otherwise.
Inherited from Evented.listens
- Defined in util/evented.ts:60

off

off<K extends keyof ContextMenuItemEvents>(
type: K,
handler: EventHandler<ContextMenuItemEvents[K]>,
): this
Unregisters an event handler for the specified event type.
Type Parameters
- K extends keyof ContextMenuItemEvents
Parameters
- type: K
  The event type to stop listening for.
- handler: EventHandler<ContextMenuItemEvents[K]>
  The function to remove from the event handlers.
Returns this
The instance for method chaining.
Inherited from Evented.off
- Defined in util/evented.ts:28

on

on<K extends keyof ContextMenuItemEvents>(
type: K,
handler: EventHandler<ContextMenuItemEvents[K]>,
): this
Registers an event handler for the specified event type.
Type Parameters
- K extends keyof ContextMenuItemEvents
Parameters
- type: K
  The event type to listen for.
- handler: EventHandler<ContextMenuItemEvents[K]>
  The function to call when the event is fired.
Returns this
The instance for method chaining.
Inherited from Evented.on
- Defined in util/evented.ts:14

remove

remove(): this
Removes the menu item from the DOM and cleans up all event listeners and references.

Returns this
The menu item instance for method chaining.
- Defined in components/ContextMenuItem/ContextMenuItem.ts:221

Class ContextMenuItem

Example

Hierarchy (View Summary)

Index

Constructors

Accessors

Methods

Constructors

constructor

Parameters

OptionalbuttonClassName?: string

OptionalclassName?: string

Optionaldisabled?: boolean

Optionalend?: Content

label: string

Optionalstart?: Content

Returns ContextMenuItem

Accessors

disabled

Returns boolean

Parameters

Returns void

end

Returns Content | undefined

Parameters

Returns void

label

Returns string

Parameters

Returns void

start

Returns Content | undefined

Parameters

Returns void

Methods

blur

Returns void

click

Returns void

fire

Type Parameters

Parameters

Returns this

focus

Returns void

listens

Type Parameters

Parameters

Returns boolean

off

Type Parameters

Parameters

Returns this

on

Type Parameters

Parameters

Returns this

remove

Returns this

Settings

On This Page

`Optional`buttonClassName?: string

`Optional`className?: string

`Optional`disabled?: boolean

`Optional`end?: Content

`Optional`start?: Content