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.

To do

React

Vanilla

Figma

Last updated v5.0.0

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.

<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

<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

<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!

    <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>

For this example, we made a specific page to show the sidebar with a navbar for a better user experience.

See the example

  <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>

Select

Slider

Sidebar

About

Static version

Title

Folded version

Title

Small list version

Title

Collapsing version

Collapsing sidebar with navbar