(external link)
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.
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 |
size |
size |
Size of the context menu. |
"lg" | "sm" |
undefined |
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