Navbar

The navbar helps users know where they are on the product and quickly access other pages and features at any moment. This version is useful for application websites with few sections.

Please check also the Header component for more possibilities.

We are undergoing a migration, the following examples might not be up-to-date.

Please refer directly to the Storybook documentation based on your preferred framework.

Storybook documentations

Won't be done

React

Vanilla

Figma

How it works

Here’s what you need to know before getting started with the navbar:

Navbars require a wrapping .nj-navbar with .nj-navbar-expand{-sm|-md|-lg|-xl} for responsive collapsing.
Navbars and their contents are fluid by default. Use optional container to limit their horizontal width.
Use our spacing and flex utility classes for controlling spacing and alignment within navbars.
Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin.
Navbars are hidden by default when printing. Force them to be printed by adding .d-print to the .nj-navbar. See the display utility class.
Ensure accessibility by using a <nav> element or, if using a more generic element such as a <div>, add a role="navigation" to every navbar to explicitly identify it as a landmark region for users of assistive technologies.

Read on for an example and list of supported sub-components.

Supported content

Navbars come with built-in support for a handful of sub-components. Choose from the following as needed:

.nj-navbar__brand for your company, product, or project name.
.nj-navbar__nav for a full-height and lightweight navigation (including support for dropdowns).
.nj-navbar__toggler for use with our collapse plugin and other navigation toggling behaviors.
.nj-navbar__search for use with our CollapseSearchBar plugin. It allows you to add a full width search field to your navbar.

Navbars come also with modifiers:

.nj-collapse.nj-navbar--collapse for grouping and hiding navbar contents by a parent breakpoint.
.nj-collapse.nj-navbar--expand for showing navbar contents (prevent collapsing).
.nj-collapse.nj-navbar--shadow to add a box shadow.

Example

This is an example with all the possible elements into the navbar. This is the default version with .nj-navbar--shadow .nj-navbar--expand-lg modifier.

<nav class="nj-navbar 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>

Brand and logo

The .nj-navbar__brand can be applied to most elements, but an anchor works best as some elements might require utility classes or custom styles. Most of the time, we recommend to use the .nj-navbar__logo inside.

<nav class="nj-navbar nj-navbar--shadow">
  <a class="nj-navbar__brand" href="#"><svg class="nj-navbar__logo"><use href="/assets/brand/logo-engie.svg#logo-engie" /></svg></a>
</nav>

Search bar

Init

You can add a full width search field to your navbar. A navigation item can show and hide search bar by referencing them with a CSS selector in its href attribute. For more information, see the Collapse component.

Please note that it’s required to initialize CollapseSearchBar and Collapse instances. Otherwise, you can initialize all components.

var collapseSearchBar = CollapseSearchBar.init()
var collapse = Collapse.init()

<nav class="nj-navbar nj-navbar--shadow nj-navbar--expand">
  <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 nj-navbar__nav-link--icon" data-toggle="collapse" href="#collapse-search-bar-example" aria-expanded="false" aria-controls="collapse-search-bar-example">
          <i class="material-icons md--blue-corporate">search</i>
        </a>
      </li>
    </ul>
    <form class="nj-navbar__search nj-collapse" id="collapse-search-bar-example">
      <input class="nj-form-control mr-3" type="text" id="search-href" placeholder="Enter your query...">
      <button type="submit" class="nj-btn flex-keep">Search</button>
      <a href="#" class="nj-navbar__nav-link nj-navbar__nav-link--icon nj-collapse-inline__close" aria-label="Close"
        data-dismiss="#collapse-search-bar-example">
        <i class="material-icons md--blue-corporate">close</i>
      </a>
    </form>
  </div>
</nav>

CollapseSearchBar

In addition to Collapse, CollapseSearchBar gives specific features:

manage close button with data-dismiss attribute
when form appears, <input> element get focus automatically

Transparent nj-navbar--transparent.

