Headers
Header (signed in)
Header Component as shown when user is signed in
<input data-order-count-supported type="hidden" value="true" />
<div class="c-skipTo c-skipTo--whiteLink">
<a class="is-visuallyHidden focusable u-text-marker" href="#skipToMain">Skip to main content</a>
</div>
<header class="c-header c-header--transparent c-header--gradient" data-sticky-element data-header>
<div class="c-infoBar c-infoBar--dark u-showBelowMid" data-test-id="languageToggle">
<div class="c-infoBar-row c-languageSwitcher">
<span class="c-languageSwitcher-countryCode">EN</span>
<a class="c-languageSwitcher-action" href="#">
<span class="is-visuallyHidden">Changer la langue pour le</span>
Français
<svg viewBox="0 0 10 6" class="c-languageSwitcher-icon c-icon c-icon--chevron c-icon--chevron--small c-icon--chevron--right c-icon--chevron--light"><path d="M5 4.41L9.29.12a.42.42 0 0 1 .59.6L5.29 5.28a.42.42 0 0 1-.58 0L.12.71a.42.42 0 0 1 .6-.59L5 4.42z" fill="#333" fill-rule="nonzero"/></svg>
</a>
</div>
</div>
<div class="l-container c-header-wrap">
<div class="c-logo">
<a href="/" aria-label="Just Eat Homepage">
<div class="c-logo-img">
<img alt="Just Eat Food Delivery" src="/assets/img/logos/je-logo.v2.svg" />
</div>
<span class="is-visuallyHidden">Just Eat</span>
</a>
</div>
<nav data-navglobal class="c-nav c-nav--global">
<button data-nav-button class="c-nav-trigger is-hidden--noJS">Open Menu</button>
<input data-nav-accessible-button type="checkbox" class="c-nav-trigger is-shown--noJS" id="nav-trigger" />
<label data-nav-toggle class="c-nav-toggle" for="nav-trigger">
<span class="c-nav-toggle-icon">Open Menu</span>
</label>
<div data-nav-container class="c-nav-container">
<ul class="c-nav-list">
<li data-auth-wrapper class="c-nav-list-item has-sublist is-hidden" data-test-id="navList" tabindex="0">
<p class="c-nav-list-text">
<svg width="20" height="22" viewBox="0 0 12 13" xmlns="http://www.w3.org/2000/svg" class="c-nav-icon"><path d="M2.67 11.33V9a.33.33 0 0 1 .66 0v2.67c0 .18-.15.33-.33.33H1.67a1 1 0 0 1-1-1V9.67c0-2.6 1.8-4.34 5.33-4.34 3.53 0 5.33 1.74 5.33 4.34V11a1 1 0 0 1-1 1H9a.33.33 0 0 1-.33-.33V9a.33.33 0 1 1 .66 0v2.33h1c.19 0 .34-.15.34-.33V9.67C10.67 7.44 9.17 6 6 6S1.33 7.44 1.33 9.67V11c0 .18.15.33.34.33h1zm3.33-6c1.09 0 2-1.02 2-2.33C8 1.7 7.09.67 6 .67 4.91.67 4 1.69 4 3c0 1.3.91 2.33 2 2.33zM6 6C4.53 6 3.33 4.66 3.33 3S4.53 0 6 0s2.67 1.34 2.67 3S7.47 6 6 6zm2.67 3.67a.33.33 0 1 1 .66 0v2c0 .09-.03.17-.1.23-.12.12-.37.28-.8.42-.65.22-1.56.35-2.76.35-.92 0-1.65-.14-2.21-.36-.36-.14-.58-.3-.7-.4a.33.33 0 0 1-.1-.24v-2a.33.33 0 1 1 .67 0v1.84a5.33 5.33 0 0 0 2.33.5c1.14-.01 1.98-.13 2.57-.33.2-.07.35-.13.44-.18V9.67z" fill="#266ABD"></path></svg> <span data-name class="c-nav-list-text-sub"></span>
<span data-email class="c-nav-list-text-sub u-showBelowMid"></span>
</p>
<ul class="c-nav-popoverList">
<li class="c-nav-list-item">
<a class="c-nav-list-link"
data-gtm="header|click - navigation|account"
data-test-id="accountInfo"
href="#">Account info</a>
</li>
<li class="c-nav-list-item">
<a class="c-nav-list-link"
data-gtm="header|click - navigation|orders"
data-test-id="orders"
href="#">Orders</a>
</li>
<li class="c-nav-list-item">
<a class="c-nav-list-link"
data-gtm="header|click - navigation|credit balance"
data-test-id="accountCredit"
href="#">Account credit</a>
</li>
<li class="c-nav-list-item">
<a class="c-nav-list-link"
data-gtm="header|click - navigation|payment methods"
data-test-id="paymentMethods"
href="#">Payment methods</a>
</li>
<li class="c-nav-list-item">
<a class="c-nav-list-link"
data-gtm="header|click - navigation|address book"
data-test-id="addressBook"
href="#">Delivery addresses</a>
</li>
<li class="c-nav-list-item">
<a class="c-nav-list-link"
data-gtm="header|click - navigation|redeem giftcard"
data-test-id="redeemGiftCard"
href="#">Redeem a gift card</a>
</li>
<li class="c-nav-list-item c-nav-list-item--forceLast">
<a class="c-nav-list-link"
data-gtm="header|click - navigation|logout"
data-test-id="logout"
href="#">Log out</a>
</li>
</ul>
</li>
<li data-login class="c-nav-list-item is-hidden" data-test-id="login">
<a href="#" rel="nofollow" class="c-nav-list-link">
Log in
</a>
</li>
<li class="c-nav-list-item is-hidden is-shown--noJS" data-test-id="noscript-myaccount">
<a href="#" rel="nofollow" class="c-nav-list-link">
Account
</a>
</li>
<li class="c-nav-list-item u-showAboveMid" data-test-id="languageToggle">
<a href="#" class="c-nav-list-link">
<span class="is-visuallyHidden">
Changer la langue pour le
</span>
Français
</a>
</li>
<li class="c-nav-list-item c-nav-list-item--support" data-test-id="support">
<a href="#" data-gtm="header|click - navigation|help" class="c-nav-list-link">
Help
</a>
</li>
</ul>
</div>
</nav>
</div>
</header>
Header (signed out)
Header Component as shown when user is signed out
<input data-order-count-supported type="hidden" value="true" />
<div class="c-skipTo c-skipTo--whiteLink">
<a class="is-visuallyHidden focusable u-text-marker" href="#skipToMain">Skip to main content</a>
</div>
<header class="c-header c-header--transparent c-header--gradient" data-sticky-element data-header>
<div class="c-infoBar c-infoBar--dark u-showBelowMid" data-test-id="languageToggle">
<div class="c-infoBar-row c-languageSwitcher">
<span class="c-languageSwitcher-countryCode">EN</span>
<a class="c-languageSwitcher-action" href="#">
<span class="is-visuallyHidden">Changer la langue pour le</span>
Français
<svg viewBox="0 0 10 6" class="c-languageSwitcher-icon c-icon c-icon--chevron c-icon--chevron--small c-icon--chevron--right c-icon--chevron--light"><path d="M5 4.41L9.29.12a.42.42 0 0 1 .59.6L5.29 5.28a.42.42 0 0 1-.58 0L.12.71a.42.42 0 0 1 .6-.59L5 4.42z" fill="#333" fill-rule="nonzero"/></svg>
</a>
</div>
</div>
<div class="l-container c-header-wrap">
<div class="c-logo">
<a href="/" aria-label="Just Eat Homepage">
<div class="c-logo-img">
<img alt="Just Eat Food Delivery" src="/assets/img/logos/je-logo.v2.svg" />
</div>
<span class="is-visuallyHidden">Just Eat</span>
</a>
</div>
<nav data-navglobal class="c-nav c-nav--global">
<button data-nav-button class="c-nav-trigger is-hidden--noJS">Open Menu</button>
<input data-nav-accessible-button type="checkbox" class="c-nav-trigger is-shown--noJS" id="nav-trigger" />
<label data-nav-toggle class="c-nav-toggle" for="nav-trigger">
<span class="c-nav-toggle-icon">Open Menu</span>
</label>
<div data-nav-container class="c-nav-container">
<ul class="c-nav-list">
<li data-auth-wrapper class="c-nav-list-item has-sublist is-hidden" data-test-id="navList" tabindex="0">
<p class="c-nav-list-text">
<svg width="20" height="22" viewBox="0 0 12 13" xmlns="http://www.w3.org/2000/svg" class="c-nav-icon"><path d="M2.67 11.33V9a.33.33 0 0 1 .66 0v2.67c0 .18-.15.33-.33.33H1.67a1 1 0 0 1-1-1V9.67c0-2.6 1.8-4.34 5.33-4.34 3.53 0 5.33 1.74 5.33 4.34V11a1 1 0 0 1-1 1H9a.33.33 0 0 1-.33-.33V9a.33.33 0 1 1 .66 0v2.33h1c.19 0 .34-.15.34-.33V9.67C10.67 7.44 9.17 6 6 6S1.33 7.44 1.33 9.67V11c0 .18.15.33.34.33h1zm3.33-6c1.09 0 2-1.02 2-2.33C8 1.7 7.09.67 6 .67 4.91.67 4 1.69 4 3c0 1.3.91 2.33 2 2.33zM6 6C4.53 6 3.33 4.66 3.33 3S4.53 0 6 0s2.67 1.34 2.67 3S7.47 6 6 6zm2.67 3.67a.33.33 0 1 1 .66 0v2c0 .09-.03.17-.1.23-.12.12-.37.28-.8.42-.65.22-1.56.35-2.76.35-.92 0-1.65-.14-2.21-.36-.36-.14-.58-.3-.7-.4a.33.33 0 0 1-.1-.24v-2a.33.33 0 1 1 .67 0v1.84a5.33 5.33 0 0 0 2.33.5c1.14-.01 1.98-.13 2.57-.33.2-.07.35-.13.44-.18V9.67z" fill="#266ABD"></path></svg> <span data-name class="c-nav-list-text-sub"></span>
<span data-email class="c-nav-list-text-sub u-showBelowMid"></span>
</p>
<ul class="c-nav-popoverList">
<li class="c-nav-list-item">
<a class="c-nav-list-link"
data-gtm="header|click - navigation|account"
data-test-id="accountInfo"
href="#">Account info</a>
</li>
<li class="c-nav-list-item">
<a class="c-nav-list-link"
data-gtm="header|click - navigation|orders"
data-test-id="orders"
href="#">Orders</a>
</li>
<li class="c-nav-list-item">
<a class="c-nav-list-link"
data-gtm="header|click - navigation|credit balance"
data-test-id="accountCredit"
href="#">Account credit</a>
</li>
<li class="c-nav-list-item">
<a class="c-nav-list-link"
data-gtm="header|click - navigation|payment methods"
data-test-id="paymentMethods"
href="#">Payment methods</a>
</li>
<li class="c-nav-list-item">
<a class="c-nav-list-link"
data-gtm="header|click - navigation|address book"
data-test-id="addressBook"
href="#">Delivery addresses</a>
</li>
<li class="c-nav-list-item">
<a class="c-nav-list-link"
data-gtm="header|click - navigation|redeem giftcard"
data-test-id="redeemGiftCard"
href="#">Redeem a gift card</a>
</li>
<li class="c-nav-list-item c-nav-list-item--forceLast">
<a class="c-nav-list-link"
data-gtm="header|click - navigation|logout"
data-test-id="logout"
href="#">Log out</a>
</li>
</ul>
</li>
<li data-login class="c-nav-list-item is-hidden" data-test-id="login">
<a href="#" rel="nofollow" class="c-nav-list-link">
Log in
</a>
</li>
<li class="c-nav-list-item is-hidden is-shown--noJS" data-test-id="noscript-myaccount">
<a href="#" rel="nofollow" class="c-nav-list-link">
Account
</a>
</li>
<li class="c-nav-list-item u-showAboveMid" data-test-id="languageToggle">
<a href="#" class="c-nav-list-link">
<span class="is-visuallyHidden">
Changer la langue pour le
</span>
Français
</a>
</li>
<li class="c-nav-list-item c-nav-list-item--support" data-test-id="support">
<a href="#" data-gtm="header|click - navigation|help" class="c-nav-list-link">
Help
</a>
</li>
</ul>
</div>
</nav>
</div>
</header>