ContextMenu

Displays a menu located at the pointer, triggered by a right-click or a long-press.

				
<ContextMenu.Container slot="component">
    <ContextMenu.Trigger class="contextmenu__area">
        Right click for context menu
    </ContextMenu.Trigger>
    <ContextMenu.Content class="contextmenu__content">
        <ContextMenu.Group>
            <ContextMenu.Item class="contextmenu__item">Item 1</ContextMenu.Item>
            <ContextMenu.Item class="contextmenu__item" disabled>Item 2</ContextMenu.Item>
            <ContextMenu.Item class="contextmenu__item">Item 3</ContextMenu.Item>
            <ContextMenu.Sub class="contextmenu__subtrigger">
                <span slot="item">Submenu Item</span>
                <ContextMenu.Content class="contextmenu__subcontent" slot="menu">
                    <ContextMenu.Group>
                        <ContextMenu.Item class="contextmenu__item">Submenu Item 1</ContextMenu.Item>
                        <ContextMenu.Item class="contextmenu__item">Submenu Item 2</ContextMenu.Item>
                        <ContextMenu.Item class="contextmenu__item">Submenu Item 3</ContextMenu.Item>
                    </ContextMenu.Group>
                </ContextMenu.Content>
            </ContextMenu.Sub>
            <ContextMenu.ItemCheck class="contextmenu__checkboxitem">
                Check Item
                <ContextMenu.ItemIndicator class="contextmenu__indicator">
                    <svelte:fragment slot="checked">+</svelte:fragment>
                </ContextMenu.ItemIndicator>
            </ContextMenu.ItemCheck>
        </ContextMenu.Group>
        <ContextMenu.Label class="contextmenu__label">Radio Group</ContextMenu.Label>
        <ContextMenu.RadioGroup>
            <ContextMenu.ItemRadio class="contextmenu__radioitem" value="a">
                <ContextMenu.ItemIndicator class="contextmenu__indicator">
                    <svelte:fragment slot="checked">+</svelte:fragment>
                </ContextMenu.ItemIndicator> 
                Option A
            </ContextMenu.ItemRadio>
            <ContextMenu.ItemRadio class="contextmenu__radioitem" value="b">
                <ContextMenu.ItemIndicator class="contextmenu__indicator">
                    <svelte:fragment slot="checked">+</svelte:fragment>
                </ContextMenu.ItemIndicator>
                Option B
            </ContextMenu.ItemRadio>
            <ContextMenu.ItemRadio class="contextmenu__radioitem" value="c">
                <ContextMenu.ItemIndicator class="contextmenu__indicator">
                    <svelte:fragment slot="checked">+</svelte:fragment>
                </ContextMenu.ItemIndicator> 
                Option C
            </ContextMenu.ItemRadio>
        </ContextMenu.RadioGroup>
    </ContextMenu.Content>
</ContextMenu.Container>

API Reference

Container

Prop	Type	Default
`open`	`boolean`	`false`
`modal`	`boolean`	`true`
`submenu`	`boolean`	`false`
`direction`	`Direction`	`ltr`

Content

Prop	Type	Default
`side`	`Side \| null`	`null`
`alignment`	`Alignment \| null`	`null`
`id`	`string \| null`	`null`
`labelled`	`string \| null`	`null`

Group

No props

Item

Prop	Type	Default
`disabled`	`boolean`	`false`
`closeOnClick`	`boolean`	`true`
`value`	`string`
`disableImplicitValue`	`boolean`	`false`
`submenu`	`boolean`	`false`
`role`	`string`	`menuitem`
`ariaChecked`	`Checked`	`null`

ItemCheck

Prop	Type	Default
`checked`	`Checked`	`false`

ItemIndicator

No props

ItemRadio

Prop	Type	Default
`value`	`string`	`-`
`checked`	`Checked`	`false`

Label

No props

RadioGroup

Prop	Type	Default
`value`	`string`

Sub

No props

Trigger

Prop	Type	Default
`disabled`	`boolean`	`false`