Sidebar
Sidebar can contain the entire content of the product and allows users a quick access to a specific piece of content. The left arrow allows the user to hide or to show the sidebar.
About
This component have multiple variation. Sidebar can be used as a static part of a layout without folding behavior.
Static version
Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus amet debitis, esse est expedita harum magnam nesciunt nulla officia quam, quis quos soluta ut voluptas? Fugit libero minima perspiciatis.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus amet debitis, esse est expedita harum magnam nesciunt nulla officia quam, quis quos soluta ut voluptas? Fugit libero minima perspiciatis.
<div class="nj-sidebar">
<a class="nj-sidebar__brand" href="#" title="">
<img class="nj-sidebar__logo" src="https://design.digital.engie.com/assets/brand/logo-engie-blue.svg" alt="ENGIE" width="100px">
</a>
<div class="nj-list-group nj-list-group--no-border nj-sidebar__navigation">
<a href="#" title="Navigation item" class="nj-list-group__item active"><i class="material-icons md-24 mr-3">home</i>Navigation item 1</a>
<a href="#" title="Navigation item" class="nj-list-group__item"><i class="material-icons md-24 mr-3">desktop_mac</i>Navigation item 2</a>
<a href="#" title="Navigation item" class="nj-list-group__item"><i class="material-icons md-24 mr-3">toys</i>Navigation item 3</a>
<a href="#" title="Navigation item" class="nj-list-group__item"><i class="material-icons md-24 mr-3">account_circle</i>Navigation item 4</a>
</div>
</div>
<div class="nj-sidebar-content p-3">
<h3>This div has the <code>.nj-sidebar-content</code> class. Its mandatory to have the right behavior with a fixed sidebar.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus amet debitis, esse est expedita harum magnam nesciunt nulla officia quam, quis quos soluta ut voluptas? Fugit libero minima perspiciatis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus amet debitis, esse est expedita harum magnam nesciunt nulla officia quam, quis quos soluta ut voluptas? Fugit libero minima perspiciatis.</p>
</div>
Folded version
Add .nj-sidebar--folded
class on <div class="nj-sidebar">
tag to have a folded version of the sidebar.
Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus amet debitis, esse est expedita harum magnam nesciunt nulla officia quam, quis quos soluta ut voluptas? Fugit libero minima perspiciatis.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus amet debitis, esse est expedita harum magnam nesciunt nulla officia quam, quis quos soluta ut voluptas? Fugit libero minima perspiciatis.
<div class="nj-sidebar nj-sidebar--folded">
<a class="nj-sidebar__brand" href="#" title="">
<img class="nj-sidebar__logo--folded" src="https://design.digital.engie.com/assets/brand/logo-engie-small-blue.svg" alt="ENGIE" width="auto" height="36">
</a>
<div class="nj-list-group nj-list-group--no-border nj-sidebar__navigation">
<a href="#" title="Navigation item" class="nj-list-group__item"><i class="material-icons md-24 mr-3">home</i></a>
<a href="#" title="Navigation item" class="nj-list-group__item active"><i class="material-icons md-24 mr-3">desktop_mac</i></a>
<a href="#" title="Navigation item" class="nj-list-group__item"><i class="material-icons md-24 mr-3">toys</i></a>
<a href="#" title="Navigation item" class="nj-list-group__item"><i class="material-icons md-24 mr-3">account_circle</i></a>
<a href="#" title="Navigation item" class="nj-list-group__item"><i class="material-icons md-24 mr-3">apps</i></a>
</div>
</div>
<div class="nj-sidebar-content p-3">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus amet debitis, esse est expedita harum magnam nesciunt nulla officia quam, quis quos soluta ut voluptas? Fugit libero minima perspiciatis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus amet debitis, esse est expedita harum magnam nesciunt nulla officia quam, quis quos soluta ut voluptas? Fugit libero minima perspiciatis.</p>
</div>
Small list version
Add the following class to have a small sidebar :
.nj-sidebar--sm
class on<div class="nj-sidebar">
tag.nj-list-group--sm
class on<div class="nj-list-group ">
tag
Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus amet debitis, esse est expedita harum magnam nesciunt nulla officia quam, quis quos soluta ut voluptas? Fugit libero minima perspiciatis.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus amet debitis, esse est expedita harum magnam nesciunt nulla officia quam, quis quos soluta ut voluptas? Fugit libero minima perspiciatis.
<div class="nj-sidebar nj-sidebar--folded nj-sidebar--sm">
<a class="nj-sidebar__brand" href="#" title="">
<img class="nj-sidebar__logo--folded" src="https://design.digital.engie.com/assets/brand/logo-engie-small-blue.svg" alt="ENGIE" width="auto" height="36">
</a>
<div class="nj-list-group nj-list-group--sm nj-list-group--no-border nj-sidebar__navigation">
<a href="#" title="Navigation item" class="nj-list-group__item"><i class="material-icons md-24 mr-3">home</i></a>
<a href="#" title="Navigation item" class="nj-list-group__item active"><i class="material-icons md-24 mr-3">desktop_mac</i></a>
<a href="#" title="Navigation item" class="nj-list-group__item"><i class="material-icons md-24 mr-3">toys</i></a>
<a href="#" title="Navigation item" class="nj-list-group__item"><i class="material-icons md-24 mr-3">account_circle</i></a>
<a href="#" title="Navigation item" class="nj-list-group__item"><i class="material-icons md-24 mr-3">apps</i></a>
</div>
</div>
<div class="nj-sidebar-content p-3">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus amet debitis, esse est expedita harum magnam nesciunt nulla officia quam, quis quos soluta ut voluptas? Fugit libero minima perspiciatis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus amet debitis, esse est expedita harum magnam nesciunt nulla officia quam, quis quos soluta ut voluptas? Fugit libero minima perspiciatis.</p>
</div>
Collapsing version
If you want to have an hovering effect (instead of pushing the content), remove .nj-sidebar-content
class on the right div. You may have to adjust the padding of this div on the left with .pl-7
for example.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias atque eaque eius molestias mollitia nam necessitatibus, nisi nulla quas reprehenderit sapiente sed voluptatum? Asperiores at et nemo provident quisquam!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias atque eaque eius molestias mollitia nam necessitatibus, nisi nulla quas reprehenderit sapiente sed voluptatum? Asperiores at et nemo provident quisquam!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias atque eaque eius molestias mollitia nam necessitatibus, nisi nulla quas reprehenderit sapiente sed voluptatum? Asperiores at et nemo provident quisquam!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias atque eaque eius molestias mollitia nam necessitatibus, nisi nulla quas reprehenderit sapiente sed voluptatum? Asperiores at et nemo provident quisquam!
<div class="nj-sidebar" id="sidebarFoldedExample">
<a class="nj-sidebar__brand" href="#" title="">
<img class="nj-sidebar__logo--folded" src="https://design.digital.engie.com/assets/brand/logo-engie-small-blue.svg" alt="ENGIE" width="auto" height="36">
</a>
<div class="nj-list-group nj-list-group--no-border nj-sidebar__navigation">
<a href="#" title="Navigation item" class="nj-list-group__item"><i class="material-icons md-24 mr-3">home</i></a>
<a href="#" title="Navigation item" class="nj-list-group__item active"><i class="material-icons md-24 mr-3">desktop_mac</i></a>
<a href="#" title="Navigation item" class="nj-list-group__item"><i class="material-icons md-24 mr-3">toys</i></a>
<a href="#" title="Navigation item" class="nj-list-group__item"><i class="material-icons md-24 mr-3">account_circle</i></a>
<a href="#" title="Navigation item" class="nj-list-group__item"><i class="material-icons md-24 mr-3">apps</i></a>
</div>
</div>
<div class="nj-sidebar-content p-3">
<h4>If you want to have an hovering effect (instead of pushing the content), remove <code>.nj-sidebar-content</code> class on the parent.</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus amet debitis, esse est expedita harum magnam nesciunt nulla officia quam, quis quos soluta ut voluptas? Fugit libero minima perspiciatis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus amet debitis, esse est expedita harum magnam nesciunt nulla officia quam, quis quos soluta ut voluptas? Fugit libero minima perspiciatis.</p>
</div>
Collapsing sidebar with navbar
For this example, we made a specific page to show the sidebar with a navbar for a better user experience.
<nav class="nj-navbar nj-navbar--blue nj-navbar--expand-xl fixed-top">
<a class="nj-navbar__brand" href="#">
<img src="https://design.digital.engie.com/assets/brand/logo-engie-white.svg" alt="" class="nj-navbar__logo">
</a>
<button class="nj-navbar__toggler" type="button" data-toggle="collapse" data-target="#navbarExample">
<i class="nj-navbar__toggler-icon material-icons">menu</i>
</button>
<div class="nj-navbar--collapse nj-collapse" id="navbarExample">
<ul class="nj-navbar__nav ml-auto">
<li class="nj-navbar__nav-item active"><a class="nj-navbar__nav-link" href="#">Nav item</a></li>
<li class="nj-navbar__nav-item"><a class="nj-navbar__nav-link" href="#">Nav item</a></li>
<li class="nj-navbar__nav-item"><a class="nj-navbar__nav-link nj-navbar__nav-link--icon" href="#"><i class="material-icons md--white">network_check</i></a></li>
</ul>
</div>
</nav>
<div class="nj-sidebar nj-sidebar--folded nj-sidebar--navbar" id="SidebarWithNavbar">
<div class="nj-list-group nj-list-group--no-border nj-sidebar__navigation">
<button class="nj-list-group__item nj-sidebar__fold-btn mt-auto" data-toggle="sidebar" data-target="#SidebarWithNavbar">
<i class="material-icons md-24 mr-3 nj-sidebar__toggler">keyboard_arrow_left</i> Close
</button>
<a href="#" title="Navigation item" class="nj-list-group__item active"><i class="material-icons md-24 mr-3">home</i>Navigation item 1</a>
<a href="#" title="Navigation item" class="nj-list-group__item"><i class="material-icons md-24 mr-3">desktop_mac</i>Navigation item 2</a>
<a href="#" title="Navigation item" class="nj-list-group__item"><i class="material-icons md-24 mr-3">toys</i>Navigation item 3</a>
<a href="#" title="Navigation item" class="nj-list-group__item"><i class="material-icons md-24 mr-3">account_circle</i>Navigation item 4</a>
</div>
</div>
<div class="pl-7 pt-7">
<h3 class="mt-3">Collasping sidebar</h3>
<!-- Your content -->
</div>