Menus

A menu offers a contextual list of actions or functions.

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

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

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

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>

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>

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 d-flex" for="…">
<div class="flex--item mr8">
<input class="s-radio" type="radio" name="…" id="…" role="menuitemradio" checked>
</div>
<div class="flex--item">
<div class="s-label"></div>
<div class="s-description mt2"></div>
</div>
</label>
<label class="s-menu--label d-flex" for="…">
<div class="flex--item mr8">
<input class="s-radio" type="radio" name="…" id="…" role="menuitemradio">
</div>
<div class="flex--item">
<div class="s-label"></div>
<div class="s-description mt2"></div>
</div>
</label>
</fieldset>
</div>