Menu

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

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

Although the following examples use the <h3> tag for the title element, the styling provided by Fundamental Library Styles 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 with very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long header</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 fd-menu__list--seperated">
        <li>
            <a href="#" class="fd-menu__item">
                <span class="fd-menu__addon-before"></span>
                Option 1 with very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long header
            </a>
        </li>
        <li>
        <div class="container" href="#">
            <a href="#" class="fd-menu__item">
                <span class="fd-menu__addon-before sap-icon--accept"></span>Option 2
            </a>
        </div>    
        </li>
        <li>
            <a href="#" class="fd-menu__item">
                <span class="fd-menu__addon-before"></span>
                Option 3
            </a>
        </li>
        <li>
            <a href="#" class="fd-menu__item">
                <span class="fd-menu__addon-before"></span>
                Option 4
                </a>
        </li>
    </ul>
</nav>