• Introduction
    • Why Liquid Oxygen
    • Getting started
      • React
      • Vue
  • Guides
    • CSS vs. Web Components
    • Component assets
    • Type checking and intellisense
    • Server-side rendering
    • Event handling
    • Form validation
    • Tailwind CSS integration
    • Design tokens
    • Testing
    • Sandbox applications
    • Troubleshooting
      • Popped-out element is rendered in wrong container
      • Failed to execute removeChild on Node
    • FAQ
    • Contributing
  • Globals
    • Animations
    • Border-radius
    • Colors
    • Focus
    • Fonts
    • Shadows
    • Spacings
    • Theming
    • Typography
  • Components
    • Accordion
      • Accordion Panel
      • Accordion Section
      • Accordion Toggle
    • Background Cells
    • Badge
    • Breadcrumbs
      • Crumb
    • Button
    • Card
      • Card Stack
    • Checkbox
    • Circular Progress
    • Context Menu
      • Menu
      • Menuitem
      • Menuitem Group
    • Cookie Consent
    • Header
    • Icon
    • Input
    • Input Message
    • Label
    • Link
    • Loading Indicator
    • Modal
    • Notice
    • Notification
    • Pagination
    • Progress
    • Radio Button
    • Screen Reader Live
    • Screen Reader Only
    • Select
      • Option
      • Option Group
    • Sidenav
      • Sidenav Accordion
      • Sidenav Back
      • Sidenav Header
      • Sidenav Heading
      • Sidenav Navitem
      • Sidenav Separator
      • Sidenav Slider
      • Sidenav Subnav
      • Sidenav Toggle Outside
    • Slider
    • Stepper
      • Step
    • Switch
      • Switch Item
    • Table
      • Table Body
      • Table Caption
      • Table Cell
      • Table Colgroup
      • Table Column
      • Table Footer
      • Table Head
      • Table Header
      • Table Row
      • Table Toolbar
    • Tabs
      • Tab
      • Tab List
      • Tab Panel
      • Tab Panel List
    • Toggle
    • Tooltip
    • Typography
  • Data Visualization
    • Getting Started
  1. Examples
    1. Basic
    2. Size
    3. Item Groups
    4. With custom width
    5. Position
    6. Prevent auto-closing
    7. Use right-click
  2. Properties
  3. Events
  4. Methods
    1. hideContextMenu() => Promise<void>
    2. showContextMenu() => Promise<void>
  5. Shadow Parts
  6. Dependencies
    1. Depends on
    2. Graph
Components Context Menu
(external link)

ld-context-menu #

The context menu is a pop-up menu that appears upon user interaction. It offers a limited set of choices that are available in the current state, or context.

If your application is mounted to a different element than the body element, or you have z-order related issues, you may need to configure the bodyElement option using the tetherOptions property. For more details check out the related troubleshooting section.

Examples #

The ld-context-menu is not available as CSS component, because of it's tooltip functionality. To see CSS components examples for the menu without tooltip functionality, please take a look at the ld-menu-documentation.

Basic #

<ld-context-menu>
  <ld-button slot="trigger">Open menu</ld-button>
  <ld-menuitem>Menu item 1</ld-menuitem>
  <ld-menuitem>Menu item 2</ld-menuitem>
  <ld-menuitem>Menu item 3</ld-menuitem>
</ld-context-menu>
<LdContextMenu>
  <LdButton slot="trigger">Open menu</LdButton>
  <LdMenuitem>Menu item 1</LdMenuitem>
  <LdMenuitem>Menu item 2</LdMenuitem>
  <LdMenuitem>Menu item 3</LdMenuitem>
</LdContextMenu>
Open menu Menu item 1 Menu item 2 Menu item 3

Size #

<ld-context-menu size="sm">
  <ld-button slot="trigger">Small</ld-button>
  <ld-menuitem>Menu item 1</ld-menuitem>
  <ld-menuitem>Menu item 2</ld-menuitem>
  <ld-menuitem>Menu item 3</ld-menuitem>
</ld-context-menu>

