Menu

A menu displays a list of multiple actions on a temporary surface. It appears when the user interacts with a button, tab or other control.

Menu, not expanded

Faucibus vitae aliquet nec ullamcorper sit amet risus. In vitae turpis massa sed elementum tempus egestas sed.
Dolor sed viverra ipsum nunc aliquet bibendum enim facilisis.
Eu augue ut lectus arcu bibendum.

<div class="menu">
    <button class="button button--secondary has-icon-only">
    </button>
    <div class="menu__items">
        <a class="menu__item" href="#">
            Lorem ipsum
        </a>
        <a class="menu__item" href="#">
            Lorem ipsum dolor sit amet
        </a>
        <a class="menu__item" href="#">
            Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor
        </a>
    </div>
</div>

<!-- placeholder text / paragraph -->
<p>
    Faucibus vitae aliquet nec ullamcorper sit amet risus. In vitae turpis massa sed elementum tempus egestas sed. <br />Dolor sed viverra ipsum nunc aliquet bibendum enim facilisis. <br />Eu augue ut lectus arcu bibendum.
</p>

Menu, expanded

Faucibus vitae aliquet nec ullamcorper sit amet risus. In vitae turpis massa sed elementum tempus egestas sed.
Dolor sed viverra ipsum nunc aliquet bibendum enim facilisis.
Eu augue ut lectus arcu bibendum.

<div class="menu is-expanded">
    <button class="button button--secondary has-icon-only">
    </button>
    <div class="menu__items">
        <a class="menu__item" href="#">
            Lorem ipsum
        </a>
        <a class="menu__item" href="#">
            Lorem ipsum dolor sit amet
        </a>
        <a class="menu__item" href="#">
            Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor
        </a>
    </div>
</div>

<!-- placeholder text / paragraph -->
<p>
    Faucibus vitae aliquet nec ullamcorper sit amet risus. In vitae turpis massa sed elementum tempus egestas sed. <br />Dolor sed viverra ipsum nunc aliquet bibendum enim facilisis. <br />Eu augue ut lectus arcu bibendum.
</p>

Menu with icons and sample states

Purus faucibus ornare suspendisse sed nisi lacus sed viverra. Orci nulla pellentesque dignissim enim sit amet. Id velit ut tortor pretium. Adipiscing commodo elit at imperdiet dui accumsan sit amet.
Eget nullam non nisi est.
Sit amet purus gravida quis blandit turpis cursus in. Arcu bibendum at varius vel pharetra vel turpis nunc. Mattis rhoncus urna neque viverra justo nec. Sem fringilla ut morbi tincidunt augue interdum velit euismod.
Nibh venenatis cras sed felis eget velit aliquet sagittis.

<div class="menu is-expanded">
    <button class="button button--secondary has-icon-only">
    </button>
    <div class="menu__items">
        <a class="menu__item" href="#">
            <i aria-hidden="true" class="iconMdsp analysis"></i>Lorem ipsum
        </a>
        <a class="menu__item is-pressed" href="#">
            <i aria-hidden="true" class="iconMdsp audit"></i>Lorem ipsum dolor sit amet
        </a>
        <a class="menu__item" href="#">
            <i aria-hidden="true" class="iconMdsp calendar"></i>Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor
        </a>
        <a class="menu__item is-disabled" href="#">
            <i aria-hidden="true" class="iconMdsp maintenance"></i>Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor
        </a>
        <a class="menu__item" href="#">
            <i aria-hidden="true" class="iconMdsp settings"></i>Lorem ipsum
        </a>
    </div>
</div>

<!-- placeholder text / paragraph -->
<p>
    Purus faucibus ornare suspendisse sed nisi lacus sed viverra. Orci nulla pellentesque dignissim enim sit amet. Id velit ut tortor pretium. Adipiscing commodo elit at imperdiet dui accumsan sit amet.<br />Eget nullam non nisi est.<br />Sit amet purus gravida quis blandit turpis cursus in. Arcu bibendum at varius vel pharetra vel turpis nunc. Mattis rhoncus urna neque viverra justo nec. Sem fringilla ut morbi tincidunt augue interdum velit euismod.<br />Nibh venenatis cras sed felis eget velit aliquet sagittis.
</p>

Menu, default alignment

Faucibus vitae aliquet nec ullamcorper sit amet risus. In vitae turpis massa sed elementum tempus egestas sed.
Dolor sed viverra ipsum nunc aliquet bibendum enim facilisis.
Eu augue ut lectus arcu bibendum.

