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.

Although the following examples use the <h3> tag for the title element, the styling provided by SAP Fundamentals will remain consistent for any heading level used. <h1> should be reserved for the page title.

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">
        <h3 class="fd-menu__title">Group Header</h3>
        <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>