<ld-context-menu>
  <ld-button slot="trigger">Medium</ld-button>
  <ld-menuitem>Menu item 1</ld-menuitem>
  <ld-menuitem>Menu item 2</ld-menuitem>
  <ld-menuitem>Menu item 3</ld-menuitem>
</ld-context-menu>

<ld-context-menu size="lg">
  <ld-button slot="trigger">Large</ld-button>
  <ld-menuitem>Menu item 1</ld-menuitem>
  <ld-menuitem>Menu item 2</ld-menuitem>
  <ld-menuitem>Menu item 3</ld-menuitem>
</ld-context-menu>
<LdContextMenu size="sm">
  <LdButton slot="trigger">Small</LdButton>
  <LdMenuitem>Menu item 1</LdMenuitem>
  <LdMenuitem>Menu item 2</LdMenuitem>
  <LdMenuitem>Menu item 3</LdMenuitem>
</LdContextMenu>

<LdContextMenu>
  <LdButton slot="trigger">Medium</LdButton>
  <LdMenuitem>Menu item 1</LdMenuitem>
  <LdMenuitem>Menu item 2</LdMenuitem>
  <LdMenuitem>Menu item 3</LdMenuitem>
</LdContextMenu>

<LdContextMenu size="lg">
  <LdButton slot="trigger">Large</LdButton>
  <LdMenuitem>Menu item 1</LdMenuitem>
  <LdMenuitem>Menu item 2</LdMenuitem>
  <LdMenuitem>Menu item 3</LdMenuitem>
</LdContextMenu>
Small Menu item 1 Menu item 2 Menu item 3 Medium Menu item 1 Menu item 2 Menu item 3 Large Menu item 1 Menu item 2 Menu item 3

Item Groups #

<ld-context-menu>
  <ld-button slot="trigger">Open menu</ld-button>
  <ld-menuitem-group>
    <ld-menuitem>Menu item 1</ld-menuitem>
    <ld-menuitem>Menu item 2</ld-menuitem>
    <ld-menuitem>Menu item 3</ld-menuitem>
  </ld-menuitem-group>
  <ld-menuitem-group>
    <ld-menuitem mode="highlight">
      <ld-icon name="repost"></ld-icon>
      Reset
    </ld-menuitem>
    <ld-menuitem mode="danger">
      <ld-icon name="bin"></ld-icon>
      Delete
    </ld-menuitem>
  </ld-menuitem-group>
</ld-context-menu>
<LdContextMenu>
  <LdButton slot="trigger">Open menu</LdButton>
  <LdMenuitemGroup>
    <LdMenuitem>Menu item 1</LdMenuitem>
    <LdMenuitem>Menu item 2</LdMenuitem>
    <LdMenuitem>Menu item 3</LdMenuitem>
  </LdMenuitemGroup>
  <LdMenuitemGroup>
    <LdMenuitem mode="highlight">
      <LdIcon name="repost" />
      Reset
    </LdMenuitem>
    <LdMenuitem mode="danger">
      <LdIcon name="bin" />
      Delete
    </LdMenuitem>
  </LdMenuitemGroup>
</LdContextMenu>
Open menu Menu item 1 Menu item 2 Menu item 3 Reset Delete

With custom width #

<ld-context-menu style="width:18rem">
  <ld-button slot="trigger">Open menu</ld-button>
  <ld-menuitem>Menu item 1</ld-menuitem>
  <ld-menuitem>Menu item 2</ld-menuitem>
  <ld-menuitem>Menu item 3</ld-menuitem>
</ld-context-menu>
<LdContextMenu style={ { width: '18rem' } }>
  <LdButton slot="trigger">Open menu</LdButton>
  <LdMenuitem>Menu item 1</LdMenuitem>
  <LdMenuitem>Menu item 2</LdMenuitem>
  <LdMenuitem>Menu item 3</LdMenuitem>
</LdContextMenu>
Open menu Menu item 1 Menu item 2 Menu item 3

Position #

<ld-context-menu position="top right">
  <ld-button slot="trigger">Top right</ld-button>
  <ld-menuitem>Menu item 1</ld-menuitem>
  <ld-menuitem>Menu item 2</ld-menuitem>
  <ld-menuitem>Menu item 3</ld-menuitem>
