Menus

A menu offers a contextual list of actions or functions.

Classes

Class	Description	Parent	Modifies
`.s-menu`	Base container styling for a menu.	N/A	N/A
`.s-menu--divider`	Adds a divider line between menu sections.	`.s-menu`	N/A
`.s-menu--item`	Applies link styling to link within a menu. Used for actionable elements.	`.s-menu`	N/A
`.s-menu--title`	Adds appropriate styling for a title within a menu.	`.s-menu`	N/A
`.s-menu--icon`	Applies styling to an icon.	`.s-menu--item`	N/A
`.s-menu--action`	Applies link styling to link within a menu. Used for actionable elements.	`.s-menu--item`	N/A
`.s-menu--action__danger`	Applies danger styling to a menu link. Used for destructive actions.	N/A	`.s-menu--action`

Examples

A menu displays a list of choices temporarily, and usually represent tasks or actions. Don’t confuse menus for navigation.

Basic

At its most basic, a menu is a simple styled list of contextual actions. Because they’re contextual, it’s strongly recommended that a menu is contained within a popover or a card. When placed in various containers, you’ll need to either account for the padding on the container, or use negative margins on the menu component itself.

<div class="s-popover p8">
    <ul class="s-menu" role="menu">
        <li class="s-menu--item" role="menuitem">
            <a class="s-menu--action" href="…">…</a>
        </li>
        <li class="s-menu--item" role="menuitem">
            <button class="s-menu--action">…</button>
        </li>
    </ul>
</div>

<ul class="s-menu" role="menu">
    <li class="s-menu--item" role="menuitem">
        <a class="s-menu--action" href="…">…</a>
    </li>
</ul>

Within a popover

Within a card

No container

Titles and dividers

You can split up your menu by using either titles, dividers, or some combination of the two. Titles help group similar conceptual actions—in this example, we’ve grouped all sharing options. We’ve also split our destructive actions into their own section using a divider.

<div class="s-popover px0 py4">
    <ul class="s-menu" role="menu">
        <li class="s-menu--title" role="separator">…</li>
        <li class="s-menu--item" role="menuitem">
            <a class="s-menu--action" href="…">…</a>
        </li>
        <li class="s-menu--divider" role="separator"></li>
        <li class="s-menu--item" role="menuitem">
            <a class="s-menu--action s-menu--action__danger" href="…">…</a>
        </li>
    </ul>
</div>

Icons

Icons can be added to menu items to help visually distinguish actions. Include the s-menu--icon class on the icon to ensure proper spacing and alignment.

<ul class="s-menu" role="menu">
    <li class="s-menu--item" role="menuitem">
        <a class="s-menu--action" href="#">
            @Svg.Home.With("s-menu--icon")
            Home
        </a>
    </li>
    <li class="s-menu--item" role="menuitem">
        <a class="s-menu--action" href="#">
            @Svg.Inbox.With("s-menu--icon")
            Inbox
        </a>
    </li>
    <li class="s-menu--item" role="menuitem">
        <a class="s-menu--action" href="#">
            @Svg.Settings.With("s-menu--icon")
            Settings
        </a>
    </li>
</ul>

Selected states

To create selectable menu items, add .s-checkbox.s-checkbox__checkmark or .s-radio.s-radio__checkmark to the .s-menu--action element and include a radio or checkbox input as a child element. When the input is :checked, the corresponding menu item displays a checkmark.

<fieldset class="s-menu s-form-group">
    <legend class="s-menu--title">…</legend>
    <div class="s-menu--item">
        <label class="s-menu--action s-radio s-radio__checkmark" for="…">
            <input type="radio" id="…" name="…" value="…">
            …
        </label>
    </div>
    …
</fieldset>

<fieldset class="s-menu s-form-group">
    <legend class="s-menu--title">…</legend>
    <div class="s-menu--item">
        <label class="s-menu--action s-checkbox s-checkbox__checkmark" for="…">
            <input type="checkbox" id="…" name="…" value="…">
            …
        </label>
    </div>
    …
</fieldset>

Radio groups

In the case of user management, it’s appropriate to include radio options. In this example, we’re setting a user’s role. While our examples up to this point have all been simple unordered lists, the s-menu component works on any markup including fieldset.

<div class="s-menu" role="menu">
    <fieldset>
        <legend class="s-menu--title">…</legend>
        <label class="s-menu--item s-radio" for="…">
            <input type="radio" name="…" id="…" role="menuitemradio" checked>
            <div>
                <div class="s-label">…</div>
                <div class="s-description mt2">…</div>
            </div>
        </label>
        <label class="s-menu--item s-radio" for="…">
            <input type="radio" name="…" id="…" role="menuitemradio">
            <div>
                <div class="s-label">…</div>
                <div class="s-description mt2">…</div>
            </div>
        </label>
    </fieldset>
</div>