Link to Fluid's Microsoft Teams channel Link to the support page

Header

The header is a structuring element of ENGIE's identity. It is the main navigation of a website. This version is primarily intended for the corporate website with many sections.
Please check also the Navbar component for a more compact version.

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

angular logo

Won't be done

react logo

Won't be done

javascript logo Vanillaopen_in_new
angular logo Figmaopen_in_new

How it works

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

  • Header require a wrapping .nj-header with .nj-header--expand{-sm|-md|-lg|-xl} for responsive collapsing.
  • Headers and their contents are fluid by default.

Supported content

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

  • .nj-header__search allows to add a full width search field to your Header.
  • .nj-header__menu to create a menu when hovering an item from the main nav .nj-header__nav.

Headers come also with modifiers:

  • .nj-header--expand{-sm|-md|-lg|-xl} for showing header contents from (prevent mobile collapsing).
  • .nj-header--sm for a height reduced header
  • .nj-header--scroll-sm header is minimized on scroll down
  • .nj-header--fixed header will be fixed on top
  • .nj-header__nav--panel transform a menu to full width and height panel on mobile collapsing.

Dependency

If you choose to import each components independently, you need to import Header and Collapse Javascript and SCSS components.

Example

.nj-header__nav contains main menu. Activities item has a submenu .nj-header__menu with three columns.
Mobile breakpoint transforms .nj-header__nav, .nj-header__menu into burger menu with panels thanks to .nj-header__nav--panels modifier.
Add .nj-header--fixed and .nj-header--scroll-sm to get all functionalities.

