The sidenav is a left-aligned navigational component.
Usage
When there are many navigation links a side navigation provides overflow and scrolling to the list of links. Users are informed when a navigation item is active.
Use the sidenav:
- For links secondary to the links in the header or subnav
- For a navigation schema with a deep hierarchy
- When the header and subnav cannot accommodate the required links
The sidenav works best in desktop applications. Scroll when the content exceeds the viewport.
Code & Examples
Structure
Clarity application layout depends on a specific DOM structure for layout to work properly. SIde nav fits into this and has a specific place in the DOM hierarchy. A Sidenav container is a sibling element of the content area.
<div class="main-container">
<header class="header header-6">
...
</header>
<div class="content-container">
<nav class="sidenav">
<ul class="nav-list">
<a class="nav-link">Link 1</a>
<a class="nav-link">Link 2</a>
<a class="nav-link active">Link 3</a>
<a class="nav-link">Link 4</a>
<a class="nav-link">Link 5</a>
<a class="nav-link">Link 6</a>
<a class="nav-link">Link 7</a>
<a class="nav-link">Link 8</a>
<a class="nav-link active">Link 9</a>
<a class="nav-link">Link 10</a>
</ul>
</nav>
<div class="content-area">
...
</div>
</div>
</div>
Navigation Groups
Navigation groups provide a way to group similar or related links together. When grouping links, do not make the heading a link.
<div class="main-container">
<header class="header header-6">
...
</header>
<div class="content-container">
<nav class="sidenav">
<section class="sidenav-content">
<a href="javascript:void(0)" class="nav-link active">
Nav Element 1
</a>
<a href="javascript:void(0)" class="nav-link">
Nav Element 2
</a>
<section class="nav-group collapsible">
<input id="tabexample1" type="checkbox" />
<label for="tabexample1">Collapsible Nav Element</label>
<ul class="nav-list">
<li><a class="nav-link">Link 1</a></li>
<li><a class="nav-link">Link 2</a></li>
</ul>
</section>
<section class="nav-group">
<input id="tabexample2" type="checkbox" />
<label for="tabexample2">Default Nav Element</label>
<ul class="nav-list">
<li><a class="nav-link">Link 1</a></li>
<li><a class="nav-link">Link 2</a></li>
<li><a class="nav-link active">Link 3</a></li>
<li><a class="nav-link">Link 4</a></li>
<li><a class="nav-link">Link 5</a></li>
<li><a class="nav-link">Link 6</a></li>
</ul>
</section>
</section>
</nav>
<div class="content-area">
...
</div>
</div>
</div>
Icons
Using Icons Include icons when you want to provide a more appealing visual look than just text.
<div class="main-container">
<header class="header header-6">
...
</header>
<div class="content-container">
<nav class="sidenav">
<section class="sidenav-content">
<a class="nav-link nav-icon"><cds-icon shape="home"></cds-icon> Home</a>
<a class="nav-link"><cds-icon shape="cog"></cds-icon> Settings</a>
<a class="nav-link active"><cds-icon shape="user"></cds-icon> Users</a>
<a class="nav-link"><cds-icon shape="Folder-open"></cds-icon> Files</a>
<a class="nav-link"><cds-icon shape="Cloud"></cds-icon> Data</a>
<a class="nav-link"><cds-icon shape="image-gallery"> Photos</cds-icon> 6</a>
<a class="nav-link"><cds-icon shape="video-gallery"></cds-icon> Videos</a>
</section>
</nav>
<div class="content-area">
...
</div>
</div>
</div>