</ld-context-menu>

<ld-context-menu position="left middle">
  <ld-button slot="trigger">Left middle</ld-button>
  <ld-menuitem>Menu item 1</ld-menuitem>
  <ld-menuitem>Menu item 2</ld-menuitem>
  <ld-menuitem>Menu item 3</ld-menuitem>
</ld-context-menu>
<LdContextMenu position="top right">
  <LdButton slot="trigger">Top right</LdButton>
  <LdMenuitem>Menu item 1</LdMenuitem>
  <LdMenuitem>Menu item 2</LdMenuitem>
  <LdMenuitem>Menu item 3</LdMenuitem>
</LdContextMenu>

<LdContextMenu position="left middle">
  <LdButton slot="trigger">Left middle</LdButton>
  <LdMenuitem>Menu item 1</LdMenuitem>
  <LdMenuitem>Menu item 2</LdMenuitem>
  <LdMenuitem>Menu item 3</LdMenuitem>
</LdContextMenu>
Top right Menu item 1 Menu item 2 Menu item 3 Left middle Menu item 1 Menu item 2 Menu item 3
The position prop is identical to the one of the ld-tooltip component. Please refer to the ld-tooltip-documentation for a full example of all available positions.

Prevent auto-closing #

You can prevent auto-closing of the context menu on click, by attaching the prevent-close attribute to the ld-menuitem component.

<ld-context-menu>
  <ld-button slot="trigger">Open menu</ld-button>
  <ld-menuitem>Will close</ld-menuitem>
  <ld-menuitem prevent-close>Won&apos;t close</ld-menuitem>
</ld-context-menu>
<LdContextMenu>
  <LdButton slot="trigger">Open menu</LdButton>
  <LdMenuitem>Will close</LdMenuitem>
  <LdMenuitem preventClose>Won&apos;t close</LdMenuitem>
</LdContextMenu>
Open menu Will close Won't close

Use right-click #

You can configure the context-menu to open on right-click instead of left-click by assigning the rightClick prop.

<ld-context-menu right-click>
  <ld-button slot="trigger">Open menu</ld-button>
  <ld-menuitem>Menu item 1</ld-menuitem>
  <ld-menuitem>Menu item 2</ld-menuitem>
</ld-context-menu>
<LdContextMenu rightClick>
  <LdButton slot="trigger">Open menu</LdButton>
  <LdMenuitem>Menu item 1</LdMenuitem>
  <LdMenuitem>Menu item 2</LdMenuitem>
</LdContextMenu>
Open menu Menu item 1 Menu item 2

Properties #

Property Attribute Description Type Default
key key for tracking the node's identity when working with lists string | number undefined
position position Position of the context menu relative to the trigger element. HTMLLdTooltipElement 'bottom left'
ref ref reference to component any undefined
rightClick right-click Use right-click. boolean false
size size Size of the context menu. "lg" | "sm" undefined
tetherOptions tether-options Tether options object to be merged with the default options (optionally stringified). string | { attachment?: string; bodyElement?: HTMLElement; classes?: { [className: string]: string | boolean; }; classPrefix?: string; constraints?: ITetherConstraint[]; element?: any; enabled?: boolean; offset?: string; optimizations?: any; target?: any; targetAttachment?: string; targetOffset?: string; targetModifier?: string; } undefined

Events #

Event Description Type
ldcontextmenuclose Emitted when the context menu is closed. CustomEvent<any>
ldcontextmenuopen Emitted when the context menu is opened. CustomEvent<any>

Methods #

hideContextMenu() => Promise<void> #

Hide context menu

Returns #

Type: Promise<void>

showContextMenu() => Promise<void> #

Show context menu

Returns #

Type: Promise<void>

Shadow Parts #

Part Description
"menu" ld-menu element wrapping the default slot
"tooltip" ld-tooltip element

Dependencies #

Depends on #

  • ld-tooltip
  • ld-menu

Graph #

graph TD;
  ld-context-menu --> ld-tooltip
  ld-context-menu --> ld-menu
  ld-tooltip --> ld-sr-only
  ld-tooltip --> ld-tooltip-popper
  style ld-context-menu fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS