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.
This HTML Blueprint requires JavaScript.
You may use your own solution, or use Chi's vanilla JavaScript solution,
Chi.js.
<aside class="chi-sidenav" id="example-base">
<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" aria-hidden="true"></i>
<span>Active Item</span>
</a>
</li>
<li>
<a href="#drawer-0-2">
<i class="chi-icon icon-atom" aria-hidden="true"></i>
<span>Menu Item</span>
</a>
</li>
<li>
<a href="#drawer-0-3">
<i class="chi-icon icon-atom" aria-hidden="true"></i>
<span>Menu Item</span>
</a>
</li>
<li>
<a href="#drawer-0-4">
<i class="chi-icon icon-atom" aria-hidden="true"></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" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-drawer__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1.1</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 1.1.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 1.1.2</span>
</a>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1.2</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 1.2.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 1.2.2</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="chi-accordion__item -active">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2.1</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 2.1.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 2.1.2</span>
</a>
</div>
</div>
<div class="chi-accordion__item -active">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2.2</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 2.2.1</span>
</a>
<a class="-active" href="#exampleHashTarget">
<span>Item 2.2.2</span>
</a>
</div>
</div>
</div>
</div>
</div>
<a href="#exampleHashTarget">
<span>
External
<i class="chi-icon icon-external-link -xs" aria-hidden="true"></i>
</span>
</a>
</div>
</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" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-drawer__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1.1</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 1.1.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 1.1.2</span>
</a>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1.2</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 1.2.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 1.2.2</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2.1</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 2.1.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 2.1.2</span>
</a>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2.2</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 2.2.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 2.2.2</span>
</a>
</div>
</div>
</div>
</div>
</div>
<a href="#exampleHashTarget">
<span>
External
<i class="chi-icon icon-external-link -xs" aria-hidden="true"></i>
</span>
</a>
</div>
</div>
</div>
<div class="chi-drawer -animated -left" id="drawer-0-3">
<div class="chi-drawer__header">
<div class="chi-drawer__title">Menu item 3</div>
<button class="chi-button -icon -close" aria-label="Close">
<div class="chi-button__content">
<i class="chi-icon icon-x" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-drawer__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1.1</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 1.1.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 1.1.2</span>
</a>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1.2</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 1.2.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 1.2.2</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2.1</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 2.1.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 2.1.2</span>
</a>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2.2</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 2.2.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 2.2.2</span>
</a>
</div>
</div>
</div>
</div>
</div>
<a href="#exampleHashTarget">
<span>
External
<i class="chi-icon icon-external-link -xs" aria-hidden="true"></i>
</span>
</a>
</div>
</div>
</div>
<div class="chi-drawer -animated -left" id="drawer-0-4">
<div class="chi-drawer__header">
<div class="chi-drawer__title">Menu item 4</div>
<button class="chi-button -icon -close" aria-label="Close">
<div class="chi-button__content">
<i class="chi-icon icon-x" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-drawer__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1.1</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 1.1.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 1.1.2</span>
</a>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1.2</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 1.2.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 1.2.2</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2.1</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 2.1.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 2.1.2</span>
</a>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2.2</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 2.2.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 2.2.2</span>
</a>
</div>
</div>
</div>
</div>
</div>
<a href="#exampleHashTarget">
<span>
External
<i class="chi-icon icon-external-link -xs" aria-hidden="true"></i>
</span>
</a>
</div>
</div>
</div>
</div>
</aside>
<script>
chi.sidenav(document.getElementById('example-base'));
</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.
This HTML Blueprint requires JavaScript.
You may use your own solution, or use Chi's vanilla JavaScript solution,
Chi.js.
<aside class="chi-sidenav" id="sidenav-1">
<div class="chi-sidenav__content">
<nav>
<ul class="chi-sidenav__list">
<li class="-active">
<a href="#drawer-2-1" class="">
<i class="chi-icon icon-atom" aria-hidden="true"></i>
<span>Active Item</span>
</a>
</li>
<li>
<a href="#drawer-2-2">
<i class="chi-icon icon-atom" aria-hidden="true"></i>
<span>Menu Item</span>
</a>
</li>
<li>
<a href="#drawer-2-3">
<i class="chi-icon icon-atom" aria-hidden="true"></i>
<span>Menu Item</span>
</a>
</li>
<li>
<a href="#drawer-2-4">
<i class="chi-icon icon-atom" aria-hidden="true"></i>
<span>Menu Item</span>
</a>
</li>
</ul>
</nav>
</div>
<div class="chi-sidenav__drawers">
<div class="chi-drawer -animated -left" id="drawer-2-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" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-drawer__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1.1</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 1.1.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 1.1.2</span>
</a>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1.2</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 1.2.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 1.2.2</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="chi-accordion__item -active">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2.1</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 2.1.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 2.1.2</span>
</a>
</div>
</div>
<div class="chi-accordion__item -active">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2.2</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 2.2.1</span>
</a>
<a class="-active" href="#exampleHashTarget">
<span>Item 2.2.2</span>
</a>
</div>
</div>
</div>
</div>
</div>
<a href="#exampleHashTarget">
<span>
External
<i class="chi-icon icon-external-link -xs" aria-hidden="true"></i>
</span>
</a>
</div>
</div>
</div>
<div class="chi-drawer -left -animated" id="drawer-2-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" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-drawer__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1.1</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 1.1.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 1.1.2</span>
</a>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1.2</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 1.2.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 1.2.2</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2.1</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 2.1.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 2.1.2</span>
</a>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2.2</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 2.2.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 2.2.2</span>
</a>
</div>
</div>
</div>
</div>
</div>
<a href="#exampleHashTarget">
<span>
External
<i class="chi-icon icon-external-link -xs" aria-hidden="true"></i>
</span>
</a>
</div>
</div>
</div>
<div class="chi-drawer -left -animated" id="drawer-2-3">
<div class="chi-drawer__header">
<div class="chi-drawer__title">Menu item 3</div>
<button class="chi-button -icon -close" aria-label="Close">
<div class="chi-button__content">
<i class="chi-icon icon-x" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-drawer__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1.1</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 1.1.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 1.1.2</span>
</a>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1.2</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 1.2.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 1.2.2</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2.1</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 2.1.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 2.1.2</span>
</a>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2.2</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 2.2.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 2.2.2</span>
</a>
</div>
</div>
</div>
</div>
</div>
<a href="#exampleHashTarget">
<span>
External
<i class="chi-icon icon-external-link -xs" aria-hidden="true"></i>
</span>
</a>
</div>
</div>
</div>
<div class="chi-drawer -left -animated" id="drawer-2-4">
<div class="chi-drawer__header">
<div class="chi-drawer__title">Menu item 4</div>
<button class="chi-button -icon -close" aria-label="Close">
<div class="chi-button__content">
<i class="chi-icon icon-x" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-drawer__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1.1</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 1.1.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 1.1.2</span>
</a>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1.2</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 1.2.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 1.2.2</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2.1</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 2.1.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 2.1.2</span>
</a>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2.2</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 2.2.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 2.2.2</span>
</a>
</div>
</div>
</div>
</div>
</div>
<a href="#exampleHashTarget">
<span>
External
<i class="chi-icon icon-external-link -xs" aria-hidden="true"></i>
</span>
</a>
</div>
</div>
</div>
</div>
</aside>
<script>
chi.sidenav(document.getElementById('sidenav-1'), {
openOnHover: true,
autoClose: true
});
</script>Floating
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.
This HTML Blueprint requires JavaScript.
You may use your own solution, or use Chi's vanilla JavaScript solution,
Chi.js.
<aside class="chi-sidenav -float" id="sidenav-1">
<div class="chi-sidenav__content">
<nav>
<ul class="chi-sidenav__list">
<li class="-active">
<a href="#drawer-2-1" class="">
<i class="chi-icon icon-atom" aria-hidden="true"></i>
<span>Active Item</span>
</a>
</li>
<li>
<a href="#drawer-2-2">
<i class="chi-icon icon-atom" aria-hidden="true"></i>
<span>Menu Item</span>
</a>
</li>
<li>
<a href="#drawer-2-3">
<i class="chi-icon icon-atom" aria-hidden="true"></i>
<span>Menu Item</span>
</a>
</li>
<li>
<a href="#drawer-2-4">
<i class="chi-icon icon-atom" aria-hidden="true"></i>
<span>Menu Item</span>
</a>
</li>
</ul>
</nav>
</div>
<div class="chi-sidenav__drawers">
<div class="chi-drawer -animated -left" id="drawer-2-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" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-drawer__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1.1</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 1.1.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 1.1.2</span>
</a>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1.2</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 1.2.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 1.2.2</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="chi-accordion__item -active">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2.1</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 2.1.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 2.1.2</span>
</a>
</div>
</div>
<div class="chi-accordion__item -active">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2.2</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 2.2.1</span>
</a>
<a class="-active" href="#exampleHashTarget">
<span>Item 2.2.2</span>
</a>
</div>
</div>
</div>
</div>
</div>
<a href="#exampleHashTarget">
<span>
External
<i class="chi-icon icon-external-link -xs" aria-hidden="true"></i>
</span>
</a>
</div>
</div>
</div>
<div class="chi-drawer -left -animated" id="drawer-2-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" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-drawer__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1.1</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 1.1.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 1.1.2</span>
</a>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1.2</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 1.2.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 1.2.2</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2.1</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 2.1.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 2.1.2</span>
</a>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2.2</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 2.2.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 2.2.2</span>
</a>
</div>
</div>
</div>
</div>
</div>
<a href="#exampleHashTarget">
<span>
External
<i class="chi-icon icon-external-link -xs" aria-hidden="true"></i>
</span>
</a>
</div>
</div>
</div>
<div class="chi-drawer -left -animated" id="drawer-2-3">
<div class="chi-drawer__header">
<div class="chi-drawer__title">Menu item 3</div>
<button class="chi-button -icon -close" aria-label="Close">
<div class="chi-button__content">
<i class="chi-icon icon-x" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-drawer__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1.1</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 1.1.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 1.1.2</span>
</a>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1.2</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 1.2.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 1.2.2</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2.1</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 2.1.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 2.1.2</span>
</a>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2.2</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 2.2.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 2.2.2</span>
</a>
</div>
</div>
</div>
</div>
</div>
<a href="#exampleHashTarget">
<span>
External
<i class="chi-icon icon-external-link -xs" aria-hidden="true"></i>
</span>
</a>
</div>
</div>
</div>
<div class="chi-drawer -left -animated" id="drawer-2-4">
<div class="chi-drawer__header">
<div class="chi-drawer__title">Menu item 4</div>
<button class="chi-button -icon -close" aria-label="Close">
<div class="chi-button__content">
<i class="chi-icon icon-x" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-drawer__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1.1</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 1.1.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 1.1.2</span>
</a>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1.2</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 1.2.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 1.2.2</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2.1</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 2.1.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 2.1.2</span>
</a>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2.2</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 2.2.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 2.2.2</span>
</a>
</div>
</div>
</div>
</div>
</div>
<a href="#exampleHashTarget">
<span>
External
<i class="chi-icon icon-external-link -xs" aria-hidden="true"></i>
</span>
</a>
</div>
</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.
This HTML Blueprint requires JavaScript.
You may use your own solution, or use Chi's vanilla JavaScript solution,
Chi.js.
<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-3-1">
<i class="chi-icon icon-atom" aria-hidden="true"></i>
<span>Active Item</span>
</a>
</li>
<li>
<a href="#drawer-3-2">
<i class="chi-icon icon-atom" aria-hidden="true"></i>
<span>Menu Item</span>
</a>
</li>
<li>
<a href="#drawer-3-3">
<i class="chi-icon icon-atom" aria-hidden="true"></i>
<span>Menu Item</span>
</a>
</li>
<li>
<a href="#drawer-3-4">
<i class="chi-icon icon-atom" aria-hidden="true"></i>
<span>Menu Item</span>
</a>
</li>
</ul>
</nav>
</div>
<div class="chi-sidenav__drawers">
<div class="chi-drawer -animated -left" id="drawer-3-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" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-drawer__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1.1</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 1.1.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 1.1.2</span>
</a>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1.2</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 1.2.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 1.2.2</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="chi-accordion__item -active">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2.1</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 2.1.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 2.1.2</span>
</a>
</div>
</div>
<div class="chi-accordion__item -active">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2.2</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 2.2.1</span>
</a>
<a class="-active" href="#exampleHashTarget">
<span>Item 2.2.2</span>
</a>
</div>
</div>
</div>
</div>
</div>
<a href="#exampleHashTarget">
<span>
External
<i class="chi-icon icon-external-link -xs" aria-hidden="true"></i>
</span>
</a>
</div>
</div>
</div>
<div class="chi-drawer -animated -left" id="drawer-3-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" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-drawer__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1.1</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 1.1.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 1.1.2</span>
</a>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1.2</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 1.2.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 1.2.2</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2.1</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 2.1.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 2.1.2</span>
</a>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2.2</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 2.2.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 2.2.2</span>
</a>
</div>
</div>
</div>
</div>
</div>
<a href="#exampleHashTarget">
<span>
External
<i class="chi-icon icon-external-link -xs" aria-hidden="true"></i>
</span>
</a>
</div>
</div>
</div>
<div class="chi-drawer -animated -left" id="drawer-3-3">
<div class="chi-drawer__header">
<div class="chi-drawer__title">Menu item 3</div>
<button class="chi-button -icon -close" aria-label="Close">
<div class="chi-button__content">
<i class="chi-icon icon-x" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-drawer__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1.1</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 1.1.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 1.1.2</span>
</a>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1.2</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 1.2.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 1.2.2</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2.1</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 2.1.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 2.1.2</span>
</a>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2.2</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 2.2.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 2.2.2</span>
</a>
</div>
</div>
</div>
</div>
</div>
<a href="#exampleHashTarget">
<span>
External
<i class="chi-icon icon-external-link -xs" aria-hidden="true"></i>
</span>
</a>
</div>
</div>
</div>
<div class="chi-drawer -animated -left" id="drawer-3-4">
<div class="chi-drawer__header">
<div class="chi-drawer__title">Menu item 4</div>
<button class="chi-button -icon -close" aria-label="Close">
<div class="chi-button__content">
<i class="chi-icon icon-x" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-drawer__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1.1</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 1.1.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 1.1.2</span>
</a>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1.2</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 1.2.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 1.2.2</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2.1</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 2.1.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 2.1.2</span>
</a>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2.2</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 2.2.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 2.2.2</span>
</a>
</div>
</div>
</div>
</div>
</div>
<a href="#exampleHashTarget">
<span>
External
<i class="chi-icon icon-external-link -xs" aria-hidden="true"></i>
</span>
</a>
</div>
</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.
This HTML Blueprint requires JavaScript.
You may use your own solution, or use Chi's vanilla JavaScript solution,
Chi.js.
<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-4-1">
<i class="chi-icon icon-atom" aria-hidden="true"></i>
<span>Active Item</span>
</a>
</li>
<li>
<a href="#drawer-4-2">
<i class="chi-icon icon-atom" aria-hidden="true"></i>
<span>Menu Item</span>
</a>
</li>
<li>
<a href="#drawer-4-3">
<i class="chi-icon icon-atom" aria-hidden="true"></i>
<span>Menu Item</span>
</a>
</li>
<li>
<a href="#drawer-4-4">
<i class="chi-icon icon-atom" aria-hidden="true"></i>
<span>Menu Item</span>
</a>
</li>
</ul>
</nav>
</div>
<div class="chi-sidenav__drawers">
<div class="chi-drawer -animated -left" id="drawer-4-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" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-drawer__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1.1</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 1.1.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 1.1.2</span>
</a>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1.2</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 1.2.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 1.2.2</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="chi-accordion__item -active">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2.1</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 2.1.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 2.1.2</span>
</a>
</div>
</div>
<div class="chi-accordion__item -active">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2.2</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 2.2.1</span>
</a>
<a class="-active" href="#exampleHashTarget">
<span>Item 2.2.2</span>
</a>
</div>
</div>
</div>
</div>
</div>
<a href="#exampleHashTarget">
<span>
External
<i class="chi-icon icon-external-link -xs" aria-hidden="true"></i>
</span>
</a>
</div>
</div>
</div>
<div class="chi-drawer -animated -left" id="drawer-4-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" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-drawer__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1.1</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 1.1.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 1.1.2</span>
</a>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1.2</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 1.2.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 1.2.2</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2.1</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 2.1.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 2.1.2</span>
</a>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2.2</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 2.2.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 2.2.2</span>
</a>
</div>
</div>
</div>
</div>
</div>
<a href="#exampleHashTarget">
<span>
External
<i class="chi-icon icon-external-link -xs" aria-hidden="true"></i>
</span>
</a>
</div>
</div>
</div>
<div class="chi-drawer -animated -left" id="drawer-4-3">
<div class="chi-drawer__header">
<div class="chi-drawer__title">Menu item 3</div>
<button class="chi-button -icon -close" aria-label="Close">
<div class="chi-button__content">
<i class="chi-icon icon-x" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-drawer__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1.1</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 1.1.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 1.1.2</span>
</a>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1.2</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 1.2.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 1.2.2</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2.1</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 2.1.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 2.1.2</span>
</a>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2.2</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 2.2.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 2.2.2</span>
</a>
</div>
</div>
</div>
</div>
</div>
<a href="#exampleHashTarget">
<span>
External
<i class="chi-icon icon-external-link -xs" aria-hidden="true"></i>
</span>
</a>
</div>
</div>
</div>
<div class="chi-drawer -animated -left" id="drawer-4-4">
<div class="chi-drawer__header">
<div class="chi-drawer__title">Menu item 4</div>
<button class="chi-button -icon -close" aria-label="Close">
<div class="chi-button__content">
<i class="chi-icon icon-x" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-drawer__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1.1</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 1.1.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 1.1.2</span>
</a>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1.2</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 1.2.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 1.2.2</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2.1</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 2.1.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 2.1.2</span>
</a>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2.2</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 2.2.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 2.2.2</span>
</a>
</div>
</div>
</div>
</div>
</div>
<a href="#exampleHashTarget">
<span>
External
<i class="chi-icon icon-external-link -xs" aria-hidden="true"></i>
</span>
</a>
</div>
</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.
This HTML Blueprint requires JavaScript.
You may use your own solution, or use Chi's vanilla JavaScript solution,
Chi.js.
<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-5-1">
<i class="chi-icon icon-atom" aria-hidden="true"></i>
<span>Active Item</span>
</a>
</li>
<li>
<a href="#drawer-5-2">
<i class="chi-icon icon-atom" aria-hidden="true"></i>
<span>Menu Item</span>
</a>
</li>
<li>
<a href="#drawer-5-3">
<i class="chi-icon icon-atom" aria-hidden="true"></i>
<span>Menu Item</span>
</a>
</li>
<li>
<a href="#drawer-5-4">
<i class="chi-icon icon-atom" aria-hidden="true"></i>
<span>Menu Item</span>
</a>
</li>
</ul>
</nav>
</div>
<div class="chi-sidenav__drawers">
<div class="chi-drawer -animated -left" id="drawer-5-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" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-drawer__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1.1</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 1.1.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 1.1.2</span>
</a>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1.2</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 1.2.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 1.2.2</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="chi-accordion__item -active">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2.1</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 2.1.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 2.1.2</span>
</a>
</div>
</div>
<div class="chi-accordion__item -active">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2.2</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 2.2.1</span>
</a>
<a class="-active" href="#exampleHashTarget">
<span>Item 2.2.2</span>
</a>
</div>
</div>
</div>
</div>
</div>
<a href="#exampleHashTarget">
<span>
External
<i class="chi-icon icon-external-link -xs" aria-hidden="true"></i>
</span>
</a>
</div>
</div>
</div>
<div class="chi-drawer -animated -left" id="drawer-5-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" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-drawer__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1.1</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 1.1.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 1.1.2</span>
</a>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1.2</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 1.2.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 1.2.2</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2.1</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 2.1.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 2.1.2</span>
</a>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2.2</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 2.2.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 2.2.2</span>
</a>
</div>
</div>
</div>
</div>
</div>
<a href="#exampleHashTarget">
<span>
External
<i class="chi-icon icon-external-link -xs" aria-hidden="true"></i>
</span>
</a>
</div>
</div>
</div>
<div class="chi-drawer -animated -left" id="drawer-5-3">
<div class="chi-drawer__header">
<div class="chi-drawer__title">Menu item 3</div>
<button class="chi-button -icon -close" aria-label="Close">
<div class="chi-button__content">
<i class="chi-icon icon-x" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-drawer__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1.1</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 1.1.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 1.1.2</span>
</a>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1.2</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 1.2.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 1.2.2</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2.1</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 2.1.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 2.1.2</span>
</a>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2.2</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 2.2.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 2.2.2</span>
</a>
</div>
</div>
</div>
</div>
</div>
<a href="#exampleHashTarget">
<span>
External
<i class="chi-icon icon-external-link -xs" aria-hidden="true"></i>
</span>
</a>
</div>
</div>
</div>
<div class="chi-drawer -animated -left" id="drawer-5-4">
<div class="chi-drawer__header">
<div class="chi-drawer__title">Menu item 4</div>
<button class="chi-button -icon -close" aria-label="Close">
<div class="chi-button__content">
<i class="chi-icon icon-x" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-drawer__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1.1</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 1.1.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 1.1.2</span>
</a>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 1.2</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 1.2.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 1.2.2</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2</div>
<i class="chi-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<div class="chi-accordion__content">
<div class="chi-accordion">
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2.1</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 2.1.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 2.1.2</span>
</a>
</div>
</div>
<div class="chi-accordion__item">
<button class="chi-accordion__trigger">
<div class="chi-accordion__title">Item 2.2</div>
<i
class="chi-icon icon-chevron-down"
aria-hidden="true"
></i>
</button>
<div class="chi-accordion__content">
<a href="#exampleHashTarget">
<span>Item 2.2.1</span>
</a>
<a href="#exampleHashTarget">
<span>Item 2.2.2</span>
</a>
</div>
</div>
</div>
</div>
</div>
<a href="#exampleHashTarget">
<span>
External
<i class="chi-icon icon-external-link -xs" aria-hidden="true"></i>
</span>
</a>
</div>
</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.
Base
<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>
Floating
<div class="-d--flex">
<aside class="chi-sidenav -float -flex--shrink0">
<!-- Sidenav content goes here -->
</aside>
<div class="-flex--grow1">
<!-- Page content goes here -->
</div>
</div>
JavaScript
This component accepts options to configure its behavior.
Preventing memory leaks
Sidenav component has a dispose function to free all the resources attached to the element, such as event listeners and object data. You should call this method when you want to remove the component.
var elem = document.getElementById('sidenav-1');
var sidenav = chi.sidenav(elem);
// do stuff
sidenav.dispose();
It is safe to call the sidenav method more than once, as it will return any previously created sidenav component
associated with the element.
var elem = document.getElementById('sidenav-2');
var sidenav = chi.sidenav(elem);
var elem2 = document.getElementById('sidenav-2');
var sidenav2 = chi.sidenav(elem2);
sidenav === sidenav2; // returns true
sidenav.dispose(); // Only have to do it once.Accessibility
Accessibility guidelines coming soon