Use the sidenav to add a navigation menu with a drawer for deeper navigation. It responds differently to three different media queries for screen sizes. In the smallest one, only the icon is visible.
You can use the -active class in the following elements:
ul.m-sidenav__list > li.drawerul.m-sidenav__drawer-list > li<aside class="m-sidenav">
<div class="m-sidenav__content">
<nav>
<ul class="m-sidenav__list">
<li class="-active">
<a href="#drawer-0-1">
<div class="a-icon">
<svg><use xlink:href="#icon-atom"></use></svg>
</div>
<span>Active Item</span>
</a>
</li>
<li>
<a href="#drawer-0-2">
<div class="a-icon">
<svg><use xlink:href="#icon-atom"></use></svg>
</div>
<span>Menu Item</span>
</a>
</li>
<li>
<a href="#drawer-0-3">
<div class="a-icon">
<svg><use xlink:href="#icon-atom"></use></svg>
</div>
<span>Menu Item</span>
</a>
</li>
<li>
<a href="#drawer-0-4">
<div class="a-icon">
<svg><use xlink:href="#icon-atom"></use></svg>
</div>
<span>Menu Item</span>
</a>
</li>
</ul>
</nav>
</div>
<div class="m-sidenav__drawers">
<div class="m-drawer -left -active" id="drawer-0-1">
<div class="m-drawer__header">
<button class="a-btn -icon -close">
<div class="a-btn__content"><i class="a-icon icon-x"></i></div>
</button>
</div>
<div class="m-drawer__content">
<ul class="m-sidenav__drawer-list">
<li>
<a href="#">
<h5 class="m-sidenav__title">Title A</h5>
<p class="m-sidenav__description">Description for title a in a drawer inside a menu.</p>
</a>
</li>
<li class="-active">
<a href="#">
<h5 class="m-sidenav__title">Title B</h5>
<p class="m-sidenav__description">Description for title a in a drawer inside a menu.</p>
</a>
</li>
<li>
<a href="#">
<span class="m-sidenav__title">Title C</span>
</a>
</li>
<li>
<a href="#">
<span class="m-sidenav__title">Title D</span>
</a>
</li>
</ul>
</div>
</div>
<div class="m-drawer -left" id="drawer-0-2">
<div class="m-drawer__header">
<button class="a-btn -icon -close">
<div class="a-btn__content"><i class="a-icon icon-x"></i></div>
</button>
</div>
<div class="m-drawer__content">
<ul class="m-sidenav__drawer-list">
<li>
<a href="#">
<h5 class="m-sidenav__title">Title E</h5>
<p class="m-sidenav__description">Description for title a in a drawer inside a menu.</p>
</a>
</li>
<li>
<a href="#">
<h5 class="m-sidenav__title">Title F</h5>
<p class="m-sidenav__description">Description for title a in a drawer inside a menu.</p>
</a>
</li>
<li>
<a href="#">
<span class="m-sidenav__title">Title G</span>
</a>
</li>
<li>
<a href="#">
<span class="m-sidenav__title">Title H</span>
</a>
</li>
</ul>
</div>
</div>
<div class="m-drawer -left" id="drawer-0-3">
<div class="m-drawer__header">
<button class="a-btn -icon -close">
<div class="a-btn__content"><i class="a-icon icon-x"></i></div>
</button>
</div>
<div class="m-drawer__content">
<ul class="m-sidenav__drawer-list">
<li>
<a href="#">
<h5 class="m-sidenav__title">Title I</h5>
<p class="m-sidenav__description">Description for title a in a drawer inside a menu.</p>
</a>
</li>
<li>
<a href="#">
<h5 class="m-sidenav__title">Title J</h5>
<p class="m-sidenav__description">Description for title a in a drawer inside a menu.</p>
</a>
</li>
<li>
<a href="#">
<span class="m-sidenav__title">Title K</span>
</a>
</li>
<li>
<a href="#">
<span class="m-sidenav__title">Title L</span>
</a>
</li>
</ul>
</div>
</div>
<div class="m-drawer -left" id="drawer-0-4">
<div class="m-drawer__header">
<button class="a-btn -icon -close">
<div class="a-btn__content"><i class="a-icon icon-x"></i></div>
</button>
</div>
<div class="m-drawer__content">
<ul class="m-sidenav__drawer-list">
<li>
<a href="#">
<h5 class="m-sidenav__title">Title M</h5>
<p class="m-sidenav__description">Description for title a in a drawer inside a menu.</p>
</a>
</li>
<li>
<a href="#">
<h5 class="m-sidenav__title">Title N</h5>
<p class="m-sidenav__description">Description for title a in a drawer inside a menu.</p>
</a>
</li>
<li>
<a href="#">
<span class="m-sidenav__title">Title O</span>
</a>
</li>
<li>
<a href="#">
<span class="m-sidenav__title">Title P</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</aside>
You can use this layout to ensure the sidenav works correctly.
<div class="-d--flex">
<aside class="m-sidenav -flex--shrink0">
[ Sidenav content ]
</aside>
<div class="-flex--grow1">
[ Page content ]
</div>
</div>
It is possible to include additional content above and below the menu in the side bar. You will have to develop
the responsive behavior of any added content. Put your content inside m-sidenav__content, above and/or
below the nav element.
TipYou can use the Flex utility classes to position the elements inside m-sidenav__content.
<aside class="m-sidenav">
<div class="m-sidenav__content -d--flex -flex--column">
<div class="-d--flex -flex--column -flex-lg--row -align-items--center -p--2">
<div class="a-avatar -mr-lg--2">
<img src="../../assets/images/avatar.jpg" alt="User name">
</div>
<span class="-text -d--none -d-md--block" style="white-space:nowrap;text-overflow:ellipsis;overflow:hidden;">User name</span>
</div>
<nav class="-flex--grow1">
<ul class="m-sidenav__list">
<li class="-active">
<a href="#drawer-0-1">
<div class="a-icon">
<svg><use xlink:href="#icon-atom"></use></svg>
</div>
<span>Active Item</span>
</a>
</li>
[ ... ]
<li>
<a href="#drawer-0-4">
<div class="a-icon">
<svg><use xlink:href="#icon-atom"></use></svg>
</div>
<span>Menu Item</span>
</a>
</li>
</ul>
</nav>
<div class="-d--flex -flex--column -flex-lg--row -align-items--center -p--2 -bt--1">
<div class="a-avatar -mr-lg--2">
<img src="../../assets/images/avatar.jpg" alt="User name">
</div>
<span class="-text -d--none -d-md--block" style="white-space:nowrap;text-overflow:ellipsis;overflow:hidden;">User name</span>
</div>
</div>
<div class="m-sidenav__drawers">
[ ... ]
</div>
</aside>