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.

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

Header page example (This is an example with all the possible elements into the header)

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

Use only the tag <nj-header></nj-header> if you choose the Web Component initialization method with Angular, React or VueJs frameworks.
<nj-header>
<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--filled-green-java" 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" 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>
        </div>
      </header>
</nj-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.

<nj-header>
<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--filled-green-java" 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" 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>
        </div>
      </header>
</nj-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>