Skip to content
BigBang

Popular

    ↑↓Navigate↵OpenEscClose
    TR

    Components

    ContextMenu

    An action menu that opens at the pointer on right click or long press on an area.

    Storybook
    Storybook
    Source
    Source
    • To give frequent users quick access to actions on a record, file or card.
    • As the only way to an action: right click is not discoverable and touch needs a long press. Offer the same actions in a DropdownMenu or with buttons too.
    • Where the browser menu is expected: text fields and links.
    1. Area: the element that listens for right click, given as trigger.
    2. Menu: the DropdownMenu surface, opened at the pointer.
    3. Items: the DropdownMenu parts.
    • Right click, or a long press on touch, opens the menu at the pointer; the browser menu does not open.
    • When the menu opens, focus moves to the first item; it closes when an item is chosen or with Escape.
    • When there is no room, the menu shifts to stay on screen.
    • Show actions about the area itself; put the most common action first.
    • Put a dangerous action last, after a separator.
    • Give the same items in the same order as the row’s DropdownMenu.
    • Item names are verbs: “Edit”, “Duplicate”, “Delete”.