<div class="menu is-expanded">
    <button class="button button--secondary has-icon-only">
    </button>
    <div class="menu__items">
        <a class="menu__item" href="#">
            Lorem ipsum
        </a>
        <a class="menu__item" href="#">
            Lorem ipsum dolor sit amet
        </a>
        <a class="menu__item" href="#">
            Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor
        </a>
    </div>
</div>

<!-- placeholder text / paragraph -->
<p>
    Faucibus vitae aliquet nec ullamcorper sit amet risus. In vitae turpis massa sed elementum tempus egestas sed. <br />Dolor sed viverra ipsum nunc aliquet bibendum enim facilisis. <br />Eu augue ut lectus arcu bibendum.
</p>

Menu, right alignment

Some very long button to push the menu to the right side

Faucibus vitae aliquet nec ullamcorper sit amet risus. In vitae turpis massa sed elementum tempus egestas sed.
Dolor sed viverra ipsum nunc aliquet bibendum enim facilisis.
Eu augue ut lectus arcu bibendum.

<a class="button button--secondary" href="#">Some very long button to push the menu to the right side</a>
<div class="menu is-expanded is-right-aligned">
    <button class="button button--secondary has-icon-only">
    </button>
    <div class="menu__items">
        <a class="menu__item" href="#">
            Lorem ipsum
        </a>
        <a class="menu__item" href="#">
            Lorem ipsum dolor sit amet
        </a>
        <a class="menu__item" href="#">
            Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor
        </a>
    </div>
</div>

<!-- placeholder text / paragraph -->
<p>
    Faucibus vitae aliquet nec ullamcorper sit amet risus. In vitae turpis massa sed elementum tempus egestas sed. <br />Dolor sed viverra ipsum nunc aliquet bibendum enim facilisis. <br />Eu augue ut lectus arcu bibendum.
</p>

Menu, bottom right alignment

Faucibus vitae aliquet nec ullamcorper sit amet risus. In vitae turpis massa sed elementum tempus egestas sed.
Dolor sed viverra ipsum nunc aliquet bibendum enim facilisis.
Eu augue ut lectus arcu bibendum.

Some very long button to push the menu to the right side
<!-- placeholder text / paragraph -->
<p>
    Faucibus vitae aliquet nec ullamcorper sit amet risus. In vitae turpis massa sed elementum tempus egestas sed. <br />Dolor sed viverra ipsum nunc aliquet bibendum enim facilisis. <br />Eu augue ut lectus arcu bibendum.
</p>

<a class="button button--secondary" href="#">Some very long button to push the menu to the right side</a>
<div class="menu is-expanded is-right-aligned is-bottom-aligned">
    <button class="button button--secondary has-icon-only">
    </button>
    <div class="menu__items">
        <a class="menu__item" href="#">
            Lorem ipsum
        </a>
        <a class="menu__item" href="#">
            Lorem ipsum dolor sit amet
        </a>
        <a class="menu__item" href="#">
            Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor
        </a>
    </div>
</div>

Menu, bottom alignment

Faucibus vitae aliquet nec ullamcorper sit amet risus. In vitae turpis massa sed elementum tempus egestas sed.
Dolor sed viverra ipsum nunc aliquet bibendum enim facilisis.
Eu augue ut lectus arcu bibendum.

Some very long button to push the menu to the right side
<!-- placeholder text / paragraph -->
<p>
    Faucibus vitae aliquet nec ullamcorper sit amet risus. In vitae turpis massa sed elementum tempus egestas sed. <br />Dolor sed viverra ipsum nunc aliquet bibendum enim facilisis. <br />Eu augue ut lectus arcu bibendum.
</p>

<a class="button button--secondary" href="#">Some very long button to push the menu to the right side</a>
<div class="menu is-expanded is-bottom-aligned">
    <button class="button button--secondary has-icon-only">
    </button>
    <div class="menu__items">
        <a class="menu__item" href="#">
            Lorem ipsum
        </a>
        <a class="menu__item" href="#">
            Lorem ipsum dolor sit amet
        </a>
        <a class="menu__item" href="#">
            Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor
        </a>
    </div>
</div>

Usage

ElementClassDescription
.menu .is-expanded Shows the menu / the items of the menu, also sets the visual state of the menu control.
.menu__item .is-pressed Highlights the active menu item.
.menu__item .is-disabled Disabled the menu item visually and for mouse events.
.menu .is-right-aligned, .is-bottom-aligned Aligns the menu in relation to the menu control. Classes can be combined to acchieve different alignments.
Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top