Mega Menu

Available since 1.0.0 Remove 1.7.0

Mega menu is used in conjunction with Context Switcher within the Global Navigation (link to Global Nav page) and supports two levels within a hierarchy.

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.

Default Mega Menu

<nav class="fd-mega-menu" id="">
    <div class="fd-mega-menu__group">
        <h3 class="fd-mega-menu__title">Group Name</h3>
        <ul class="fd-mega-menu__list">
            <li class="fd-mega-menu__item">
                <a class="fd-mega-menu__link" href="#">
                    item link
                </a>
            </li>
            <li class="fd-mega-menu__item">
                <a class="fd-mega-menu__link has-child" href="#" aria-controls="kIGVv418" aria-haspopup="true">
                    item link
                </a>
                <ul class="fd-mega-menu__sublist" id="kIGVv418" aria-hidden="true">
                    <li class="fd-mega-menu__subitem">
                        <a class="fd-mega-menu__sublink" href="#">
                            Link
                        </a>
                    </li>
                    <li class="fd-mega-menu__subitem">
                        <a class="fd-mega-menu__sublink" href="#">
                            Link
                        </a>
                    </li>
                    <li class="fd-mega-menu__subitem">
                        <a class="fd-mega-menu__sublink" href="#">
                            Link
                        </a>
                    </li>
                </ul>
            </li>
            <li class="fd-mega-menu__item">
                <a class="fd-mega-menu__link" href="#">
                    item link
                </a>
            </li>
        </ul>
    </div>
    <div class="fd-mega-menu__group">
        <h3 class="fd-mega-menu__title">Group Name</h3>
        <ul class="fd-mega-menu__list">
            <li class="fd-mega-menu__item">
                <a class="fd-mega-menu__link" href="#">
                    item link
                </a>
            </li>
            <li class="fd-mega-menu__item">
                <a class="fd-mega-menu__link has-child" href="#" aria-controls="iOnP0943" aria-haspopup="true">
                    item link
                </a>
                <ul class="fd-mega-menu__sublist" id="iOnP0943" aria-hidden="true">
                    <li class="fd-mega-menu__subitem">
                        <a class="fd-mega-menu__sublink" href="#">
                            Link
                        </a>
                    </li>
                    <li class="fd-mega-menu__subitem">
                        <a class="fd-mega-menu__sublink" href="#">
                            Link
                        </a>
                    </li>
                    <li class="fd-mega-menu__subitem">
                        <a class="fd-mega-menu__sublink" href="#">
                            Link
                        </a>
                    </li>
                </ul>
            </li>
            <li class="fd-mega-menu__item">
                <a class="fd-mega-menu__link" href="#">
                    item link
                </a>
            </li>
        </ul>
    </div>
</nav>