Masthead

Taxonomic name: O-MASTHEAD

CORE COMPONENT

Archive - Updated 29/03/19. Current version

Organism

v.4.8.0

Ability to include the last logged in date and time was added.

New site switcher added to enable sites to link to upto 6 websites rather than being limited to only 2 previously.

Prior to v.4.3.0

Only simple masthead with no primary categories/links and standard masthead with the mega dropdowns for each primary category/link were available.

The basic masthead was then introduced to fill the business requirement for microsites that are made up of very few pages and using the standard masthead with mega dropdowns would be detremental to the users.

Prior to v.4.0.0

The markup for links within the mega dropdowns was updated in readiness for accessibility changes. Also prior to this change only plain and external link icons were supported.

<!-- Main navigation content start -->
<div class="o-masthead-navigation t-accent-light t-accent-light--white u-clear--inner">
	<div class="l-content-container">
		<!-- Search start -->
		<form id="search" class="m-site-search l-max l-max--8-column-large" action="..." method="get" role="search" itemprop="potentialAction" itemscope="" itemtype="http://schema.org/SearchAction">
			<fieldset>
				<legend>Search</legend>
				<meta itemprop="target" content="..." />

				<label for="q" class="u-hidden--visually">Search site</label>
				<input type="search" name="..." id="..." value="" itemprop="query-input" class="m-site-search__input" placeholder="Type your question here..." />
				<button name="" id="..." type="submit" class="m-site-search__button">Search</button>
			</fieldset>
		</form>
		<!-- Search end -->

		<!-- Log in start -->
		<div id="login" class="o-masthead-login l-max l-max--6-column-medium l-max--6-column-large">
			<h2 class="u-hidden--visually">Log in or register</h2>
			<ul class="a-list-plain o-masthead-login__link-list">
				<li><a class="a-button a-button--full-width a-button--primary" href="...">Log in</a></li>
				<li class="o-masthead-login__link-list-divider"><span>or</span></li>
				<li><a class="a-button a-button--full-width" href="...">Register</a></li>
			</ul>
		</div>
		<!-- Log in end -->

		<!-- Logged in start -->
		<div id="loggedin" class="o-masthead-logged-in">
			<h2 class="u-hidden--visually">Your account</h2>
			<div class="o-masthead-logged-in__content">
				<p class="o-masthead-logged-in-title"><span class="o-masthead-logged-in-title__name">Hi ...</span><span class="u-hidden--visually">, </span><span class="o-masthead-logged-in-title__application">Your account</span></p>
				<ul class="a-list-plain">
					<li><a href="...">...</a></li>
					...
					<li class="o-masthead-logged-in__logout"><a href="...">Log out</a></li>
				</ul>
			</div>
			<div class="o-masthead-support">
				<div class="o-masthead-support__inner">
					<h4 class="o-masthead-support__heading a-heading a-heading--3">Get support</h4>
					<ul class="o-masthead-support__list a-list-plain">
						<li><a href="..." class="o-masthead-support__link o-masthead-support__link--contact" aria-label="..." ><span>Contact us</span></a></li>
						<li><a href="..." class="o-masthead-support__link o-masthead-support__link--claim" aria-label="..." ><span>Make a claim</span></a></li>
						<li><a href="..." class="o-masthead-support__link o-masthead-support__link--faq" aria-label="..." ><span>FAQs</span></a></li>
					</ul>
				</div>
			</div>
		</div>
		<!-- Logged in end -->

		<!-- Primary nav start -->
		<nav id="nav" role="navigation" class="m-primary-navigation">
			<h2 class="u-hidden--visually">Site navigation</h2>
			<!-- Repeatable navigation sections start -->
			<div class="m-primary-navigation__section [ Modifier ]">
				<h3 class="m-primary-navigation__section-heading a-heading a-heading--3"><a href="#example">...</a></h3>
				<div class="l-columns l-columns--3-medium l-columns--5-large">
					<!-- Standard column of links -->
					<div class="l-columns__column m-primary-navigation-sub-section">
						<h4 class="a-heading a-heading--3 m-primary-navigation-sub-section__heading">...</h4>
						<ul class="a-list-plain m-primary-navigation-sub-section__link-list">
							<!-- Optional sub-section description -->
							<li class="m-primary-navigation-sub-section__description">...</li>
							<!-- End optional sub-section description -->
							<li><a href="...">...</a></li>
						</ul>
					</div>

					<!-- Optional card column (always last) -->
					<div class="l-columns__column m-card t-accent-light t-accent-light--grey">
						<div class="m-card-content">
							<div class="m-card-content__inner m-card-content__inner--top">
								<h4 class="a-heading a-heading--3 a-heading--semibold">...</h4>
								<p>...</p>
							</div>
							<div class="m-card-content__inner m-card-content__inner--bottom">
								<p><a class="a-button a-button--primary" href="...">...</a></p>
							</div>
						</div>
					</div>
				</div>
				<a class="m-primary-navigation-sub-section__link" href="...">View all ... products>/a>
				<div class="o-masthead-support">
					<div class="o-masthead-support__inner">
						<h4 class="o-masthead-support__heading a-heading a-heading--3">Get support</h4>
						<ul class="o-masthead-support__list a-list-plain">
							<li><a href="..." class="o-masthead-support__link o-masthead-support__link--contact" aria-label="..." ><span>Contact us</span></a></li>
							<li><a href="..." class="o-masthead-support__link o-masthead-support__link--claim" aria-label="..." ><span>Make a claim</span></a></li>
							<li><a href="..." class="o-masthead-support__link o-masthead-support__link--faq" aria-label="..." ><span>FAQs</span></a></li>
						</ul>
					</div>
				</div>
			</div>
			<!-- Repeatable navigation sections end -->
			<div class="o-masthead-support">
				<div class="o-masthead-support__inner">
					<h3 class="o-masthead-support__heading a-heading a-heading--3">Get support</h3>
					<ul class="o-masthead-support__list a-list-plain">
						<li><a href="..." class="o-masthead-support__link o-masthead-support__link--contact"><span>Contact us</span></a></li>
						<li><a href="..." class="o-masthead-support__link o-masthead-support__link--claim"><span>Make a claim</span></a></li>
						<li><a href="..." class="o-masthead-support__link o-masthead-support__link--faq"><span>FAQs</span></a></li>
					</ul>
				</div>
			</div>
		</nav>
		<!-- Primary nav end -->

	</div>
</div>
<!-- Main navigation content end -->

Prior to v.3.4.0

Only sixteen national flags were available, the following list were not available:

  • United States
  • Australia
  • Austria
  • Belgium
  • Finland
  • Germany
  • Liechtenstein
  • Luxembourg
  • Netherlands
  • Norway
  • Sweden
  • Switzerland

Prior to v.3.3.0

The ability to show a navigation maker for the section that the page belongs to was not available.

The contrast difference between unselected, selected, hover and focus of sub-menu items at small screens was not very high. The contrast change has now been increases to improve accessibility of the masthead.

Style of mobile masthead until 3.3.0

Prior to v.3.2.0

The optional description for sub navigation titles was not available.

The content ordering for the global navigation was not correct when JavaScript was on but CSS was disabled. This has now been updated to improve accessibility of the component.

Prior to v.3.1.0

The masthead logo was not fully accessible, to improve accessibility the aria-label attribute was added to the o-masthead-logo__link.