SidePanel

Sidepanel is a component typically located on the side of the interface. It commonly contains contextual information or additional tools related to the primary content. This component remains hidden until the user activates it, providing a discreet way to access supplementary information or functionalities.

Angular

React

Vanilla

Figma

Last updated v5.6.0

Example

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque eos et laudantium nesciunt nihil obcaecati provident quasi quisquam sequi tenetur. Aliquid doloribus esse expedita laborum maiores quia ratione saepe, ut.

<div class="nj-sidepanel">
  <div class="nj-sidepanel__header nj-sidepanel-header">
    <span class="nj-sidepanel-header__title">Title</span>
    <div class="nj-sidepanel-header__actions">
      <button type="button" class="nj-icon-btn nj-icon-btn--tertiary">
        <span class="nj-sr-only">Some accessible label</span>
        <span aria-hidden="true" class="nj-icon-btn__icon material-icons">more_horiz</span>
      </button>
      <button type="button" class="nj-icon-btn nj-icon-btn--tertiary">
        <span class="nj-sr-only">Some accessible label</span>
        <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
      </button>
    </div>
  </div>
  <div class="nj-sidepanel__content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque eos et laudantium nesciunt nihil obcaecati provident quasi quisquam sequi tenetur. Aliquid doloribus esse expedita laborum maiores quia ratione saepe, ut.
  </div>
  <div class="nj-sidepanel__footer">
    <!-- Put your own footer here -->
    <div style="display: flex; align-items: center; justify-content: space-between;">
      <a href="#" class="nj-link">Need help ?</a>
      <button type="button" class="nj-btn">Share</button>
    </div>
  </div>
</div>

Structure

Here is how the Sidepanel is structured:

nj-sidepanel
- nj-sidepanel__header
  - nj-sidepanel-header__title
  - nj-sidepanel-header__actions
- nj-sidepanel__content
- nj-sidepanel__footer

Sidepanel layout

We provide a .nj-sidepanel-layout wrapper element to work easily with sidepanels.

It accepts a .nj-sidepanel-layout__content to which you pass your main content, and a nj-sidepanel-layout__sidepanel that wraps the nj-sidepanel:

<div class="nj-sidepanel-layout">
  <div class="nj-sidepanel-layout__content">
    <!-- Put your main content here -->
  </div>
  <div class="nj-sidepanel-layout__sidepanel">
    <!-- Insert your sidepanel here (see sidepanel's story) -->
  </div>
</div>

Main content

<div class="nj-sidepanel-layout" style="border: var(--nj-semantic-size-border-width) solid var(--nj-semantic-color-border-neutral-subtle-default); min-height: 80vh;">
  
  <main class="nj-sidepanel-layout__content" style="display: grid; place-items: center">
    Main content
  </main>

  <aside class="nj-sidepanel-layout__sidepanel">
    <div class="nj-sidepanel">
      <div class="nj-sidepanel__header nj-sidepanel-header">
        <span class="nj-sidepanel-header__title">Sidepanel title</span>
        <div class="nj-sidepanel-header__actions">
          <button type="button" class="nj-icon-btn nj-icon-btn--tertiary">
            <span class="nj-sr-only">Close button</span>
            <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
          </button>
        </div>
      </div>
      <div class="nj-sidepanel__content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci assumenda atque commodi consequatur delectus dolores ex inventore magni modi nam non possimus quos recusandae rem, rerum similique, sint temporibus voluptatibus?
      </div>
      <div class="nj-sidepanel__footer">
        <!-- Put your own footer here -->
        <div style="display: flex; align-items: center; justify-content: space-between;">
          <a href="#" class="nj-link">Link</a>
          <button type="button" class="nj-btn">Button</button>
        </div>
      </div>
    </div>
  </aside>

</div>

See the storybook documentation for more information about this component’s options (css modifiers and css variables).

Sidebar

Skeleton