Sections

Menus

A menu offers a contextual list of actions or functions.

Classes

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

Examples

Section titled Examples

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

Basic

Section titled 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>

<div class="s-card p8">
    <ul class="s-menu" role="menu">
        …
    </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

Section titled 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

Section titled 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

Section titled Selected states

Our menus also offer selected states.

<ul class="s-menu" role="menu">
    <li class="s-menu--item" role="menuitem">
        <button class="s-menu--action is-selected" href="…">
            Frequent
        </button>
    </li>
    …
</ul>

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

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

Using .is-selected

Using .s-radio

Using .s-checkbox

Radio groups

Section titled 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-check-control" for="…">
            <input class="s-radio" 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-check-control" for="…">
            <input class="s-radio" type="radio" name="…" id="…" role="menuitemradio">
            <div>
                <div class="s-label">…</div>
                <div class="s-description mt2">…</div>
            </div>
        </label>
    </fieldset>
</div>