Menus

.Menu

Menus are used when many actions, links or options need to be displayed.

A Menu should always contain the Menu-button, Menu-list and Menu-item elements. For large menus the Menu-separator can also be used.

They can be used standalone or be combined with other components into a Set.

For item actions (as opposed to navigational menus) it is preferrable to use a flat set or single buttons instead of a menu if there are three actions or less.

Example

Actions
  • Edit
  • Delete
  • More actions
  • Print

Markup

<div class="Menu " style="margin-left: 5rem;">
    <span class="Menu-button">Actions</span>
    <ul class="Menu-list">
        <li><span class="Menu-item">Edit</span></li>
        <li><span class="Menu-item">Delete</span></li>
        <li><span class="Menu-separator">More actions</span></li>
        <li><span class="Menu-item">Print</span></li>
    </ul>
</div>

Menu alignment

By default menus are right aligned (they are commonly placed to the right in the control panels). However, you can explictly set the direction with a modifier.

Modifiers

Menu--left
Use this for a left aligned menu.
Actions
  • Edit
  • Delete
  • More actions
  • Print
Menu--right
Use this for a right aligned menu (default).
Actions
  • Edit
  • Delete
  • More actions
  • Print

Markup

<div class="Menu [modifier class]" style="margin-left: 5rem;">
    <span class="Menu-button">Actions</span>
    <ul class="Menu-list">
        <li><span class="Menu-item">Edit</span></li>
        <li><span class="Menu-item">Delete</span></li>
        <li><span class="Menu-separator">More actions</span></li>
        <li><span class="Menu-item">Print</span></li>
    </ul>
</div>

Menu sections

Menus in the secondary sections navigation bar use the Menu--sections modifier to match the navigation bar styling and to adapt when the view port shrinks.

The example markup is wrapped in a Set--section to set a background color for the Menu, since it is inherited from the parent element.

(Resize your browser to see it in action.)

Modifiers

Menu--sections
Use this secondary navigation bars.

Markup

<div style="border: 1px solid #C90062; text-align: right;">
    <ul class="Set Set--sections is-opened">
        <li class="Set-item">
            <div class="Menu Menu--sections">
                <span class="Menu-button">Email</span>
                <ul class="Menu-list">
                    <li><a class="Menu-item" href="#">Email accounts</a></li>
                    <li><a class="Menu-item" href="#">Email forwards</a></li>
                    <li><a class="Menu-item" href="#">Default email account</a></li>
                    <li><a class="Menu-item" href="#">Mailing lists</a></li>
                </ul>
            </div>
        </li>
    </ul>
</div>