Site Links
Global site header links that sit above the site navigation. It contains links tertiary functions to help users across the website (i.e. User Actions like Login and logout), from small tablets and up. Note: There is a high contrast theme, when using heroes that span the full height of the viewport.
<nav class="c-site-navbar | o-navbar">
<div class="o-wrapper">
<div class="o-navbar__wrapper">
<div class="o-navbar__left | u-removed-<bp3">
<ul class="o-list-inline | u-space-x u-align-baseline">
<li class="o-list__item">
<a class="c-link" href="#dealerships">Find a Dealership</a>
</li>
<li class="o-list__item">
<a class="c-link" href="#coronavirus">Coronavirus Updates</a>
</li>
</ul>
</div>
<div class="o-navbar__right">
<ul class="o-list-inline | u-space-x u-align-baseline">
<li class="o-list__item">
<a class="c-link" href="#favourites">
Favourites
<svg class="c-icon | u-ml-xs" viewbox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path fill="none" fill-rule="evenodd" stroke-linejoin="round" stroke-width="1.5" d="M10.001 6.042 7.999 1.4l-2 4.642-5.249.355L4.632 9.64l-.996 4.985L8 11.931l4.392 2.699-1.032-4.982 3.89-3.251z"/>
</svg>
</a>
</li>
<li class="o-list__item">
<a class="c-link" href="#sign-in" aria-label="Sign in to MyListers">
Sign In
<svg class="c-icon | u-ml-xs" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
<path fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M1.5 8h7m-3-3.5L9 8l-3.5 3.5m4-10h3.2a1.8 1.8 0 0 1 1.8 1.8v9.4a1.8 1.8 0 0 1-1.8 1.8H9.5h0"/>
</svg>
</a>
</li>
<li class="o-list__item">
<a class="c-btn" href="#sign-up" aria-label="Sign up to MyListers">
Sign Up
</a>
</li>
</ul>
</div>
</div>
</div>
</nav><nav class="c-site-navbar t-site-navbar--hero | o-navbar">
<div class="o-wrapper">
<div class="o-navbar__wrapper">
<div class="o-navbar__left | u-removed-<bp3">
<ul class="o-list-inline | u-space-x u-align-baseline">
<li class="o-list__item">
<a class="c-link" href="#dealerships">Find a Dealership</a>
</li>
<li class="o-list__item">
<a class="c-link" href="#coronavirus">Coronavirus Updates</a>
</li>
</ul>
</div>
<div class="o-navbar__right">
<ul class="o-list-inline | u-space-x u-align-baseline">
<li class="o-list__item">
<a class="c-link" href="#favourites">
Favourites
<svg class="c-icon | u-ml-xs" viewbox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path fill="none" fill-rule="evenodd" stroke-linejoin="round" stroke-width="1.5" d="M10.001 6.042 7.999 1.4l-2 4.642-5.249.355L4.632 9.64l-.996 4.985L8 11.931l4.392 2.699-1.032-4.982 3.89-3.251z"/>
</svg>
</a>
</li>
<li class="o-list__item">
<a class="c-link" href="#sign-in" aria-label="Sign in to MyListers">
Sign In
<svg class="c-icon | u-ml-xs" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
<path fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M1.5 8h7m-3-3.5L9 8l-3.5 3.5m4-10h3.2a1.8 1.8 0 0 1 1.8 1.8v9.4a1.8 1.8 0 0 1-1.8 1.8H9.5h0"/>
</svg>
</a>
</li>
<li class="o-list__item">
<a class="c-btn" href="#sign-up" aria-label="Sign up to MyListers">
Sign Up
</a>
</li>
</ul>
</div>
</div>
</div>
</nav>Login Variations
When a user is signed into MyListers the site links change to provide user actions which can be accessed across top of the website.
<nav class="c-site-navbar | o-navbar">
<div class="o-wrapper">
<div class="o-navbar__wrapper">
<div class="o-navbar__left">
<ul class="o-list-inline | u-space-x u-align-baseline">
<li class="o-list__item">
<a class="c-link" href="#dealerships">Find a Dealership</a>
</li>
<li class="o-list__item">
<a class="c-link" href="#coronavirus">Careers at Listers</a>
</li>
<li class="o-list__item">
<a class="c-link" href="#showroom">Digital Showroom</a>
</li>
</ul>
</div>
<div class="o-navbar__right">
<ul class="o-list-inline | u-space-x u-align-baseline">
<li class="o-list__item">
<a class="c-link" href="#favourites">
Favourites
<svg class="c-icon | u-ml-xs" viewbox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path fill="none" fill-rule="evenodd" stroke-linejoin="round" stroke-width="1.5" d="M10.001 6.042 7.999 1.4l-2 4.642-5.249.355L4.632 9.64l-.996 4.985L8 11.931l4.392 2.699-1.032-4.982 3.89-3.251z"/>
</svg>
</a>
</li>
<li class="o-list__item">
<div class="c-link"
x-data="{ drop: false }"
@keydown.escape.prevent.stop="drop = false"
@click.outside="drop = false"
>
<button class="c-link" type="button" aria-controls="user_menu" aria-expanded="false"
x-ref="btn"
@click="drop = ! drop"
:aria-expanded="drop"
>
Welcome Karim
<svg class="c-icon | u-ml-xxs" viewbox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path d="m10.833 5.16 1.417 1.417-4.241 4.25-4.259-4.25 1.413-1.413 2.846 2.83z"/>
</svg>
</button>
<!-- Dropdown-->
<div class="c-dropdown" id="user_menu" style="display: none;"
x-show="drop"
x-anchor.bottom-end.offset.10="$refs.btn"
x-transition
>
<ul class="c-dropdown__list | o-list-stacked">
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link" href="#account">Account</a>
</li>
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link" href="#settings">Settings</a>
</li>
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link" href="#driveway">Driveway</a>
</li>
</ul>
<div class="c-dropdown__footer">
<a class="c-link-bare | o-split | u-tc-red-800 u-tc:hover-red-900" href="#sign-out">
<span class="o-split__left">Sign out</span>
<svg class="c-icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
<path fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.5 8h7M5 4.5 1.5 8 5 11.5m4.5-10h3.2a1.8 1.8 0 0 1 1.8 1.8v9.4a1.8 1.8 0 0 1-1.8 1.8H9.5h0"></path>
</svg>
</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</nav><nav class="c-site-navbar t-site-navbar--hero | o-navbar">
<div class="o-wrapper">
<div class="o-navbar__wrapper">
<div class="o-navbar__left">
<ul class="o-list-inline | u-space-x u-align-baseline">
<li class="o-list__item">
<a class="c-link" href="#dealerships">Find a Dealership</a>
</li>
<li class="o-list__item">
<a class="c-link" href="#coronavirus">Careers at Listers</a>
</li>
<li class="o-list__item">
<a class="c-link" href="#showroom">Digital Showroom</a>
</li>
</ul>
</div>
<div class="o-navbar__right">
<ul class="o-list-inline | u-space-x u-align-baseline">
<li class="o-list__item">
<a class="c-link" href="#favourites">
Favourites
<svg class="c-icon | u-ml-xs" viewbox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path fill="none" fill-rule="evenodd" stroke-linejoin="round" stroke-width="1.5" d="M10.001 6.042 7.999 1.4l-2 4.642-5.249.355L4.632 9.64l-.996 4.985L8 11.931l4.392 2.699-1.032-4.982 3.89-3.251z"/>
</svg>
</a>
</li>
<li class="o-list__item">
<div class="c-link" aria-expanded="false"
x-data="{ drop: false }"
@keydown.escape.prevent.stop="drop = false"
@click.outside="drop = false"
>
<button class="c-link" type="button" aria-controls="user_menu" aria-expanded="false"
x-ref="btn"
@click="drop = ! drop"
:aria-expanded="drop"
>
Welcome Karim
<svg class="c-icon | u-ml-xxs" viewbox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path d="m10.833 5.16 1.417 1.417-4.241 4.25-4.259-4.25 1.413-1.413 2.846 2.83z"/>
</svg>
</button>
<!-- Dropdown-->
<div class="c-dropdown" id="user_menu" style="display: none;"
x-show="drop"
x-anchor.bottom-end.offset.10="$refs.btn"
x-transition
>
<ul class="c-dropdown__list | o-list-stacked">
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link" href="#account">Account</a>
</li>
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link" href="#settings">Settings</a>
</li>
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link" href="#driveway">Driveway</a>
</li>
</ul>
<div class="c-dropdown__footer">
<a class="c-link-bare | o-split | u-tc-red-800 u-tc:hover-red-900" href="#sign-out">
<span class="o-split__left">Sign out</span>
<svg class="c-icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
<path fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.5 8h7M5 4.5 1.5 8 5 11.5m4.5-10h3.2a1.8 1.8 0 0 1 1.8 1.8v9.4a1.8 1.8 0 0 1-1.8 1.8H9.5h0"></path>
</svg>
</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</nav>Christmas Theme
During the festive period, use a Christmas theme across the website to provide some seasonal sprinkles.
<nav class="c-site-navbar | o-navbar">
<div class="o-wrapper">
<div class="o-navbar__wrapper">
<div class="o-navbar__left | u-removed-<bp3">
<ul class="o-list-inline | u-space-x u-align-baseline">
<li class="o-list__item">
<a class="c-link" href="#dealerships">Find a Dealership</a>
</li>
<li class="o-list__item">
<a class="c-link" href="#coronavirus">Coronavirus Updates</a>
</li>
</ul>
</div>
<div class="o-navbar__right">
<ul class="o-list-inline | u-space-x u-align-baseline">
<li class="o-list__item">
<a class="c-link" href="#favourites">
Favourites
<svg class="c-icon | u-ml-xs" viewbox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path fill="none" fill-rule="evenodd" stroke-linejoin="round" stroke-width="1.5" d="M10.001 6.042 7.999 1.4l-2 4.642-5.249.355L4.632 9.64l-.996 4.985L8 11.931l4.392 2.699-1.032-4.982 3.89-3.251z"/>
</svg>
</a>
</li>
<li class="o-list__item">
<a class="c-link" href="#sign-in" aria-label="Sign in to MyListers">
Sign In
<svg class="c-icon | u-ml-xs" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
<path fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M1.5 8h7m-3-3.5L9 8l-3.5 3.5m4-10h3.2a1.8 1.8 0 0 1 1.8 1.8v9.4a1.8 1.8 0 0 1-1.8 1.8H9.5h0"/>
</svg>
</a>
</li>
<li class="o-list__item">
<a class="c-btn" href="#sign-up" aria-label="Sign up to MyListers">
Sign Up
</a>
</li>
</ul>
</div>
</div>
</div>
</nav>