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--title`	`.s-menu`	Adds appropriate styling for a title within a menu
`.s-menu--divider`	`.s-menu`	Styles a divider and adds the right amount of spacing
`.s-menu--label`	`.s-menu`	This gets applied to radio button labels within a menu for proper cursors and aesthetics

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. Menu items are either links or buttons styled with the block link component, that can optionally be selected or have destructive styling. 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">
    <ul class="s-menu mxn12 myn8" role="menu">
        <li role="menuitem">
            <a href="…" class="s-block-link">…</a>
        </li>
        <li role="menuitem">
            <button class="s-block-link">…</button>
        </li>
    </ul>
</div>

<div class="s-card px0 py4">
    <ul class="s-menu" role="menu">
        …
    </ul>
</div>

<ul class="s-menu" role="menu">
    <li role="menuitem">
        <a href="…" class="s-block-link px0">…</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">
    <ul class="s-menu mxn12 myn8" role="menu">
        <li class="s-menu--title" role="separator">…</li>
        <li role="menuitem">
            <a href="…" class="s-block-link">…</a>
        </li>
        <li class="s-menu--divider" role="separator"></li>
        <li role="menuitem">
            <a href="…" class="s-block-link s-block-link__danger">…</a>
        </li>
    </ul>
</div>

Selected states

Section titled Selected states

Our menus also offer selected states via the block link component with its various configurations.

<div class="s-popover">
    <ul class="s-menu mxn12 myn8" role="menu">
        <li role="menuitem">
            <a href="…" class="s-block-link s-block-link__left is-selected">…</a>
        </li>
    </ul>
</div>

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-popover">
    <fieldset class="s-menu mxn12 myn8" role="menu">
        <legend class="s-menu--title">…</legend>
        <label class="s-menu--label grid" for="…">
            <div class="grid--cell mr8">
                <input class="s-radio" type="radio" name="…" id="…" role="menuitemradio" checked>
            </div>
            <div class="grid--cell">
                <div class="s-label">…</div>
                <div class="s-description mt2">…</div>
            </div>
        </label>
        <label class="s-menu--label grid" for="…">
            <div class="grid--cell mr8">
                <input class="s-radio" type="radio" name="…" id="…" role="menuitemradio">
            </div>
            <div class="grid--cell">
                <div class="s-label">…</div>
                <div class="s-description mt2">…</div>
            </div>
        </label>
    </fieldset>
</div>

Edit on GitHub