Menu

Available since 1.1.0

The menu component is the listing structure with optional headers to create menus.

Commonly used as the contents when composing “dropdowns”, “contextual menus”, “mega menu”, etc, when paired with the popover component.


The basic stucture of a menu.

<nav class="fd-menu">
    <ul class="fd-menu__list">
        <li><a href="#" class="fd-menu__item">Option 1</a></li>
        <li><a href="#" class="fd-menu__item">Option 2</a></li>
        <li><a href="#" class="fd-menu__item">Option 3</a></li>
        <li><a href="#" class="fd-menu__item">Option 4</a></li>
    </ul>
</nav>

Use a modifier on the list element to add separators between the items.

<nav class="fd-menu">
    <ul class="fd-menu__list fd-menu__list--separated">
      <li><a href="#" class="fd-menu__item">Option 1</a>
    </li>
      <li><a href="#" class="fd-menu__item">Option 2</a>
    </li>
      <li><a href="#" class="fd-menu__item">Option 3</a>
    </li>
      <li><a href="#" class="fd-menu__item">Option 4</a>
    </li>
    </ul>
</nav>

You can optionally add hierarchy to menus by grouping sub-menus and adding headers.

<nav class="fd-menu">
    <ul class="fd-menu__list">
        <li><a href="#" class="fd-menu__item">Option 1</a></li>
        <li><a href="#" class="fd-menu__item">Option 2</a></li>
        <li><a href="#" class="fd-menu__item">Option 3</a></li>
    </ul>
    <div class="fd-menu__group">
        <h1 class="fd-menu__title">Group Header</h1>
        <ul class="fd-menu__list">
            <li><a href="#" class="fd-menu__item">Option 4</a></li>
            <li><a href="#" class="fd-menu__item">Option 5</a></li>
            <li><a href="#" class="fd-menu__item">Option 6</a></li>
        </ul>
    </div>
</nav>

This is an additional container that can be used for an icon or checkbox before the meni item text.

<nav class="fd-menu fd-menu--addon-before">
    <ul class="fd-menu__list">
        <li>
            <div class="fd-menu__addon-before"></div>
            <a href="#" class="fd-menu__item">Option 1</a>
        </li>
        <li>
            <div class="fd-menu__addon-before"><span class="sap-icon--accept"></span></div>
            <a href="#" class="fd-menu__item">Option 2</a>
        </li>
        <li>
            <div class="fd-menu__addon-before"></div>
            <a href="#" class="fd-menu__item">Option 3</a>
        </li>
        <li>
            <div class="fd-menu__addon-before"></div>
            <a href="#" class="fd-menu__item">Option 4</a>
        </li>
    </ul>
</nav>