Side Navigation
The left navigation area can be used to display navigation structures with links that change the content in the main area. The side navigation consists of two container section: the Main Navigation Section (top-aligned) with links used to navigate within the user’s current work context, and Utility Section (bottom-aligned) that contains links to additional information. Each of the sections uses a Nested List to display the navigation items.
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.
Side Navigation with one level - text-only, cozy mode
There is only one level of navigation; all further navigation is shown in the content area.
The lists in both sections (Main and Utility) should have the fd-nested-list--text-only modifier class.
<nav class="fd-side-nav">
<div class="fd-side-nav__main-navigation">
<ul class="fd-nested-list fd-nested-list--text-only">
<li class="fd-nested-list__item">
<a class="fd-nested-list__link" href="#">
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
</li>
<li class="fd-nested-list__item">
<a class="fd-nested-list__link is-selected" href="#">
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
</li>
<li class="fd-nested-list__item">
<a class="fd-nested-list__link" href="#">
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
</li>
<li class="fd-nested-list__item">
<a class="fd-nested-list__link" href="#">
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
</li>
</ul>
</div>
<div class="fd-side-nav__utility">
<ul class="fd-nested-list fd-nested-list--text-only">
<li class="fd-nested-list__item">
<a class="fd-nested-list__link" href="#">
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
</li>
<li class="fd-nested-list__item">
<a class="fd-nested-list__link" href="#">
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
</li>
</ul>
</div>
</nav>Side Navigation with one level - with icons, cozy mode
<nav class="fd-side-nav">
<div class="fd-side-nav__main-navigation">
<ul class="fd-nested-list">
<li class="fd-nested-list__item">
<a class="fd-nested-list__link" href="#">
<span class="fd-nested-list__icon sap-icon--home"></span>
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
</li>
<li class="fd-nested-list__item">
<a class="fd-nested-list__link is-selected" href="#">
<span class="fd-nested-list__icon sap-icon--calendar"></span>
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
</li>
<li class="fd-nested-list__item">
<a class="fd-nested-list__link" href="#">
<span class="fd-nested-list__icon sap-icon--employee"></span>
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
</li>
<li class="fd-nested-list__item">
<a class="fd-nested-list__link" href="#">
<span class="fd-nested-list__icon sap-icon--activities"></span>
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
</li>
</ul>
</div>
<div class="fd-side-nav__utility">
<ul class="fd-nested-list">
<li class="fd-nested-list__item">
<a class="fd-nested-list__link" href="#">
<span class="fd-nested-list__icon sap-icon--compare"></span>
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
</li>
<li class="fd-nested-list__item">
<a class="fd-nested-list__link" href="#">
<span class="fd-nested-list__icon sap-icon--chain-link"></span>
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
</li>
</ul>
</div>
</nav>Side navigation with multiple levels - cozy mode
Use this when there is more than one level of hierarchy in the left navigation. The entries on the first level are just group headers(don’t trigger navigation themselves). It’s recommended to use up to two levels of navigation. For more levels of navigation, use the content area.
<nav class="fd-side-nav">
<div class="fd-side-nav__main-navigation">
<ul class="fd-nested-list fd-nested-list--text-only">
<li class="fd-nested-list__item">
<a class="fd-nested-list__link" href="#">
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
</li>
<li class="fd-nested-list__item">
<a class="fd-nested-list__link is-selected" href="#">
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
</li>
<li class="fd-nested-list__item">
<a class="fd-nested-list__link has-child" href="#" aria-controls="EX100L2" aria-haspopup="true">
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
<ul class="fd-nested-list level-2" id="EX100L2" aria-hidden="true">
<li class="fd-nested-list__item">
<a class="fd-nested-list__link" href="#">
<span class="fd-nested-list__title">Level 2 Item</span>
</a>
</li>
<li class="fd-nested-list__item">
<a class="fd-nested-list__link" href="#">
<span class="fd-nested-list__title">Level 2 Item</span>
</a>
</li>
<li class="fd-nested-list__item">
<a class="fd-nested-list__link" href="#">
<span class="fd-nested-list__title">Level 2 Item</span>
</a>
</li>
</ul>
</li>
<li class="fd-nested-list__item">
<a class="fd-nested-list__link" href="#">
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
</li>
<li class="fd-nested-list__item">
<a class="fd-nested-list__link" href="#">
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
</li>
</ul>
</div>
<div class="fd-side-nav__utility">
<ul class="fd-nested-list fd-nested-list--text-only">
<li class="fd-nested-list__item">
<a class="fd-nested-list__link" href="#">
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
</li>
<li class="fd-nested-list__item">
<a class="fd-nested-list__link" href="#">
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
</li>
</ul>
</div>
</nav>Side navigation with 2 levels - with icons and group headers, cozy mode
<nav class="fd-side-nav">
<div class="fd-side-nav__main-navigation">
<ul class="fd-nested-list">
<li class="fd-nested-list__group-header">
Group Header 1
</li>
<li class="fd-nested-list__item">
<a class="fd-nested-list__link" href="#">
<span class="fd-nested-list__icon sap-icon--home"></span>
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
</li>
<li class="fd-nested-list__item">
<a class="fd-nested-list__link" href="#">
<span class="fd-nested-list__icon sap-icon--calendar"></span>
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
</li>
<li class="fd-nested-list__item">
<a class="fd-nested-list__link is-selected has-child" href="#" aria-controls="EX400L2" aria-haspopup="true">
<span class="fd-nested-list__icon sap-icon--employee"></span>
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
<ul class="fd-nested-list fd-nested-list--text-only level-2" id="EX400L2" aria-hidden="true">
<li class="fd-nested-list__item">
<a class="fd-nested-list__link" href="#">
<span class="fd-nested-list__title">Level 2 Item</span>
</a>
</li>
<li class="fd-nested-list__item">
<a class="fd-nested-list__link is-selected"
href="#" aria-controls="EX400L3" aria-haspopup="true">
<span class="fd-nested-list__title">Level 2 Item</span>
</a>
</li>
<li class="fd-nested-list__item">
<a class="fd-nested-list__link" href="#">
<span class="fd-nested-list__title">Level 2 Item</span>
</a>
</li>
</ul>
</li>
<li class="fd-nested-list__item">
<a class="fd-nested-list__link" href="#">
<span class="fd-nested-list__icon sap-icon--activities"></span>
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
</li>
<li class="fd-nested-list__group-header">
Group Header 2
</li>
<li class="fd-nested-list__item">
<a class="fd-nested-list__link" href="#">
<span class="fd-nested-list__icon sap-icon--bar-chart"></span>
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
</li>
<li class="fd-nested-list__item">
<a class="fd-nested-list__link" href="#">
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
</li>
</ul>
</div>
<div class="fd-side-nav__utility">
<ul class="fd-nested-list">
<li class="fd-nested-list__item">
<a class="fd-nested-list__link" href="#">
<span class="fd-nested-list__icon sap-icon--compare"></span>
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
</li>
<li class="fd-nested-list__item">
<a class="fd-nested-list__link" href="#">
<span class="fd-nested-list__icon sap-icon--chain-link"></span>
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
</li>
</ul>
</div>
</nav>Side navigation with 2 levels - compact mode
In compact mode the dimensions of the controls are reduced, allowing more information to be displayed. This mode is suggested for devices operated by mouse and keyboard.
The lists in both sections (Main and Utility) should have the fd-nested-list--compact modifier class.
<nav class="fd-side-nav">
<div class="fd-side-nav__main-navigation">
<ul class="fd-nested-list fd-nested-list--compact">
<li class="fd-nested-list__group-header">
Group Header 1
</li>
<li class="fd-nested-list__item">
<a class="fd-nested-list__link" href="#">
<span class="fd-nested-list__icon sap-icon--home"></span>
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
</li>
<li class="fd-nested-list__item">
<a class="fd-nested-list__link is-selected" href="#">
<span class="fd-nested-list__icon sap-icon--calendar"></span>
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
</li>
<li class="fd-nested-list__item">
<a class="fd-nested-list__link has-child" href="#" aria-controls="EX500L2" aria-haspopup="true">
<span class="fd-nested-list__icon sap-icon--employee"></span>
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
<ul class="fd-nested-list fd-nested-list--text-only level-2" id="EX500L2" aria-hidden="true">
<li class="fd-nested-list__item">
<a class="fd-nested-list__link" href="#">
<span class="fd-nested-list__title">Level 2 Item</span>
</a>
</li>
<li class="fd-nested-list__item">
<a class="fd-nested-list__link"
href="#" aria-controls="EX500L3" aria-haspopup="true">
<span class="fd-nested-list__title">Level 2 Item</span>
</a>
</li>
<li class="fd-nested-list__item">
<a class="fd-nested-list__link" href="#">
<span class="fd-nested-list__title">Level 2 Item</span>
</a>
</li>
</ul>
</li>
<li class="fd-nested-list__item">
<a class="fd-nested-list__link" href="#">
<span class="fd-nested-list__icon sap-icon--activities"></span>
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
</li>
<li class="fd-nested-list__group-header">
Group Header 2
</li>
<li class="fd-nested-list__item">
<a class="fd-nested-list__link" href="#">
<span class="fd-nested-list__icon sap-icon--bar-chart"></span>
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
</li>
<li class="fd-nested-list__item">
<a class="fd-nested-list__link" href="#">
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
</li>
</ul>
</div>
<div class="fd-side-nav__utility">
<ul class="fd-nested-list fd-nested-list--compact">
<li class="fd-nested-list__item">
<a class="fd-nested-list__link" href="#">
<span class="fd-nested-list__icon sap-icon--compare"></span>
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
</li>
<li class="fd-nested-list__item">
<a class="fd-nested-list__link" href="#">
<span class="fd-nested-list__icon sap-icon--chain-link"></span>
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
</li>
</ul>
</div>
</nav>Side navigation with icons - condensed state
Use the fd-side-nav--condensed modifier class for condensed state.
<nav class="fd-side-nav fd-side-nav--condensed">
<div class="fd-side-nav__main-navigation">
<ul class="fd-nested-list">
<li class="fd-nested-list__group-header">
Group Header 1
</li>
<li class="fd-nested-list__item">
<a class="fd-nested-list__link" href="#">
<span class="fd-nested-list__icon sap-icon--home"></span>
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
</li>
<li class="fd-nested-list__item">
<a class="fd-nested-list__link" href="#">
<span class="fd-nested-list__icon sap-icon--calendar"></span>
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
</li>
<li class="fd-nested-list__item">
<a class="fd-nested-list__link is-selected has-child" href="#">
<span class="fd-nested-list__icon sap-icon--employee"></span>
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
</li>
<li class="fd-nested-list__item">
<a class="fd-nested-list__link" href="#">
<span class="fd-nested-list__icon sap-icon--activities"></span>
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
</li>
<li class="fd-nested-list__group-header">
Group Header 2
</li>
<li class="fd-nested-list__item">
<a class="fd-nested-list__link" href="#">
<span class="fd-nested-list__icon sap-icon--bar-chart"></span>
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
</li>
</ul>
</div>
<div class="fd-side-nav__utility">
<ul class="fd-nested-list">
<li class="fd-nested-list__item">
<a class="fd-nested-list__link" href="#">
<span class="fd-nested-list__icon sap-icon--compare"></span>
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
</li>
<li class="fd-nested-list__item">
<a class="fd-nested-list__link" href="#">
<span class="fd-nested-list__icon sap-icon--chain-link"></span>
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
</li>
</ul>
</div>
</nav>Side navigation with icons - condensed state, compact mode
<nav class="fd-side-nav fd-side-nav--condensed">
<div class="fd-side-nav__main-navigation">
<ul class="fd-nested-list fd-nested-list--compact">
<li class="fd-nested-list__group-header">
Group Header 1
</li>
<li class="fd-nested-list__item">
<a class="fd-nested-list__link" href="#">
<span class="fd-nested-list__icon sap-icon--home"></span>
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
</li>
<li class="fd-nested-list__item">
<a class="fd-nested-list__link" href="#">
<span class="fd-nested-list__icon sap-icon--calendar"></span>
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
</li>
<li class="fd-nested-list__item">
<a class="fd-nested-list__link is-selected has-child" href="#">
<span class="fd-nested-list__icon sap-icon--employee"></span>
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
</li>
<li class="fd-nested-list__item">
<a class="fd-nested-list__link" href="#">
<span class="fd-nested-list__icon sap-icon--activities"></span>
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
</li>
<li class="fd-nested-list__group-header">
Group Header 2
</li>
<li class="fd-nested-list__item">
<a class="fd-nested-list__link" href="#">
<span class="fd-nested-list__icon sap-icon--bar-chart"></span>
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
</li>
</ul>
</div>
<div class="fd-side-nav__utility">
<ul class="fd-nested-list fd-nested-list--compact">
<li class="fd-nested-list__item">
<a class="fd-nested-list__link" href="#">
<span class="fd-nested-list__icon sap-icon--compare"></span>
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
</li>
<li class="fd-nested-list__item">
<a class="fd-nested-list__link" href="#">
<span class="fd-nested-list__icon sap-icon--chain-link"></span>
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
</li>
</ul>
</div>
</nav>