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 retract or expand the sidebar.

To do

React

Vanilla

Figma

Last updated v5.2.0

About

This component have multiple variation. Sidebar can be used as a static part of a layout without folding behavior.

Example
Folded version
Sidebar with navbar

Example

The nj-sidebar component has a modular structure. It is composed of several sub-elements that you can mix and match to achieve the desired result:

.nj-sidebar is the wrapper element:
- if you want the sidebar to retract and expand, pass it an id and use it in the .nj-sidebar__collapse element (see below).
- data-close-on-interact-out="true" attribute allows the sidebar to retract if you click outside it
- .nj-sidebar--folded to fold the sidebar
- .nj-sidebar--no-motion to remove the fold animation
.nj-sidebar__brand holds the brand logotype.
- tt requires two images, one when it is expanded and one when it is retracted (use the square version)
.nj-sidebar__navigation is a wrapper for the navigation list elements
- we provide an example of a nav with the nj-list component
- we also provide a .nj-sidebar__navigation--footer modifier that anchors it at the bottom (see full example below).
.nj-sidebar__collapse houses the button that folds / expands the sidebar if needed
.nj-sidebar-content is the wrapper element used for all the content outside the sidebar. It wraps your content so that it behaves correctly with the fixed sidebar.

This div has the `.nj-sidebar-content` class. It's mandatory to have the right behavior with a fixed sidebar.

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" id="sidebarExample" data-close-on-interact-out="true">
    <!-- Logo-->
    <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 - back to home" width="100px">
      <img class="nj-sidebar__logo--folded" src="https://design.digital.engie.com/assets/brand/logo-engie-small-blue.svg" alt="ENGIE - back to home" width="auto" height="36">
    </a>

    <!-- Nav -->
    <nav class="nj-sidebar__navigation">
      <ul class="nj-list-group nj-list-group--sm nj-list-group--no-border nj-list-group--spaced-items">
        <li class="nj-list-group__item nj-list-group__item--clickable nj-list-group__item--right-border active" aria-current="true">
          <a href="#">
            <span aria-hidden="true" class="material-icons nj-list-group__item-icon">dashboard</span>
            <span class="nj-list-group__item-content">Dashboard</span>
          </a>
        </li>
        <li class="nj-list-group__item nj-list-group__item--clickable nj-list-group__item--right-border">
          <a href="#">
            <span aria-hidden="true" class="material-icons nj-list-group__item-icon">report_problem</span>
            <span class="nj-list-group__item-content">Alerts</span>
            <p class="nj-badge nj-badge--information nj-list-group__item-right-content">7</p>
          </a>
        </li>
        <li class="nj-list-group__item nj-list-group__item--clickable nj-list-group__item--right-border">
          <a href="#">
            <span aria-hidden="true" class="material-icons nj-list-group__item-icon">show_chart</span>
            <span class="nj-list-group__item-content">Signals</span>
          </a>
        </li>
        <li class="nj-list-group__item nj-list-group__item--clickable nj-list-group__item--right-border">
          <a href="#">
            <span aria-hidden="true" class="material-icons nj-list-group__item-icon">online_prediction</span>
            <span class="nj-list-group__item-content">Simulation</span>
          </a>
        </li>
        <li class="nj-list-group__item nj-list-group__item--clickable nj-list-group__item--right-border">
          <a href="#">
            <span aria-hidden="true" class="material-icons nj-list-group__item-icon">event</span>
            <span class="nj-list-group__item-content">Events</span>
          </a>
        </li>
      </ul>
    </nav>

    <!-- Footer nav -->
    <nav class="nj-sidebar__navigation nj-sidebar__navigation--footer">
      <ul class="nj-list-group nj-list-group--sm nj-list-group--no-border nj-list-group--spaced-items">
        <div class="nj-sidebar__divider"></div>
        <li class="nj-list-group__item nj-list-group__item--clickable nj-list-group__item--right-border">
          <a href="#">
            <span aria-hidden="true" class="material-icons nj-list-group__item-icon">settings</span>
            <span class="nj-list-group__item-content">Settings</span>
          </a>
        </li>
        <li class="nj-list-group__item nj-list-group__item--clickable nj-list-group__item--right-border">
          <a href="#">
            <span aria-hidden="true" class="material-icons nj-list-group__item-icon">account_circle</span>
            <span class="nj-list-group__item-content">Profile</span>
          </a>
        </li>
        <li class="nj-list-group__item nj-list-group__item--clickable nj-list-group__item--right-border">
          <a href="#">
            <span aria-hidden="true" class="material-icons nj-list-group__item-icon">power_settings_new</span>
            <span class="nj-list-group__item-content">Logout</span>
          </a>
        </li>
      </ul>
    </nav>

    <ul class="nj-sidebar__collapse nj-list-group nj-list-group--sm nj-list-group--no-border">
      <li class="nj-list-group__item nj-list-group__item--clickable nj-list-group__item--no-border">
        <button data-toggle="sidebar" data-target="#sidebarExample" aria-pressed="false">
          <span aria-hidden="true" class="material-icons nj-list-group__item-icon nj-sidebar__fold-btn">chevron_left</span>
          <span class="nj-list-group__item-content">Close</span>
        </button>
      </li>
    </ul>
  </div>

  <div class="nj-sidebar-content" style="padding: var(--nj-semantic-size-spacing-16);">
    <h3>This div has the <code>.nj-sidebar-content</code> class. It's 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>
    <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>
    <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.

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--fixed nj-navbar--shadow nj-navbar--expand-xl">
    <a class="nj-navbar__brand" href="#">
      <svg class="nj-navbar__logo">
        <use href="/assets/brand/logo-engie.svg#logo-engie"/>
      </svg>
    </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"><a class="nj-navbar__nav-link active" href="#">Active nav item</a></li>
        <li class="nj-navbar__nav-item"><a class="nj-navbar__nav-link disabled" href="#">Disabled 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" href="#">Nav item</a></li>
        <li class="nj-navbar__nav-item"><a class="nj-navbar__nav-link nj-navbar__nav-link--icon" href="#"><span
              aria-hidden="true" class="material-icons nj-icon-material nj-icon-material--brand">network_check</span><span
              class="nj-sr-only">Nav item</span></a></li>
      </ul>
    </div>
  </nav>

  <div class="nj-sidebar nj-sidebar--custom-height" id="sidebarExample" data-close-on-interact-out="true">

    <!-- Nav -->
    <nav class="nj-sidebar__navigation">
      <ul class="nj-list-group nj-list-group--sm nj-list-group--no-border nj-list-group--spaced-items">
        <li class="nj-list-group__item nj-list-group__item--clickable nj-list-group__item--right-border active" aria-current="true">
          <a href="#">
            <span aria-hidden="true" class="material-icons nj-list-group__item-icon">dashboard</span>
            <span class="nj-list-group__item-content">Dashboard</span>
          </a>
        </li>
        <li class="nj-list-group__item nj-list-group__item--clickable nj-list-group__item--right-border">
          <a href="#">
            <span aria-hidden="true" class="material-icons nj-list-group__item-icon">report_problem</span>
            <span class="nj-list-group__item-content">Alerts</span>
            <p class="nj-badge nj-badge--information nj-list-group__item-right-content">7</p>
          </a>
        </li>
        <li class="nj-list-group__item nj-list-group__item--clickable nj-list-group__item--right-border">
          <a href="#">
            <span aria-hidden="true" class="material-icons nj-list-group__item-icon">show_chart</span>
            <span class="nj-list-group__item-content">Signals</span>
          </a>
        </li>
        <li class="nj-list-group__item nj-list-group__item--clickable nj-list-group__item--right-border">
          <a href="#">
            <span aria-hidden="true" class="material-icons nj-list-group__item-icon">online_prediction</span>
            <span class="nj-list-group__item-content">Simulation</span>
          </a>
        </li>
        <li class="nj-list-group__item nj-list-group__item--clickable nj-list-group__item--right-border">
          <a href="#">
            <span aria-hidden="true" class="material-icons nj-list-group__item-icon">event</span>
            <span class="nj-list-group__item-content">Events</span>
          </a>
        </li>
      </ul>
    </nav>

    <!-- Footer nav -->
    <nav class="nj-sidebar__navigation nj-sidebar__navigation--footer">
      <ul class="nj-list-group nj-list-group--sm nj-list-group--no-border nj-list-group--spaced-items">
        <div class="nj-sidebar__divider"></div>
        <li class="nj-list-group__item nj-list-group__item--clickable nj-list-group__item--right-border">
          <a href="#">
            <span aria-hidden="true" class="material-icons nj-list-group__item-icon">settings</span>
            <span class="nj-list-group__item-content">Settings</span>
          </a>
        </li>
        <li class="nj-list-group__item nj-list-group__item--clickable nj-list-group__item--right-border">
          <a href="#">
            <span aria-hidden="true" class="material-icons nj-list-group__item-icon">account_circle</span>
            <span class="nj-list-group__item-content">Profile</span>
          </a>
        </li>
        <li class="nj-list-group__item nj-list-group__item--clickable nj-list-group__item--right-border">
          <a href="#">
            <span aria-hidden="true" class="material-icons nj-list-group__item-icon">power_settings_new</span>
            <span class="nj-list-group__item-content">Logout</span>
          </a>
        </li>
      </ul>
    </nav>

    <!-- Collapse button -->
    <ul class="nj-sidebar__collapse nj-list-group nj-list-group--sm nj-list-group--no-border">
      <li class="nj-list-group__item nj-list-group__item--clickable nj-list-group__item--no-border">
        <button data-toggle="sidebar" data-target="#sidebarExample" aria-pressed="false">
          <span aria-hidden="true" class="material-icons nj-list-group__item-icon nj-sidebar__fold-btn">chevron_left</span>
          <span class="nj-list-group__item-content">Close</span>
        </button>
      </li>
    </ul>
  </div>

  <div class="nj-sidebar-content" style="padding: var(--nj-semantic-size-spacing-16); height: 2000px;">
    <!-- Your content goes here -->
  </div>

Select

Skeleton

Sidebar

About

Example

This div has the .nj-sidebar-content class. It's mandatory to have the right behavior with a fixed sidebar.

Folded version

Sidebar with navbar

This div has the `.nj-sidebar-content` class. It's mandatory to have the right behavior with a fixed sidebar.