EN / FR
Espace client 
<header class="nj-header nj-header--expand-lg">
  <div class="nj-header__group">
    <div class="nj-header__head">
      <div>
        <a href="#" class="nj-header__head-link">EN</a> /
        <a href="#" class="nj-header__head-link nj-header__head-link--active"
          >FR</a
        >
      </div>
      <a href="#" class="nj-header__logo">
        <img
          src="https://assets.design.digital.engie.com/brand/logo-engie-blue.svg"
          alt="ENGIE"
          width="133"
          height="48"
        />
      </a>
      <a href="" class="nj-header__head-link">Espace client</a>
    </div>
    <hr class="m-0" />
    <nav class="container" role="navigation">
      <div
        class="nj-header__nav-burger"
        aria-label="menu"
        aria-expanded="false"
      >
        <button><div></div></button>
      </div>
      <div class="nj-header__nav-logo--reduced">
        <a href="#">
          <img
            src="https://assets.design.digital.engie.com/brand/logo-engie-small-blue.svg"
            alt="ENGIE"
            width="31"
            height="32"
          />
        </a>
      </div>
      <ul class="nj-header__nav nj-header__nav--panel">
        <li class="nj-header__nav-item active">
          <a class="nj-header__nav-link" href="#">Accueil</a>
        </li>
        <li class="nj-header__nav-item">
          <a class="nj-tag nj-tag--teal" href="#">News</a>
        </li>
        <li class="nj-header__nav-item">
          <a class="nj-header__nav-link" href="#">Act with ENGIE</a>
        </li>
        <li class="nj-header__nav-item">
          <a class="nj-header__nav-link" href="#">Group</a>
        </li>
        <li class="nj-header__nav-item">
          <a class="nj-header__nav-link" href="#"
            >Activities
            <i class="nj-header__menu-arrow-right material-icons md-24"
              >keyboard_arrow_right</i
            ></a
          >
          <div class="nj-header__menu nj-header__nav--panel">
            <div class="container">
              <div class="row">
                <div class="col">
                  <a class="nj-header__menu-return"
                    ><i class="nj-header__menu-arrow-left material-icons md-24"
                      >keyboard_arrow_left</i
                    >
                    Activities</a
                  >
                  <ul class="list-unstyled">
                    <li>
                      <a
                        href="#"
                        class="nj-header__menu-title"
                        aria-label="open"
                        aria-expanded="false"
                        >Renouvelables
                        <i
                          class="
                            nj-header__menu-arrow-right
                            material-icons
                            md-24
                          "
                          >keyboard_arrow_right</i
                        ></a
                      >
                      <ul class="list-unstyled nj-header__nav--panel">
                        <li>
                          <a class="nj-header__menu-return"
                            ><i
                              class="
                                nj-header__menu-arrow-left
                                material-icons
                                md-24
                              "
                              >keyboard_arrow_left</i
                            >Renouvelables</a
                          >
                        </li>
                        <li>
                          <a
                            class="nj-header__menu-link"
                            href="/activites/renouvelables/eolien"
                            >Éolien</a
                          >
                        </li>
                        <li>
                          <a
                            class="nj-header__menu-link"
                            href="/activites/renouvelables/solaire"
                            >Solaire</a
                          >
                        </li>
                        <li>
                          <a
                            class="nj-header__menu-link"
                            href="/activites/renouvelables/geothermie"
                            >Géothermie</a
                          >
                        </li>
                        <li>
                          <a
                            class="nj-header__menu-link"
                            href="/activites/renouvelables/biogaz"
                            >Biogaz</a
                          >
                        </li>
                        <li>
                          <a
                            class="nj-header__menu-link"
                            href="/activites/renouvelables/biomasse"
                            >Biomasse</a
                          >
                        </li>
                        <li>
                          <a
                            class="nj-header__menu-link"
                            href="/activites/renouvelables/hydrogene-vert"
                            >Hydrogène vert</a
                          >
                        </li>
                        <li>
                          <a
                            class="nj-header__menu-link"
                            href="/activites/renouvelables/hydroelectricite"
                            >Hydroélectricité</a
                          >
                        </li>
                      </ul>
                    </li>
                  </ul>
                </div>
                <div class="col">
                  <ul class="list-unstyled">
                    <li>
                      <a
                        href="#"
                        class="nj-header__menu-title"
                        aria-label="open"
                        aria-expanded="false"
                        >Solutions clients
                        <i
                          class="
                            nj-header__menu-arrow-right
                            material-icons
                            md-24
                          "
                          >keyboard_arrow_right</i
                        ></a
                      >
                      <ul class="list-unstyled nj-header__nav--panel">
                        <li>
                          <a class="nj-header__menu-return"
                            ><i
                              class="
                                nj-header__menu-arrow-left
                                material-icons
                                md-24
                              "
                              >keyboard_arrow_left</i
                            >Solutions clients</a
                          >
                        </li>
                        <li>
                          <a
                            class="nj-header__menu-link"
                            href="/activites/renouvelables/eolien"
                            >Éolien</a
                          >
                        </li>
                        <li>
                          <a
                            class="nj-header__menu-link"
                            href="/activites/renouvelables/solaire"
                            >Solaire</a
                          >
                        </li>
                        <li>
                          <a
                            class="nj-header__menu-link"
                            href="/activites/renouvelables/geothermie"
                            >Géothermie</a
                          >
                        </li>
                      </ul>
                    </li>
                  </ul>
                </div>
                <div class="col">
                  <ul class="list-unstyled">
                    <li>
                      <a
                        class="nj-header__menu-title"
                        href="#"
                        aria-label="open"
                        aria-expanded="false"
                      >
                        Thermique
                        <i
                          class="
                            nj-header__menu-arrow-right
                            material-icons
                            md-24
                          "
                          >keyboard_arrow_right</i
                        >
                      </a>
                      <ul class="list-unstyled nj-header__nav--panel">
                        <li>
                          <a class="nj-header__menu-return"
                            ><i
                              class="
                                nj-header__menu-arrow-left
                                material-icons
                                md-24
                              "
                              >keyboard_arrow_left</i
                            >Thermique</a
                          >
                        </li>
                        <li>
                          <a
                            class="nj-header__menu-link"
                            href="/activites/renouvelables/eolien"
                            >Centrales thermiques</a
                          >
                        </li>
                        <li>
                          <a
                            class="nj-header__menu-link"
                            href="/activites/renouvelables/solaire"
                            >Nucléaire</a
                          >
                        </li>
                        <li>
                          <a
                            class="nj-header__menu-link"
                            href="/activites/renouvelables/geothermie"
                            >Gaz</a
                          >
                        </li>
                      </ul>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li class="nj-header__nav-item">
          <a class="nj-header__nav-link" href="#">Other item</a>
        </li>
        <li class="nj-header__nav-item">
          <a class="nj-header__nav-link" href="#">Other item</a>
        </li>
      </ul>
      <a
        class="nj-header__search-icon"
        data-toggle="collapse"
        data-target="#collapse-search-bar-header"
        aria-expanded="false"
        aria-controls="collapse-search-bar-header"
        ><i class="material-icons md--blue-corporate">search</i></a
      >
      <form
        class="nj-header__search nj-collapse"
        id="collapse-search-bar-header"
      >
        <input
          class="nj-form-control mr-3"
          type="text"
          id="search-header"
          placeholder="Enter your query..."
        />
        <button type="submit" class="nj-btn nj-btn--primary flex-keep">
          Search
        </button>
        <a
          data-target="#collapse-search-bar-header"
          class="nj-header__close ml-2 d-inline-flex"
          aria-label="Close"
          data-toggle="collapse"
        >
          <i class="material-icons md--blue-corporate">close</i>
        </a>
      </form>
    </nav>
  </div>
</header>

Size variation

Header has a small version that can be enabled manually or automatically on scroll down.

Automatic reduction on scroll down

Size can vary on scroll down, add nj-header--scroll-sm and nj-header--fixed classes to the header element.

