Menubar

A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands. Implements the ARIA menubar pattern for proper accessibility support.

Can be controlled or uncontrolled

Supports submenus

Supports items, checkable items (single or multiple) with optional indeterminate state

Focus is fully managed

Full keyboard navigation

Typeahead support

Architecture

so-menubar
Slot: default
so-menubar-menu
Slot: trigger
so-menubar-trigger-button
Slot: default
Slot: content
so-menubar-content
Slot: default
so-menubar-item
Slot: default
so-menubar-checkbox
Slot: default
so-menubar-radio-group
Slot: default
so-menubar-radio-group-item
Slot: default
so-menubar-sub
Slot: trigger You must place an so-menubar-item here.
so-menubar-item
Slot: default
Slot: content
so-menubar-sub-content
Slot: default You can place the same elements as in the so-menubar-content here.

Reference

  • Menubar

    The root container that manages the state and behavior of the dropdown system. Coordinates the interaction between trigger and content components, handling events and state management for the entire dropdown hierarchy.

    • Attributes

      • default-value
        boolean
        /
        default: false

        The initial active menu when the menubar is rendered. Use when you do not need to control the active menu state.

      • value
        boolean
        /
        default: -

        The controlled active menu state. Must be used in conjunction with onValueChange.

    • Events

      • onValueChange

        Event handler called when the active menu changes.

  • Menu

    The container for a menu. Handles the opening state of its content via its trigger.

    • Attributes

      • value
        string
        /
        default: -

        The unique id of the menu. Determines if the menu is open.

  • Content

    The container that holds the menu items. Manages keyboard interactions, focus behavior, and positioning behavior. Implements proper ARIA attributes for accessibility and handles collision detection with viewport boundaries.

    • Attributes

      • aria-label
        string
        /
        default: -

        Accessible label for the menu content when a visible label is not present.

      • aria-labelled-by
        string
        /
        default: -

        References the ID of the element that labels the menu content.

  • Item

    An interactive menu item that can trigger an action when selected. Supports disabled states and keyboard navigation with proper ARIA attributes for accessibility.

    • Attributes

      • disabled
        boolean
        /
        default: false

        When true, prevents the user from selecting this item.

      • shortcut
        string
        /
        default: -

        Displays a keyboard shortcut hint for the menu item. This is purely informational and does not trigger the shortcut functionality.

    • Events

      • onSelect

        Event handler called when the item is clicked or has a keydown event (Space or Enter).

  • Checkbox

    A menu item that can be checked, unchecked or set to an indeterminate state. Implements proper ARIA attributes for accessibility.

    • Attributes

      • checked
        boolean
        /
        default: -

        The controlled checked state of the item. Must be used in conjunction with onCheckedChange.

      • disabled
        boolean
        /
        default: false

        When true, prevents the user from interacting with this item.

    • Events

      • onCheckedChange

        Event handler called when the checked state of the item changes.

  • Radio Group

    A container for grouping multiple radio items. Ensures that only one item in the group can be selected at a time.

    • Attributes

      • value
        string
        /
        default: -

        The value of the currently selected radio item in the group. Must be used in conjunction with onValueChange.

    • Events

      • onValueChange

        Event handler called when the selected value in the radio group changes.

  • Radio Group Item

    A selectable item within a radio group that can only be selected exclusively within its group. Implements proper ARIA attributes for accessibility.

    • Attributes

      • disabled
        boolean
        /
        default: false

        When true, prevents the user from selecting this item.

      • value
        string
        /
        default: -

        The unique value of the item. Used to identify the selected item within the radio group.

    • Events

      • onSelect

        Event handler called when the user selects the item.

  • Sub

    Container component that manages the state and behavior of a submenu. Coordinates the interaction between trigger and content components.

  • Sub Content

    The container that holds the submenu content. Manages keyboard interactions, positioning behavior and implements proper ARIA attributes for accessibility.

    • Attributes

      • aria-label
        string
        /
        default: -

        Accessible label for the submenu content when a visible label is not present.

      • aria-labelled-by
        string
        /
        default: -

        References the ID of the element that labels the submenu content.

Keyboard

  • Space

    When focus is on a menu item, activates the item or toggles its checked state.

  • Enter

    When focus is on a menu item, activates the item or toggles its checked state.

  • Moves focus to the next menu item. When focus is on the last item, moves focus to the first item.

  • Moves focus to the previous menu item. When focus is on the first item, moves focus to the last item.

  • When focus is on a menu trigger, moves to the next menu trigger. When focus is on a menubar sub-trigger, opens its submenu.

  • When focus is on a menu trigger, moves to the previous menu trigger. When focus is on a menubar sub-trigger, closes its submenu.

  • Escape

    Closes the active menu and returns focus to its trigger element.

made for toddle