Menu

Menu base code

The menu uses a lightweight, predictable HTML. Think of .menu as the outer shell, .menu-panel as the floating tray, and .menu-body as the list that holds your items.

Inside .menu-body, each item lives in its own <li> and renders as a .menu-item. The CSS takes care of hover, focus, active, and disabled states.

html

<div class="menu">
    <div class="menu-panel dropdown-menu">
        <ul class="menu-body" role="menu">
            <li>
                <button class="menu-item" type="button">Action</button>
            </li>
            <li>
                <button class="menu-item" type="button">Another action</button>
            </li>
            <li>
                <button class="menu-item" type="button">Something else here</button>
            </li>
        </ul>
    </div>
</div>

Section header

Add a header to label sections of actions in any dropdown menu.

html

<li>
    <h6 class="menu-section-header">Section header</h6>
</li>

Divider

Separate groups of related menu items with a divider.

html

<li>
    <hr class="menu-divider">
</li>

Link

Links can be used as menu items but typically take the user to a different page or location.

html

<div class="menu">
    <div class="menu-panel dropdown-menu">
        <ul class="menu-body" role="menu">
            <li>
                <a class="menu-item" href="#">Page link</a>
            </li>  
            <li>
                <a class="menu-item" href="#">Another link</a>
            </li>  
            <li>
                <a class="menu-item" href="#">Something else</a>
            </li>                            
        </ul>
    </div>
</div>

Submenu

A submenu is a small fly-out nested under a menu item. The first button is the toggle (.submenu-toggle) and the list that follows is the submenu (.submenu); keep them as siblings inside the same <li> so hover, focus, and keyboard logic treat them as one unit. Open/close can be handled by CSS (e.g., li:hover). Inside the submenu, items are the same as the top level (.menu-item).

html

<li>
    <button class="menu-item submenu-toggle" type="button" aria-haspopup="menu">
        Submenu
    </button>
    <ul class="submenu" role="menu">
        <li>
            <button class="menu-item" type="button">Option 1</button>
        </li>
        <li>
            <button class="menu-item" type="button">Option 2</button>
        </li>
        <li>
            <button class="menu-item" type="button">Option 3</button>
        </li>
    </ul>
</li>

Selectable submenu items

Submenu items can also have selectable functionality, either single select (radio) or multi select (checkbox).
Each item is made up of an <input> and a <label>.

Single select

html

<li>
    <button class="menu-item submenu-toggle" type="button" aria-haspopup="menu">
        Submenu
    </button>
    <ul class="submenu" role="menu">
        <li>
            <input type="radio" class="submenu-item-selectable" name="single" id="single-0-1" tabindex="-1" aria-hidden="true">
            <label class="menu-item" for="single-0-1" tabindex="0" role="menuitemradio" aria-checked="false">
                Option 1
            </label>
        </li>
        <li>
            <input type="radio" class="submenu-item-selectable" name="single" id="single-0-2" tabindex="-1" aria-hidden="true">
            <label class="menu-item" for="single-0-2" tabindex="0" role="menuitemradio" aria-checked="false">
                Option 2
            </label>
        </li>
        <li>
            <input type="radio" class="submenu-item-selectable" name="single" id="single-0-3" tabindex="-1" aria-hidden="true">
            <label class="menu-item" for="single-0-3" tabindex="0" role="menuitemradio" aria-checked="false">
                Option 3
            </label>
        </li>
    </ul>
</li>

Multi select

html

<li>
    <button class="menu-item submenu-toggle" type="button" aria-haspopup="menu">
        Submenu
    </button>
    <ul class="submenu" role="menu">
        <li>
            <input type="checkbox" class="submenu-item-selectable" id="multi-0-1" tabindex="-1" aria-hidden="true">
            <label class="menu-item" for="multi-0-1" tabindex="0" role="menuitemcheckbox" aria-checked="false">
                Option 1
            </label>
        </li>
        <li>
            <input type="checkbox" class="submenu-item-selectable" id="multi-0-2" tabindex="-1" aria-hidden="true">
            <label class="menu-item" for="multi-0-2" tabindex="0" role="menuitemcheckbox" aria-checked="true">
                Option 2
            </label>
        </li>
        <li>
            <input type="checkbox" class="submenu-item-selectable" id="multi-0-3" tabindex="-1" aria-hidden="true">
            <label class="menu-item" for="multi-0-3" tabindex="0" role="menuitemcheckbox" aria-checked="false">
                Option 3
            </label>
        </li>
    </ul>
</li>

Menu item icon

html

<li>
    <button class="menu-item" type="button">
        <i class="fa-regular fa-pencil"></i>Edit
    </button>
</li>

Danger hover

A danger hover state can be applied to actions that could cause significant changes, such as delete. Do this by adding the .menu-item-danger class.

html

<li>
    <button class="menu-item menu-item-danger" type="button">
        <i class="fa-regular fa-trash-can"></i>Delete
    </button>
</li>