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.
This component requires Javascript
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>
</aside><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" aria-label="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="#">
<div class="m-sidenav__title">Title A</div>
<p class="m-sidenav__description">Description for title a in a drawer inside a menu.</p>
</a>
</li>
<li class="-active">
<a href="#">
<div class="m-sidenav__title">Title B</div>
<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" aria-label="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="#">
<div class="m-sidenav__title">Title E</div>
<p class="m-sidenav__description">Description for title a in a drawer inside a menu.</p>
</a>
</li>
<li>
<a href="#">
<div class="m-sidenav__title">Title F</div>
<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" aria-label="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="#">
<div class="m-sidenav__title">Title I</div>
<p class="m-sidenav__description">Description for title a in a drawer inside a menu.</p>
</a>
</li>
<li>
<a href="#">
<div class="m-sidenav__title">Title J</div>
<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" aria-label="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="#">
<div class="m-sidenav__title">Title M</div>
<p class="m-sidenav__description">Description for title a in a drawer inside a menu.</p>
</a>
</li>
<li>
<a href="#">
<div class="m-sidenav__title">Title N</div>
<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>
<aside class="m-sidenav -inverse">
<div class="m-sidenav__content">
<nav>
<ul class="m-sidenav__list">
<li class="-active">
<a href="#drawer-1-1">
<div class="a-icon">
<svg><use xlink:href="#icon-atom"></use></svg>
</div>
<span>Active Item</span>
</a>
</li>
<li>
<a href="#drawer-1-2">
<div class="a-icon">
<svg><use xlink:href="#icon-atom"></use></svg>
</div>
<span>Menu Item</span>
</a>
</li>
<li>
<a href="#drawer-1-3">
<div class="a-icon">
<svg><use xlink:href="#icon-atom"></use></svg>
</div>
<span>Menu Item</span>
</a>
</li>
<li>
<a href="#drawer-1-4">
<div class="a-icon">
<svg><use xlink:href="#icon-atom"></use></svg>
</div>
<span>Menu Item</span>
</a>
</li>
</ul>
</nav>
</div>
</aside><aside class="m-sidenav -inverse">
<div class="m-sidenav__content">
<nav>
<ul class="m-sidenav__list">
<li class="-active">
<a href="#drawer-1-1">
<div class="a-icon">
<svg><use xlink:href="#icon-atom"></use></svg>
</div>
<span>Active Item</span>
</a>
</li>
<li>
<a href="#drawer-1-2">
<div class="a-icon">
<svg><use xlink:href="#icon-atom"></use></svg>
</div>
<span>Menu Item</span>
</a>
</li>
<li>
<a href="#drawer-1-3">
<div class="a-icon">
<svg><use xlink:href="#icon-atom"></use></svg>
</div>
<span>Menu Item</span>
</a>
</li>
<li>
<a href="#drawer-1-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-1-1">
<div class="m-drawer__header">
<button class="a-btn -icon -close" aria-label="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="#">
<div class="m-sidenav__title">Title A</div>
<p class="m-sidenav__description">Description for title a in a drawer inside a menu.</p>
</a>
</li>
<li class="-active">
<a href="#">
<div class="m-sidenav__title">Title B</div>
<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-1-2">
<div class="m-drawer__header">
<button class="a-btn -icon -close" aria-label="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="#">
<div class="m-sidenav__title">Title E</div>
<p class="m-sidenav__description">Description for title a in a drawer inside a menu.</p>
</a>
</li>
<li>
<a href="#">
<div class="m-sidenav__title">Title F</div>
<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-1-3">
<div class="m-drawer__header">
<button class="a-btn -icon -close" aria-label="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="#">
<div class="m-sidenav__title">Title I</div>
<p class="m-sidenav__description">Description for title a in a drawer inside a menu.</p>
</a>
</li>
<li>
<a href="#">
<div class="m-sidenav__title">Title J</div>
<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-1-4">
<div class="m-drawer__header">
<button class="a-btn -icon -close" aria-label="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="#">
<div class="m-sidenav__title">Title M</div>
<p class="m-sidenav__description">Description for title a in a drawer inside a menu.</p>
</a>
</li>
<li>
<a href="#">
<div class="m-sidenav__title">Title N</div>
<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>
Sidenav supports a full spectrum of sizes: -sm, -md and -lg.
The default size is -md.
<aside class="m-sidenav -sm">
<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>
</aside><aside class="m-sidenav -sm">
<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" aria-label="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="#">
<div class="m-sidenav__title">Title A</div>
<p class="m-sidenav__description">Description for title a in a drawer inside a menu.</p>
</a>
</li>
<li class="-active">
<a href="#">
<div class="m-sidenav__title">Title B</div>
<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" aria-label="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="#">
<div class="m-sidenav__title">Title E</div>
<p class="m-sidenav__description">Description for title a in a drawer inside a menu.</p>
</a>
</li>
<li>
<a href="#">
<div class="m-sidenav__title">Title F</div>
<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" aria-label="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="#">
<div class="m-sidenav__title">Title I</div>
<p class="m-sidenav__description">Description for title a in a drawer inside a menu.</p>
</a>
</li>
<li>
<a href="#">
<div class="m-sidenav__title">Title J</div>
<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" aria-label="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="#">
<div class="m-sidenav__title">Title M</div>
<p class="m-sidenav__description">Description for title a in a drawer inside a menu.</p>
</a>
</li>
<li>
<a href="#">
<div class="m-sidenav__title">Title N</div>
<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>
<aside class="m-sidenav -md">
<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>
</aside><aside class="m-sidenav -md">
<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" aria-label="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="#">
<div class="m-sidenav__title">Title A</div>
<p class="m-sidenav__description">Description for title a in a drawer inside a menu.</p>
</a>
</li>
<li class="-active">
<a href="#">
<div class="m-sidenav__title">Title B</div>
<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" aria-label="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="#">
<div class="m-sidenav__title">Title E</div>
<p class="m-sidenav__description">Description for title a in a drawer inside a menu.</p>
</a>
</li>
<li>
<a href="#">
<div class="m-sidenav__title">Title F</div>
<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" aria-label="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="#">
<div class="m-sidenav__title">Title I</div>
<p class="m-sidenav__description">Description for title a in a drawer inside a menu.</p>
</a>
</li>
<li>
<a href="#">
<div class="m-sidenav__title">Title J</div>
<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" aria-label="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="#">
<div class="m-sidenav__title">Title M</div>
<p class="m-sidenav__description">Description for title a in a drawer inside a menu.</p>
</a>
</li>
<li>
<a href="#">
<div class="m-sidenav__title">Title N</div>
<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>
<aside class="m-sidenav -lg">
<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>
</aside><aside class="m-sidenav -lg">
<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" aria-label="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="#">
<div class="m-sidenav__title">Title A</div>
<p class="m-sidenav__description">Description for title a in a drawer inside a menu.</p>
</a>
</li>
<li class="-active">
<a href="#">
<div class="m-sidenav__title">Title B</div>
<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" aria-label="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="#">
<div class="m-sidenav__title">Title E</div>
<p class="m-sidenav__description">Description for title a in a drawer inside a menu.</p>
</a>
</li>
<li>
<a href="#">
<div class="m-sidenav__title">Title F</div>
<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" aria-label="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="#">
<div class="m-sidenav__title">Title I</div>
<p class="m-sidenav__description">Description for title a in a drawer inside a menu.</p>
</a>
</li>
<li>
<a href="#">
<div class="m-sidenav__title">Title J</div>
<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" aria-label="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="#">
<div class="m-sidenav__title">Title M</div>
<p class="m-sidenav__description">Description for title a in a drawer inside a menu.</p>
</a>
</li>
<li>
<a href="#">
<div class="m-sidenav__title">Title N</div>
<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 -lg">
<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>
<a href="#drawer-2-1">
<div class="a-icon">
<svg><use xlink:href="#icon-atom"></use></svg>
</div>
<span>Menu Item</span>
</a>
</li>
[ ... ]
<li>
<a href="#drawer-2-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>
</aside>