<header class="nj-header nj-header--fixed nj-header--scroll-sm">
...
</header>

Manual reduction

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

EN / FR
Espace client 
<header class="nj-header nj-header--sm nj-header--expand-lg">
  <div class="nj-header__group">
    <div class="nj-header__head">
      <div>
        <a href="#" class="nj-header__head-link">EN</a> /
        <a href="#" class="nj-header__head-link nj-header__head-link--active"
          >FR</a
        >
      </div>
      <a href="#" class="nj-header__logo">
        <img
          src="https://assets.design.digital.engie.com/brand/logo-engie-blue.svg"
          alt="ENGIE"
          width="133"
          height="48"
        />
      </a>
      <a href="" class="nj-header__head-link">Espace client</a>
    </div>
    <hr class="m-0" />
    <nav class="container" role="navigation">
      <div
        class="nj-header__nav-burger"
        aria-label="menu"
        aria-expanded="false"
      >
        <button><div></div></button>
      </div>
      <div class="nj-header__nav-logo--reduced">
        <a href="#">
          <img
            src="https://assets.design.digital.engie.com/brand/logo-engie-small-blue.svg"
            alt="ENGIE"
            width="31"
            height="32"
          />
        </a>
      </div>
      <ul class="nj-header__nav nj-header__nav--panel">
        <li class="nj-header__nav-item active">
          <a class="nj-header__nav-link" href="#">Accueil</a>
        </li>
        <li class="nj-header__nav-item">
          <a class="nj-tag nj-tag--teal" href="#">News</a>
        </li>
        <li class="nj-header__nav-item">
          <a class="nj-header__nav-link" href="#">Act with ENGIE</a>
        </li>
        <li class="nj-header__nav-item">
          <a class="nj-header__nav-link" href="#">Group</a>
        </li>
        <li class="nj-header__nav-item">
          <a class="nj-header__nav-link" href="#"
            >Activities
            <i class="nj-header__menu-arrow-right material-icons md-24"
              >keyboard_arrow_right</i
            ></a
          >
        </li>
        <li class="nj-header__nav-item">
          <a class="nj-header__nav-link" href="#">Other item</a>
        </li>
        <li class="nj-header__nav-item">
          <a class="nj-header__nav-link" href="#">Other item</a>
        </li>
      </ul>
      <a
        class="nj-header__search-icon"
        data-toggle="collapse"
        data-target="#collapse-search-bar-header"
        aria-expanded="false"
        aria-controls="collapse-search-bar-header"
        ><i class="material-icons md--blue-corporate">search</i></a
      >
      <form
        class="nj-header__search nj-collapse"
        id="collapse-search-bar-header"
      >
        <input
          class="nj-form-control mr-3"
          type="text"
          id="search-header"
          placeholder="Enter your query..."
        />
        <button type="submit" class="nj-btn nj-btn--primary flex-keep">
          Search
        </button>
        <a
          data-target="#collapse-search-bar-header"
          class="nj-header__close ml-2 d-inline-flex"
          aria-label="Close"
          data-toggle="collapse"
        >
          <i class="material-icons md--blue-corporate">close</i>
        </a>
      </form>
    </nav>
  </div>
</header>

2 logo versions are needed when you use all Header functionalities :

  • normal: .nj-header__logo
  • minimized: .nj-header__nav-logo--reduced displayed on reduced header version
.nj-header__logo .nj-header__nav-logo--reduced
ENGIE ENGIE

You can add a full width search field to your Header. A navigation item can show and hide search bar with an attribute selector data-target or href. For more information, see the Collapse component.

<header class="nj-header nj-header--fixed">
  ...
  <nav>
    ...
     <a class="nj-header__search-icon" data-toggle="collapse" data-target="#collapse-search-bar-header" aria-expanded="false" aria-controls="collapse-search-bar-header"><i class="material-icons md--blue-corporate">search</i></a>
     <form class="nj-header__search nj-collapse" id="collapse-search-bar-header" style="">
       <input class="nj-form-control mr-3" type="text" id="search-header" placeholder="Enter your query...">
       <button type="submit" class="nj-btn nj-btn--primary flex-keep">Search</button>
       <a data-target="#collapse-search-bar-header" class="nj-header__close ml-2 d-inline-flex" aria-label="Close" data-toggle="collapse">
         <i class="material-icons md--blue-corporate">close</i>
       </a>
     </form>
  </nav>  
</header>

Placement

Header can be fixed at the top by adding .nj-header--fixed class.

<header class="nj-header nj-header--fixed">
...
</header>

Responsive behaviors

Header can use .nj-header--expand{-sm|-md|-lg|-xl} classes to change the breakpoint when .header__nav navigation is transformed to mobile version.

<header class="nj-header nj-header--expand-lg">
...
</header>

Grid

Icon