Context Menu

Display a right-click menu with context-specific actions

The ContextMenu component can be used to create a right-click menu that you can use to allow your users to interact directly with elements in a way that matches their workflow. They:

• Improve usability by offering quick access to relevant actions.
• Save screen space by hiding rarely used options until needed.
• Enhance productivity through contextual shortcuts.
• Support customization so menus can adapt to different elements or user roles.

---
import { ContextMenu, List } from 'webcoreui/astro'
---

<ContextMenu className="ctx">
    <span class="muted">Right-click here</span>

    <List
        itemGroups={[ ... ]}
        showSearchBar={true}
        showSearchBarIcon={true}
        searchBarPlaceholder="Search the app..."
        noResultsLabel="Nothing found..."
        slot="context"
    />
</ContextMenu>

<script>
    import { ContextMenu, List } from 'webcoreui/svelte'
</script>

<ContextMenu>
    <span class="muted">Right-click here</span>

    <List
        itemGroups={[ ... ]}
        showSearchBar={true}
        showSearchBarIcon={true}
        searchBarPlaceholder="Search the app..."
        noResultsLabel="Nothing found..."
        slot="context"
    />
</ContextMenu>

import React from 'react'
import { ContextMenu, List  } from 'webcoreui/react'

const Context = (
    <List
        itemGroups={[ ... ]}
        showSearchBar={true}
        showSearchBarIcon={true}
        searchBarPlaceholder="Search the app..."
        noResultsLabel="Nothing found..."
    />
)

const Component = () => (
    <ContextMenu context={Context}>
        <span class="muted">Right-click here</span>
    </ContextMenu>
)

export default Component

To use the ContextMenu component, you need to wrap an area of your page into a ContextMenu that ensures elements within that section opens a context menu when a right-click is triggered. You can make any element a context menu by setting slot to context.

By default, the component will create a div. You can change this using the element prop, and also style it with CSS classes using the className prop:

<ContextMenu element="section" className="ctx-area">
    ...
</ContextMenu>

Closing Context Programmatically

The context menu is automatically closed when the user clicks outside of it. However, you may also want to close your context menu when certain actions are triggered within the context menu. To do this, you can use the closeContext function that expects a query selector that targets the context slot:

<ContextMenu>
    <span class="muted">Right-click here</span>

    <List
        itemGroups={[ ... ]}
        showSearchBar={true}
        showSearchBarIcon={true}
        searchBarPlaceholder="Search the app..."
        noResultsLabel="Nothing found..."
        wrapperClassName="ctx-menu"
        slot="context"
    />
</ContextMenu>

<script>
    import { closeContext, on } from 'webcoreui'

    on('.ctx-menu', 'click', () => closeContext('.ctx-menu'))
</script>

API

type ContextMenuProps = {
    element?: string
    className?: string
    [key: string]: any
}

type SvelteContextMenuProps = {
    children: Snippet
    context: Snippet
} & ContextMenuProps

type ReactContextMenuProps = {
    Element?: React.ElementType
    children: React.ReactNode
    context: React.ReactNode
} & Omit<ContextMenuProps, 'element'>