Skip to main content

Menu

The menu component allows the user to select a single choice from a predetermined list of choices. It is a primitive component used by other components and modules and is thus invoked in varying ways. Before using menu, be sure that you can’t use other options like select, action menu, or combo. Menus that animate into view can generally be dismissed by tapping or clicking somewhere outside the menu.

Example

Best practices

Use a menu in a workflow or experience flow to allow the user to make a choice.

Do

  • Group together sets of related menu items and use a divider between groups.
  • Use on unordered or ordered lists with nested anchors or spans.

Don’t

  • Don’t use menu for when the user can select multiple items at once. Consider instead select button.

Also known as

Context menu
Dropdown menu
Select inline

Related

Combo
Action Menu
Auto Suggest
Refine Menu
Select

Accessibility

  • This component is not used in isolation so it does not meet all accessibility guidelines by itself. See Select Menu for an accessible implementation of menu.

Options

Add a class name f-sub-menu to the component to create sub menus.

Development

  • Schema definition: The menu schema defines the acceptable configurations, requirements, and options for each component.

Code and preview

Default menu

<ul id="uniqueIdForList1" role="menu" class="c-menu" aria-hidden="false">
    <li class="c-menu-item" role="presentation">
        <a aria-checked="false" role="menuitem" href="#">Menu link lorem ipsum.</a>
    </li>
    <li class="c-menu-item" role="presentation">
        <a aria-checked="false" role="menuitem" href="#">Menu link lorem ipsum, consectetur adipiscing elit. Duis ut commodo ante.</a>
    </li>
    <li class="c-menu-item" role="presentation">
        <a aria-checked="false" role="menuitem" href="#">Menu link lorem ipsum.</a>
    </li>
    <li class="c-menu-item" role="presentation">
        <a aria-checked="true" role="menuitem" href="#">Menu link lorem ipsum, consectetur adipiscing elit. Duis ut commodo ante.</a>
    </li>
</ul>

Default menu with scroll

<ul id="uniqueIdForList2" role="menu" class="c-menu f-scroll" aria-hidden="false">
    <li class="c-menu-item" role="presentation">
        <a aria-checked="false" role="menuitem" href="#">Menu link lorem ipsum.</a>
    </li>
    <li class="c-menu-item" role="presentation">
        <a aria-checked="false" role="menuitem" href="#">Menu link lorem ipsum, consectetur adipiscing elit. Duis ut commodo ante.</a>
    </li>
    <li class="c-menu-item" role="presentation">
        <a aria-checked="false" role="menuitem" href="#">Menu link lorem ipsum.</a>
    </li>
    <li class="c-menu-item" role="presentation">
        <a aria-checked="false" role="menuitem" href="#">Menu link lorem ipsum, consectetur adipiscing elit. Duis ut commodo ante.</a>
    </li>
    <li class="c-menu-item" role="presentation">
        <a aria-checked="true" role="menuitem" href="#">Menu link lorem ipsum.</a>
    </li>
    <li class="c-menu-item" role="presentation">
        <a aria-checked="false" role="menuitem" href="#">Menu link lorem ipsum, consectetur adipiscing elit. Duis ut commodo ante.</a>
    </li>
    <li class="c-menu-item" role="presentation">
        <a aria-checked="false" role="menuitem" href="#">Menu link lorem ipsum.</a>
    </li>
</ul>

Menu with sub-menu

<ul id="uniqueIdForList3" role="menu" class="c-menu" aria-hidden="false">
    <li role="menuitem" class="c-menu-item f-sub-menu" aria-haspopup="true">
        <a href="#" aria-haspopup="true" aria-expanded="true">Menu link lorem ipsum.</a>
        <ul id="sub-menu-1" role="menu" class="c-menu" aria-labelledby="sub-menu-1" aria-hidden="false">
            <li class="c-menu-item" role="presentation">
                <a aria-checked="true" role="menuitem" href="#">Menu link lorem ipsum, consectetur adipiscing elit. Duis ut commodo ante.</a>
            </li>
            <li class="c-menu-item" role="presentation">
                <a aria-checked="false" role="menuitem" href="#">Menu link lorem ipsum.</a>
            </li>
            <li class="c-menu-item" role="presentation">
                <a aria-checked="false" role="menuitem" href="#">Menu link lorem ipsum, consectetur adipiscing elit. Duis ut commodo ante.</a>
            </li>
            <li class="c-menu-item" role="presentation">
                <a aria-checked="false" role="menuitem" href="#">Menu link lorem ipsum.</a>
            </li>
        </ul>
    </li>
    <li class="c-menu-item" role="presentation">
        <a aria-checked="false" role="menuitem" href="#">Menu link lorem ipsum, consectetur adipiscing elit. Duis ut commodo ante.</a>
    </li>
    <li class="c-menu-item" role="presentation">
        <a aria-checked="false" role="menuitem" href="#">Menu link lorem ipsum.</a>
    </li>
    <li class="c-menu-item" role="presentation">
        <a aria-checked="false" role="menuitem" href="#">Menu link lorem ipsum, consectetur adipiscing elit. Duis ut commodo ante.</a>
    </li>
</ul>