Liquid – Context Menu

Components

Context Menu

(external link)

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 #

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

ld-context-menu #

Examples #

Basic #

Size #

Item Groups #

With custom width #

Position #

Prevent auto-closing #

Use right-click #

Properties #

Events #

Methods #

hideContextMenu() => Promise<void> #

Returns #

showContextMenu() => Promise<void> #

Returns #

Shadow Parts #

Dependencies #

Depends on #

Graph #

`hideContextMenu() => Promise<void>` #

`showContextMenu() => Promise<void>` #