Menu

Header - Store

<header class="mp c-header" id="header">
<div class="c-header__wrap u-wrap">
<a class="c-header__logo" href="/prototype">
<img src="/static/svg/logo.svg" alt="Home" />
</a>
<a class="c-navicon" href="#nav" aria-label="Open Navigation">
<i></i>
<i></i>
<i></i>
</a>
<div class="c-header__primary" id="nav">
<a class="c-navicon" href="#header" aria-label="Close Navigation">
<i></i>
<i></i>
<i></i>
</a>
<nav class="c-header__corporate" aria-label="Corporate">
<ul>
<li>
<div>
<div class="c-input__wrap">
<label class="u-hidden" for="Language">Language</label>
<select class="c-input c-input--select" name="select" id="Language" >
<option value="Deutsch" >Deutsch</option>
<option value="English" selected>English</option>
<option value="Español" >Español</option>
<option value="Français" >Français</option>
<option value="Português" >Português</option>
<option value="Pусский" >Pусский</option>
<option value="한국어" >한국어</option>
<option value="日本語" >日本語</option>
<option value="简体中文" >简体中文</option>
</select>
</div>
</div>
</li>
<li>
<a href="">About us</a>
</li>
<li>
<a href="">Careers</a>
</li>
<li>
<a href="/prototype/blog">Blog</a>
</li>
<li>
<a href="/prototype/request-a-quote">Contact us</a>
</li>
</ul>
</nav>
<form class="c-header__search">
<label for="site-search" class="u-hidden">Search</label>
<div class="u-flex u-bg-petrol-step-3">
<input id="site-search" placeholder="Search" type="search" name="s" class="c-input c-input--alt c-input--with-button" />
<button type="button" class="c-button--reset u-blue">
<svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--search">
<use xlink:href="/static/svg/sprite.svg#search"></use>
</svg>
</button>
</div>
</form>
<nav class="c-header__site c-header__site--with-home" aria-label="Site">
<ul>
<li>
<a href="/prototype/products">Store home</a>
</li>
<li>
<a href="/prototype/sections">Consumables</a>
</li>
<li>
<a href="">Standards</a>
</li>
<li>
<a href="/prototype/webinars">Accessories</a>
</li>
<li>
<a href="">Contracts & agreements</a>
</li>
<li>
<a href="">Software</a>
</li>
<a class="mp c-button c-button--small c-button--tight c-button--outline-white c-header__push u-margin-right-m" href="">Basket (0)</a>
<li>
<a href="">Log in</a>
</li>
<li>
<a href="">Register</a>
</li>
</ul>
</nav>
</nav>
</div>
</header>
{
"navLeft": [
"Store home",
"Consumables",
"Standards",
"Accessories",
"Contracts and agreements",
"Software"
],
"navRight": [
"Log in",
"Register"
],
"siteNav": "store",
"button": "Basket (0)",
"withHome": true
}

There were two aim in mind when designing the header:

  • To have one consistent visual style for the header.
  • To have a consistent layout that does not shift around when you move between sites.