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>