/!\ Important /!\ : Be sure to adapt your logo and the icon color by using the right modifier (for example .nj-icon-material--inverse). We prefer to let you set the icon color depending on your needs and not only by the navbar color.

<div style="background:url('/assets/img/bg-home-dark.jpg');" class="pb-6">
  
    <nav class="nj-navbar nj-navbar--transparent nj-navbar--expand-xl mb-3">
      <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="#navbarExample03">
        <i class="nj-navbar__toggler-icon material-icons">menu</i>
      </button>
      <div class="nj-navbar--collapse nj-collapse" id="navbarExample03">
        <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" 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>

Size variation

Navbar has a small version that can be enabled by the addition of the class nj-navbar--sm to the element nj-navbar.

<nav class="nj-navbar nj-navbar--sm 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="#navbarExampleSmall">
      <i class="nj-navbar__toggler-icon material-icons">menu</i>
    </button>
    <div class="nj-navbar--collapse nj-collapse" id="navbarExampleSmall">
      <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" 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" 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--blue-corporate">network_check</i></a></li>
      </ul>
    </div>
  </nav>

Container

Although it’s not required, you can insert a .container into the navbar to center the content on a page. When the container is within your navbar, its horizontal padding is removed at breakpoints lower than your specified .nj-navbar-expand{-sm|-md|-lg|-xl} class. This ensures we’re not doubling up on padding unnecessarily on lower viewports when your navbar is collapsed.

<nav class="nj-navbar nj-navbar--shadow nj-navbar--expand-xl mb-3">
    <div class="container">
      <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="#navbarExample04">
        <i class="nj-navbar__toggler-icon material-icons">menu</i>
      </button>
      <div class="nj-navbar--collapse nj-collapse" id="navbarExample04">
        <ul class="nj-navbar__nav ml-auto">
          <li class="nj-navbar__nav-item"><a class="nj-navbar__nav-link active" href="#">Active nav link</a></li>
          <li class="nj-navbar__nav-item"><a class="nj-navbar__nav-link" href="#">Nav link</a></li>
          <li class="nj-navbar__nav-item"><a class="nj-navbar__nav-link" href="#">Nav link</a></li>
        </ul>
      </div>
    </div>
  </nav>

Placement

Use our position utilities to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top (scrolls with the page until it reaches the top, then stays there). Fixed navbars use position: fixed, meaning they’re pulled from the normal flow of the DOM and may require custom CSS (e.g., padding-top on the <body>) to prevent overlap with other elements.

Also note that .sticky-top uses position: sticky, which isn’t fully supported in every browser.

<nav class="nj-navbar nj-navbar--shadow fixed-top">
  <a class="nj-navbar__brand" href="#"><svg class="nj-navbar__logo"><use href="/assets/brand/logo-engie.svg#logo-engie" /></svg></a>
</nav>

<nav class="nj-navbar nj-navbar--shadow fixed-bottom">
  <a class="nj-navbar__brand" href="#"><svg class="nj-navbar__logo"><use href="/assets/brand/logo-engie.svg#logo-engie" /></svg></a>
</nav>

<nav class="nj-navbar nj-navbar--shadow sticky-top">
  <a class="nj-navbar__brand" href="#"><svg class="nj-navbar__logo"><use href="/assets/brand/logo-engie.svg#logo-engie" /></svg></a>
</nav>

Responsive behaviors

Navbars can utilize .nj-navbar__toggler, .nj-navbar--collapse, and .nj-navbar--expand{-sm|-md|-lg|-xl} classes to change when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.

For navbars that never collapse, add the .nj-navbar--expand class on the navbar. For navbars that always collapse, don’t add any .nj-navbar--expand class.

No responsive example with no toggler

<nav class="nj-navbar nj-navbar--shadow nj-navbar--expand">
  <a class="nj-navbar__brand" href="#"><svg class="nj-navbar__logo"><use href="/assets/brand/logo-engie.svg#logo-engie" /></svg></a>
  <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" 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" href="#">Nav item</a></li>
  </ul>
</nav>

Multi-select

Pagination