Sidenav
Examples
Base
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<aside class="chi-sidenav" id="sidenav-0">
<div class="chi-sidenav__content">
<nav>
<ul class="chi-sidenav__list">
<li class="-active">
<a href="#drawer-0-1">
<i class="chi-icon icon-atom"></i>
<span>Active Item</span>
</a>
</li>
<li>
<a href="#drawer-0-2">
<i class="chi-icon icon-atom"></i>
<span>Menu Item</span>
</a>
</li>
</ul>
</nav>
</div>
<div class="chi-sidenav__drawers">
<div class="chi-drawer -animated -left" id="drawer-0-1">
<div class="chi-drawer__header">
<div class="chi-drawer__title">Menu item 1</div>
<button class="chi-button -icon -close" aria-label="Close">
<div class="chi-button__content"><i class="chi-icon icon-x"></i></div>
</button>
</div>
<div class="chi-drawer__content">
<ul class="chi-sidenav__drawer-list">
<li>
<a href="#drawer-item-list-1-A">
<div class="chi-sidenav__title">Title A</div>
</a>
<div class="chi-sidenav__drawer-item-list" id="drawer-item-list-1-A">
<ul class="chi-tabs -vertical -sm">
<li>
<a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
Sub tab A
</a>
</li>
<li>
<a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
Sub tab B
</a>
</li>
<li>
<a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
Sub tab C
</a>
</li>
</ul>
</div>
</li>
<li class="-active -expanded">
<a href="#drawer-item-list-1-B">
<div class="chi-sidenav__title">Title B</div>
</a>
<div class="chi-sidenav__drawer-item-list" id="drawer-item-list-1-B">
<ul class="chi-tabs -vertical -sm">
<li>
<a class="chi-sidenav__drawer-item-tab -active" href="#exampleHashTarget">
Sub tab A
</a>
</li>
<li>
<a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
Sub tab B
</a>
</li>
<li>
<a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
Sub tab C
</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#exampleHashTarget">
<span class="chi-sidenav__title">
Title C
<i class="chi-icon icon-external-link -xs"></i>
</span>
</a>
</li>
<li>
<a href="#exampleHashTarget">
<span class="chi-sidenav__title">
Title D
<i class="chi-icon icon-external-link -xs"></i>
</span>
</a>
</li>
</ul>
</div>
</div>
<div class="chi-drawer -animated -left" id="drawer-0-2">
<div class="chi-drawer__header">
<div class="chi-drawer__title">Menu item 2</div>
<button class="chi-button -icon -close" aria-label="Close">
<div class="chi-button__content"><i class="chi-icon icon-x"></i></div>
</button>
</div>
<div class="chi-drawer__content">
<ul class="chi-sidenav__drawer-list">
<li>
<a href="#drawer-item-list-2-A">
<div class="chi-sidenav__title">Title E</div>
</a>
<div class="chi-sidenav__drawer-item-list" id="drawer-item-list-2-A">
<ul class="chi-tabs -vertical -sm">
<li>
<a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
Sub tab A
</a>
</li>
<li>
<a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
Sub tab B
</a>
</li>
<li>
<a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
Sub tab C
</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#drawer-item-list-2-B">
<div class="chi-sidenav__title">Title F</div>
</a>
<div class="chi-sidenav__drawer-item-list" id="drawer-item-list-2-B">
<ul class="chi-tabs -vertical -sm">
<li>
<a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
Sub tab A
</a>
</li>
<li>
<a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
Sub tab B
</a>
</li>
<li>
<a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
Sub tab C
</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#exampleHashTarget">
<span class="chi-sidenav__title">
Title G
<i class="chi-icon icon-external-link -xs"></i>
</span>
</a>
</li>
<li>
<a href="#exampleHashTarget">
<span class="chi-sidenav__title">
Title H
<i class="chi-icon icon-external-link -xs"></i>
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</aside>
<script>
chi.sidenav(document.getElementById('sidenav-0'));
</script>
Open on hover
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<aside class="chi-sidenav" id="sidenav-1">
<div class="chi-sidenav__content">
<nav>
<ul class="chi-sidenav__list">
<li class="-active">
<a href="#drawer-1-1">
<i class="chi-icon icon-atom"></i>
<span>Active Item</span>
</a>
</li>
<li>
<a href="#drawer-1-2">
<i class="chi-icon icon-atom"></i>
<span>Menu Item</span>
</a>
</li>
</ul>
</nav>
</div>
<div class="chi-sidenav__drawers">
<div class="chi-drawer -animated -left" id="drawer-1-1">
<div class="chi-drawer__header">
<div class="chi-drawer__title">Menu item 1</div>
<button class="chi-button -icon -close" aria-label="Close">
<div class="chi-button__content"><i class="chi-icon icon-x"></i></div>
</button>
</div>
<div class="chi-drawer__content">
<ul class="chi-sidenav__drawer-list">
<li>
<a href="#drawer-item-list-1-A">
<div class="chi-sidenav__title">Title A</div>
</a>
<div class="chi-sidenav__drawer-item-list" id="drawer-item-list-1-A">
<ul class="chi-tabs -vertical -sm">
<li>
<a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
Sub tab A
</a>
</li>
<li>
<a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
Sub tab B
</a>
</li>
<li>
<a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
Sub tab C
</a>
</li>
</ul>
</div>
</li>
<li class="-active -expanded">
<a href="#drawer-item-list-1-B">
<div class="chi-sidenav__title">Title B</div>
</a>
<div class="chi-sidenav__drawer-item-list" id="drawer-item-list-1-B">
<ul class="chi-tabs -vertical -sm">
<li>
<a class="chi-sidenav__drawer-item-tab -active" href="#exampleHashTarget">
Sub tab A
</a>
</li>
<li>
<a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
Sub tab B
</a>
</li>
<li>
<a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
Sub tab C
</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#exampleHashTarget">
<span class="chi-sidenav__title">
Title C
<i class="chi-icon icon-external-link -xs"></i>
</span>
</a>
</li>
<li>
<a href="#exampleHashTarget">
<span class="chi-sidenav__title">
Title D
<i class="chi-icon icon-external-link -xs"></i>
</span>
</a>
</li>
</ul>
</div>
</div>
<div class="chi-drawer -animated -left" id="drawer-1-2">
<div class="chi-drawer__header">
<div class="chi-drawer__title">Menu item 2</div>
<button class="chi-button -icon -close" aria-label="Close">
<div class="chi-button__content"><i class="chi-icon icon-x"></i></div>
</button>
</div>
<div class="chi-drawer__content">
<ul class="chi-sidenav__drawer-list">
<li>
<a href="#drawer-item-list-2-A">
<div class="chi-sidenav__title">Title E</div>
</a>
<div class="chi-sidenav__drawer-item-list" id="drawer-item-list-2-A">
<ul class="chi-tabs -vertical -sm">
<li>
<a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
Sub tab A
</a>
</li>
<li>
<a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
Sub tab B
</a>
</li>
<li>
<a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
Sub tab C
</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#drawer-item-list-2-B">
<div class="chi-sidenav__title">Title F</div>
</a>
<div class="chi-sidenav__drawer-item-list" id="drawer-item-list-2-B">
<ul class="chi-tabs -vertical -sm">
<li>
<a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
Sub tab A
</a>
</li>
<li>
<a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
Sub tab B
</a>
</li>
<li>
<a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
Sub tab C
</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#exampleHashTarget">
<span class="chi-sidenav__title">
Title G
<i class="chi-icon icon-external-link -xs"></i>
</span>
</a>
</li>
<li>
<a href="#exampleHashTarget">
<span class="chi-sidenav__title">
Title H
<i class="chi-icon icon-external-link -xs"></i>
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</aside>
<script>chi.sidenav(document.getElementById('sidenav-1'), {
openOnHover: true,
autoClose: true
});</script>
Active Usage
The -active class can be applied to ul.chi-sidenav__list > li
for activating the elements in the sidenav menu, .drawer for opening the drawer,
and ul.chi-sidenav__drawer-list > li for activating the menu items inside the drawer.
Sizes
Sidenav supports the following sizes: -sm, -md and -lg.
The default size is -md.
-sm
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<aside class="chi-sidenav -sm" id="sidenav-3">
<div class="chi-sidenav__content">
<nav>
<ul class="chi-sidenav__list">
<li class="-active">
<a href="#drawer-0-1">
<i class="chi-icon icon-atom"></i>
<span>Active Item</span>
</a>
</li>
<li>
<a href="#drawer-0-2">
<i class="chi-icon icon-atom"></i>
<span>Menu Item</span>
</a>
</li>
</ul>
</nav>
</div>
<div class="chi-sidenav__drawers">
<div class="chi-drawer -animated -left" id="drawer-0-1">
<div class="chi-drawer__header">
<div class="chi-drawer__title">Menu item 1</div>
<button class="chi-button -icon -close" aria-label="Close">
<div class="chi-button__content"><i class="chi-icon icon-x"></i></div>
</button>
</div>
<div class="chi-drawer__content">
<ul class="chi-sidenav__drawer-list">
<li>
<a href="#drawer-item-list-1-A">
<div class="chi-sidenav__title">Title A</div>
</a>
<div class="chi-sidenav__drawer-item-list" id="drawer-item-list-1-A">
<ul class="chi-tabs -vertical -sm">
<li>
<a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
Sub tab A
</a>
</li>
<li>
<a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
Sub tab B
</a>
</li>
<li>
<a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
Sub tab C
</a>
</li>
</ul>
</div>
</li>
<li class="-active -expanded">
<a href="#drawer-item-list-1-B">
<div class="chi-sidenav__title">Title B</div>
</a>
<div class="chi-sidenav__drawer-item-list" id="drawer-item-list-1-B">
<ul class="chi-tabs -vertical -sm">
<li>
<a class="chi-sidenav__drawer-item-tab -active" href="#exampleHashTarget">
Sub tab A
</a>
</li>
<li>
<a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
Sub tab B
</a>
</li>
<li>
<a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
Sub tab C
</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#exampleHashTarget">
<span class="chi-sidenav__title">
Title C
<i class="chi-icon icon-external-link -xs"></i>
</span>
</a>
</li>
<li>
<a href="#exampleHashTarget">
<span class="chi-sidenav__title">
Title D
<i class="chi-icon icon-external-link -xs"></i>
</span>
</a>
</li>
</ul>
</div>
</div>
<div class="chi-drawer -animated -left" id="drawer-0-2">
<div class="chi-drawer__header">
<div class="chi-drawer__title">Menu item 2</div>
<button class="chi-button -icon -close" aria-label="Close">
<div class="chi-button__content"><i class="chi-icon icon-x"></i></div>
</button>
</div>
<div class="chi-drawer__content">
<ul class="chi-sidenav__drawer-list">
<li>
<a href="#drawer-item-list-2-A">
<div class="chi-sidenav__title">Title E</div>
</a>
<div class="chi-sidenav__drawer-item-list" id="drawer-item-list-2-A">
<ul class="chi-tabs -vertical -sm">
<li>
<a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
Sub tab A
</a>
</li>
<li>
<a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
Sub tab B
</a>
</li>
<li>
<a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
Sub tab C
</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#drawer-item-list-2-B">
<div class="chi-sidenav__title">Title F</div>
</a>
<div class="chi-sidenav__drawer-item-list" id="drawer-item-list-2-B">
<ul class="chi-tabs -vertical -sm">
<li>
<a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
Sub tab A
</a>
</li>
<li>
<a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
Sub tab B
</a>
</li>
<li>
<a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
Sub tab C
</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#exampleHashTarget">
<span class="chi-sidenav__title">
Title G
<i class="chi-icon icon-external-link -xs"></i>
</span>
</a>
</li>
<li>
<a href="#exampleHashTarget">
<span class="chi-sidenav__title">
Title H
<i class="chi-icon icon-external-link -xs"></i>
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</aside>
<script>chi.sidenav(document.getElementById('sidenav-3'));</script>
-md
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<aside class="chi-sidenav -md" id="sidenav-4">
<div class="chi-sidenav__content">
<nav>
<ul class="chi-sidenav__list">
<li class="-active">
<a href="#drawer-0-1">
<i class="chi-icon icon-atom"></i>
<span>Active Item</span>
</a>
</li>
<li>
<a href="#drawer-0-2">
<i class="chi-icon icon-atom"></i>
<span>Menu Item</span>
</a>
</li>
</ul>
</nav>
</div>
<div class="chi-sidenav__drawers">
<div class="chi-drawer -animated -left" id="drawer-0-1">
<div class="chi-drawer__header">
<div class="chi-drawer__title">Menu item 1</div>
<button class="chi-button -icon -close" aria-label="Close">
<div class="chi-button__content"><i class="chi-icon icon-x"></i></div>
</button>
</div>
<div class="chi-drawer__content">
<ul class="chi-sidenav__drawer-list">
<li>
<a href="#drawer-item-list-1-A">
<div class="chi-sidenav__title">Title A</div>
</a>
<div class="chi-sidenav__drawer-item-list" id="drawer-item-list-1-A">
<ul class="chi-tabs -vertical -sm">
<li>
<a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
Sub tab A
</a>
</li>
<li>
<a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
Sub tab B
</a>
</li>
<li>
<a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
Sub tab C
</a>
</li>
</ul>
</div>
</li>
<li class="-active -expanded">
<a href="#drawer-item-list-1-B">
<div class="chi-sidenav__title">Title B</div>
</a>
<div class="chi-sidenav__drawer-item-list" id="drawer-item-list-1-B">
<ul class="chi-tabs -vertical -sm">
<li>
<a class="chi-sidenav__drawer-item-tab -active" href="#exampleHashTarget">
Sub tab A
</a>
</li>
<li>
<a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
Sub tab B
</a>
</li>
<li>
<a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
Sub tab C
</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#exampleHashTarget">
<span class="chi-sidenav__title">
Title C
<i class="chi-icon icon-external-link -xs"></i>
</span>
</a>
</li>
<li>
<a href="#exampleHashTarget">
<span class="chi-sidenav__title">
Title D
<i class="chi-icon icon-external-link -xs"></i>
</span>
</a>
</li>
</ul>
</div>
</div>
<div class="chi-drawer -animated -left" id="drawer-0-2">
<div class="chi-drawer__header">
<div class="chi-drawer__title">Menu item 2</div>
<button class="chi-button -icon -close" aria-label="Close">
<div class="chi-button__content"><i class="chi-icon icon-x"></i></div>
</button>
</div>
<div class="chi-drawer__content">
<ul class="chi-sidenav__drawer-list">
<li>
<a href="#drawer-item-list-2-A">
<div class="chi-sidenav__title">Title E</div>
</a>
<div class="chi-sidenav__drawer-item-list" id="drawer-item-list-2-A">
<ul class="chi-tabs -vertical -sm">
<li>
<a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
Sub tab A
</a>
</li>
<li>
<a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
Sub tab B
</a>
</li>
<li>
<a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
Sub tab C
</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#drawer-item-list-2-B">
<div class="chi-sidenav__title">Title F</div>
</a>
<div class="chi-sidenav__drawer-item-list" id="drawer-item-list-2-B">
<ul class="chi-tabs -vertical -sm">
<li>
<a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
Sub tab A
</a>
</li>
<li>
<a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
Sub tab B
</a>
</li>
<li>
<a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
Sub tab C
</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#exampleHashTarget">
<span class="chi-sidenav__title">
Title G
<i class="chi-icon icon-external-link -xs"></i>
</span>
</a>
</li>
<li>
<a href="#exampleHashTarget">
<span class="chi-sidenav__title">
Title H
<i class="chi-icon icon-external-link -xs"></i>
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</aside>
<script>chi.sidenav(document.getElementById('sidenav-4'));</script>
-lg
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<aside class="chi-sidenav -lg" id="sidenav-5">
<div class="chi-sidenav__content">
<nav>
<ul class="chi-sidenav__list">
<li class="-active">
<a href="#drawer-0-1">
<i class="chi-icon icon-atom"></i>
<span>Active Item</span>
</a>
</li>
<li>
<a href="#drawer-0-2">
<i class="chi-icon icon-atom"></i>
<span>Menu Item</span>
</a>
</li>
</ul>
</nav>
</div>
<div class="chi-sidenav__drawers">
<div class="chi-drawer -animated -left" id="drawer-0-1">
<div class="chi-drawer__header">
<div class="chi-drawer__title">Menu item 1</div>
<button class="chi-button -icon -close" aria-label="Close">
<div class="chi-button__content"><i class="chi-icon icon-x"></i></div>
</button>
</div>
<div class="chi-drawer__content">
<ul class="chi-sidenav__drawer-list">
<li>
<a href="#drawer-item-list-1-A">
<div class="chi-sidenav__title">Title A</div>
</a>
<div class="chi-sidenav__drawer-item-list" id="drawer-item-list-1-A">
<ul class="chi-tabs -vertical -sm">
<li>
<a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
Sub tab A
</a>
</li>
<li>
<a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
Sub tab B
</a>
</li>
<li>
<a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
Sub tab C
</a>
</li>
</ul>
</div>
</li>
<li class="-active -expanded">
<a href="#drawer-item-list-1-B">
<div class="chi-sidenav__title">Title B</div>
</a>
<div class="chi-sidenav__drawer-item-list" id="drawer-item-list-1-B">
<ul class="chi-tabs -vertical -sm">
<li>
<a class="chi-sidenav__drawer-item-tab -active" href="#exampleHashTarget">
Sub tab A
</a>
</li>
<li>
<a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
Sub tab B
</a>
</li>
<li>
<a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
Sub tab C
</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#exampleHashTarget">
<span class="chi-sidenav__title">
Title C
<i class="chi-icon icon-external-link -xs"></i>
</span>
</a>
</li>
<li>
<a href="#exampleHashTarget">
<span class="chi-sidenav__title">
Title D
<i class="chi-icon icon-external-link -xs"></i>
</span>
</a>
</li>
</ul>
</div>
</div>
<div class="chi-drawer -animated -left" id="drawer-0-2">
<div class="chi-drawer__header">
<div class="chi-drawer__title">Menu item 2</div>
<button class="chi-button -icon -close" aria-label="Close">
<div class="chi-button__content"><i class="chi-icon icon-x"></i></div>
</button>
</div>
<div class="chi-drawer__content">
<ul class="chi-sidenav__drawer-list">
<li>
<a href="#drawer-item-list-2-A">
<div class="chi-sidenav__title">Title E</div>
</a>
<div class="chi-sidenav__drawer-item-list" id="drawer-item-list-2-A">
<ul class="chi-tabs -vertical -sm">
<li>
<a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
Sub tab A
</a>
</li>
<li>
<a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
Sub tab B
</a>
</li>
<li>
<a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
Sub tab C
</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#drawer-item-list-2-B">
<div class="chi-sidenav__title">Title F</div>
</a>
<div class="chi-sidenav__drawer-item-list" id="drawer-item-list-2-B">
<ul class="chi-tabs -vertical -sm">
<li>
<a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
Sub tab A
</a>
</li>
<li>
<a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
Sub tab B
</a>
</li>
<li>
<a class="chi-sidenav__drawer-item-tab" href="#exampleHashTarget">
Sub tab C
</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#exampleHashTarget">
<span class="chi-sidenav__title">
Title G
<i class="chi-icon icon-external-link -xs"></i>
</span>
</a>
</li>
<li>
<a href="#exampleHashTarget">
<span class="chi-sidenav__title">
Title H
<i class="chi-icon icon-external-link -xs"></i>
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</aside>
<script>chi.sidenav(document.getElementById('sidenav-5'));</script>
Recommended layout
Use this layout to ensure the sidenav renders correctly in your project.
<div class="-d--flex">
<aside class="chi-sidenav -flex--shrink0">
<!-- Sidenav content goes here -->
</aside>
<div class="-flex--grow1">
<!-- Page content goes here -->
</div>
</div>