• Organism
  • CORE COMPONENT
  • Taxonomic name: O-MASTHEAD
  • Added on: v3.0.0 (15/09/17)
  • Updated on: v5.10.0 (10/08/21)

Masthead

For displaying the masthead on a page optionally including site switching, country/language selection, primary navigation, search, login/logout and additional an message area.

Design and usage

There are three main variations of the masthead:

  • Simple - No main navigation links but can optionally have search log in/out button and/or register button.
  • Basic - Main navigation links go directly to pages. For use on microsites.
  • Standard - Main navigation links open mega dropdown with further navigation.

Shared rules

All three masthead variations carry these rules:

Structure

  • To be used as a primary navigation system.
  • Site switcher functionality should only be used for the very highest level categories such as Personal / Business.
  • Ensure that links within the logged in menu remain consistent within a country.

  • Optional elements:

    • Top black bar containing the optional:

    • Search

    • Either:

      • Logged in/out button and optional register button
      • or logged in menu with optional last logged in message
    • Additional content area

Placement

  • The masthead must be placed at the top of the browser window.
  • The masthead can be pushed down by our default cookie acceptance message.

Basic and standard variation shared rules

Structure

  • The masthead can accommodate any number of links depending on label length. It is recommended that there are no more than 5 primary categories/links. If the information architecture of a site contains more than 5 primary categories, it is likely to require refinement to be accommodated by this system.

  • At desktop and tablet, when the space available would no allow the primary links to fit along side any of the optional elements the following rules apply:

    • Search link reduces down to just the search icon
    • Log in and register reduce down to a single login button that will open a dropdown menu containing both an log in and register button.
    • Primary links reduce down to a single 'menu' link that opens a dropdown containing all the primary navigation categories and sub links if the standard menu.

  • Navigation marker

    • Selected marker is always shown for the public site level one section the page belongs to
    • Marker disappears once the public site level one links condense into the single menu
    • For sites such as MyAviva pages there is no level one marker in the account menu

Label

  • Ensure information architecture is well-structured and labeled to reflect the audience's mental models of how the site should work. Keep category labels as simple and succinct as possible without compromising their usability. Search analytics and open card sorts can help to uncover the language your audience uses and ways they would group information. Tree testing can be used to evaluate the effectiveness of your site's information architecture.

Non-JS requirements and considerations

  • When JS is turned off a single 'menu' link is available in the navigation that links to main navigation at the bottom of the page (before the footer)

Accessibility and screen readers

  • Inclusion of appropriate level headings to aid in understanding of the component whilst using assistive technologies. Although these headings do not follow the correct nesting order, once JavaScript has run, they do not constitute a failure of WCAG 1.3.1 as specified within WCAG technique H42 - example 2. This component is an exception to maintaining the heading order as removal of the headings would cause failure of WCAG 1.3.1 due to content being styled as headings but not marked up as headings, as well as detrementing any assistive technology users.

Examples

Simple masthead

Use case

  • For use on single page or on journeys such as quote

Interactive example

Code example

<div class="l-whole-page">
	<header>
		<p class="o-masthead-main-content"><a href="#main">Skip to content</a></p>
		<div class="o-masthead u-clear--inner" data-module="o-masthead" data-module-load="true">
			<div class="l-content-container o-masthead__navigation-container">
				<div class="o-masthead-logo">
					<a class="o-masthead-logo__link" href="..." aria-label="ABeille Assurances"><img class="o-masthead-logo__image" src="./v.2023.01/brands/documentation/assets/logo/abeille-assurances-logo.svg" decoding="async" width="130" height="24" alt="AVIVA" /></a>
				</div>
			</div>
		</div>
	</header>
	<div class="l-page-wrapper">
		<div id="#main" class="l-main-content" role="main">
			<!-- Main page content -->
		</div>
		<!-- Footer -->
	</div>
</div>

Simple masthead with site switcher and country selector

Interactive example

Code example

<div class="l-whole-page">
	<header>
		<p class="o-masthead-main-content"><a href="#main">Skip to content</a></p>
		<div class="m-site-country-selection">
			<div class="l-content-container">
				<ul class="a-list-plain m-site-country-selection__site-list">
					<li><a href="...">...</a></li>
					<li><span>...</span></li>
				</ul>
				<p class="m-site-country-selection__country [ Modifier ]"><a href="..." aria-label="... - select alternative country site">...<span>...</span></a></p>
			</div>
		</div>
		<div class="o-masthead u-clear--inner" data-module="o-masthead" data-module-load="true">
			<div class="l-content-container o-masthead__navigation-container">
				<div class="o-masthead-logo">
					<a class="o-masthead-logo__link" href="..." aria-label="ABeille Assurances"><img class="o-masthead-logo__image" src="./v.2023.01/brands/documentation/assets/logo/abeille-assurances-logo.svg" decoding="async" width="130" height="24" alt="AVIVA" /></a>
				</div>
			</div>
		</div>
	</header>
	<div class="l-page-wrapper">
		<div id="#main" class="l-main-content" role="main">
			<!-- Main page content -->
		</div>
		<!-- Footer -->
	</div>
</div>

Simple masthead for login and register

Use case

  • For use only on pages with restricted width centre-aligned content, eg login forms. This masthead variant my not contain any other links ie search.

Interactive example

Code example

<div class="l-whole-page">
	<header>
		<p class="o-masthead-main-content"><a href="#main">Skip to content</a></p>
		<div class="o-masthead o-masthead--centered u-clear--inner" data-module="o-masthead" data-module-load="true">
			<div class="l-content-container o-masthead__navigation-container">
				<div class="o-masthead-logo">
					<a class="o-masthead-logo__link" href="..." aria-label="ABeille Assurances"><img class="o-masthead-logo__image" src="./v.2023.01/brands/documentation/assets/logo/abeille-assurances-logo.svg" decoding="async" width="130" height="24" alt="AVIVA" /></a>
				</div>
			</div>
		</div>
	</header>
	<div class="l-page-wrapper">
		<div id="#main" class="l-main-content" role="main">
			<!-- Main page content -->
		</div>
		<!-- Footer -->
	</div>
</div>

Basic masthead

Structure

  • At desktop and tablet when the primary links reduce down to a single 'menu' link the primary links display left to right in a 4 column structure within the mega dropdown.
  • Do not include a 'Get support' section, that is available in the standard masthead, at any screen size. Our recommendation is to display these links in the footer if needed
  • Do not use arrows next to the primary navigation links

  • At mobile:

    • The links are H3 semibold #004FB6
    • On hover a #004FB6 keyline is displayed under the link
    • Selected/active pages have a background colour of #E5EDF8 that spans full width
    • Links are separated by a 1px #EEE keyline
    • The vertical padding above and below the links is 15px

Use case

  • Microsites that do not require the mega dropdown functionality.

Interactive example

Code example

<div class="l-whole-page">
	<header>
		<p class="o-masthead-main-content"><a href="#main">Skip to content</a></p>
		<div class="m-site-country-selection">
			<div class="l-content-container">
				<ul class="a-list-plain m-site-country-selection__site-list">
					<li><a href="...">...</a></li>
					<li><span>...</span></li>
				</ul>
			</div>
		</div>
		<div class="o-masthead u-clear--inner" data-module="o-masthead" data-module-load="true">
			<div class="l-content-container o-masthead__navigation-container">
				<div class="o-masthead-logo">
					<a class="o-masthead-logo__link" href="..." aria-label="ABeille Assurances"><img class="o-masthead-logo__image" src="./v.2023.01/brands/documentation/assets/logo/abeille-assurances-logo.svg" decoding="async" width="130" height="24" alt="AVIVA" /></a>
				</div>
				<ul class="a-list-plain o-masthead__skip-links">
					<li class="o-masthead__menu-link"><a href="#nav">Menu<span class="u-hidden--visually"> - skip to menu</span></a></li>
					<li class="o-masthead__login-link"><a href="[ direct login link ]">Log in<span class="u-hidden--visually"> - skip to log in</span></a></li>
					<li class="o-masthead__search-link"><a href="#search">Search<span class="u-hidden--visually"> - skip to search</span></a></li>
				</ul>
			</div>
			<!-- Optional area for extra content start -->
			<div class="o-masthead__extra-content u-clear--inner">
				<div class="l-content-container">
					<!-- Additional content -->
				</div>
			</div>
			<!-- Optional area for extra content end -->
		</div>
	</header>
	<div class="l-page-wrapper">
		<div id="#main" class="l-main-content" role="main">
			<!-- Main page content -->
		</div>
		<!-- Contextual help bar -->		<!-- Main navigation content start -->
		<div class="o-masthead-navigation o-masthead-navigation--basic t-accent-light t-accent-light--1 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="https://schema.org/SearchAction">
					<fieldset>
						<legend>Search</legend>
						<meta itemprop="target" content="..." />						<label for="..." 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 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</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>
					</ul>
				</div>
				<!-- Log in end -->				<!-- Primary nav start -->
				<nav id="nav" class="m-primary-navigation" aria-labelledby="navLabel">
					<h2 class="u-hidden--visually" id="navLabel">Site navigation</h2>
					<ul class="m-primary-navigation__link-list">
						<li><a class="a-button a-button--tertiary [ Modifier ]" href="..."><span class="a-button__inner">...</span></a></li>
						...
					</ul>
				</nav>
				<!-- Primary nav end -->			</div>
		</div>
		<!-- Main navigation content end -->
		<footer class="m-footer t-accent-dark">
			<!-- Footer content -->
		</footer>
	</div>
</div>

Standard masthead - logged out with navigation marker on investments section

Structure

  • The 'Get support' section must be included for each of the primary navigation items and a generic site one for mobile view. It must contain a 'Contact us' link but can also optionally 'Make a claim' and 'FAQs' links.
  • Ensure that the support bar within the logged in state menu remain consistent with the generic logged out support bar.

Sub-navigation descriptions

  • A description for a particular sub-navigation title can optionally be included within a navigation section.

    • Description text is must be between 55 and 85 characters long.
    • Must be included on all sub-navigation titles for a particular section.

Use case

  • For the vast majority of Abeille Assurances websites.

Interactive example

Code example

<div class="l-whole-page">
	<header>
		<p class="o-masthead-main-content"><a href="#main">Skip to content</a></p>
		<div class="m-site-country-selection">
			<div class="l-content-container">
				<ul class="a-list-plain m-site-country-selection__site-list">
					<li><a href="...">...</a></li>
					<li><span>...</span></li>
				</ul>
				<p class="m-site-country-selection__country [ Modifier ]"><a href="..." aria-label="... - select alternative country site">...<span>...</span></a></p>
			</div>
		</div>
		<div class="o-masthead u-clear--inner" data-module="o-masthead" data-module-load="true">
			<div class="l-content-container o-masthead__navigation-container">
				<div class="o-masthead-logo">
					<a class="o-masthead-logo__link" href="..." aria-label="ABeille Assurances"><img class="o-masthead-logo__image" src="./v.2023.01/brands/documentation/assets/logo/abeille-assurances-logo.svg" decoding="async" width="130" height="24" alt="AVIVA" /></a>
				</div>
				<ul class="a-list-plain o-masthead__skip-links">
					<li class="o-masthead__menu-link"><a href="#nav">Menu<span class="u-hidden--visually"> - skip to menu</span></a></li>
					<li class="o-masthead__login-link"><a href="#login">Log in<span class="u-hidden--visually"> - skip to log in</span></a></li>
					<li class="o-masthead__search-link"><a href="#search">Search<span class="u-hidden--visually"> - skip to search</span></a></li>
				</ul>
			</div>
			<!-- Optional area for extra content start -->
			<div class="o-masthead__extra-content u-clear--inner">
				<div class="l-content-container">
					<!-- Additional content -->
				</div>
			</div>
			<!-- Optional area for extra content end -->
		</div>
	</header>
	<div class="l-page-wrapper">
		<div id="#main" class="l-main-content" role="main">
			<!-- Main page content -->
		</div>
		<!-- Contextual help bar -->		<!-- Main navigation content start -->
		<div class="o-masthead-navigation 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="https://schema.org/SearchAction">
					<fieldset>
						<legend>Search</legend>
						<meta itemprop="target" content="..." />						<label for="..." 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 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 -->				<!-- Primary nav start -->
				<nav id="nav" class="m-primary-navigation" aria-labelledby="navLabel">
					<h2 class="u-hidden--visually" id="navLabel">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 class="a-button a-button--tertiary [ Modifier ]" href="..."><span class="a-button__inner">...</span></a></li>
								</ul>
							</div>							<!-- Optional card column (always last) -->
							<div class="l-columns__column m-card t-accent-light t-accent-light--3">
								<div class="m-card-content">
									<div class="m-card-content__inner">
										<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 a-button a-button--tertiary [ Modifier ]" href="..."><span class="a-button__inner">View all ... products</span></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--edit" aria-label="..." ><span>Manage your policy</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--edit"><span>Manage your policy</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 -->
		<footer class="m-footer t-accent-dark">
			<!-- Footer content -->
		</footer>
	</div>
</div>

Standard masthead - logged in

Interactive example

Code example

<div class="l-whole-page">
	<header>
		<p class="o-masthead-main-content"><a href="#main">Skip to content</a></p>
		<div class="m-site-country-selection">
			<div class="l-content-container">
				<ul class="a-list-plain m-site-country-selection__site-list">
					<li><a href="...">...</a></li>
					<li><span>...</span></li>
				</ul>
				<p class="m-site-country-selection__country [ Modifier ]"><a href="..." aria-label="... - select alternative country site">...<span>...</span></a></p>
			</div>
		</div>
		<div class="o-masthead u-clear--inner" data-module="o-masthead" data-module-load="true">
			<div class="l-content-container o-masthead__navigation-container">
				<div class="o-masthead-logo">
					<a class="o-masthead-logo__link" href="..." aria-label="ABeille Assurances"><img class="o-masthead-logo__image" src="./v.2023.01/brands/documentation/assets/logo/abeille-assurances-logo.svg" decoding="async" width="130" height="24" alt="AVIVA" /></a>
				</div>
				<ul class="a-list-plain o-masthead__skip-links">
					<li class="o-masthead__menu-link"><a href="#nav">Menu<span class="u-hidden--visually"> - skip to menu</span></a></li>
					<li class="o-masthead__logged-in-link"><a href="#loggedin"><span class="o-masthead-logged-in-link__name">Hi ...</span> Your account<span class="u-hidden--visually"> - skip to your account</span></a></li>
					<li class="o-masthead__search-link"><a href="#search">Search<span class="u-hidden--visually"> - skip to search</span></a></li>
				</ul>
			</div>
			<!-- Optional area for extra content start -->
			<div class="o-masthead__extra-content u-clear--inner">
				<div class="l-content-container">
					<!-- Additional content -->
				</div>
			</div>
			<!-- Optional area for extra content end -->
		</div>
	</header>
	<div class="l-page-wrapper">
		<div id="#main" class="l-main-content" role="main">
			<!-- Main page content -->
		</div>
		<!-- Contextual help bar -->		<!-- Main navigation content start -->
		<div class="o-masthead-navigation 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="https://schema.org/SearchAction">
					<fieldset>
						<legend>Search</legend>
						<meta itemprop="target" content="..." />						<label for="..." 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 id="..." type="submit" class="m-site-search__button">Search</button>
					</fieldset>
				</form>
				<!-- Search end -->				<!-- Logged in start -->
				<nav id="loggedin" class="o-masthead-logged-in" aria-labelledby="loggedinLabel">
					<h2 class="u-hidden--visually" id="loggedinLabel">Your account</h2>
					<div class="o-masthead-logged-in__content">
						<p class="o-masthead-logged-in-title" aria-hidden="true"><span class="o-masthead-logged-in-title__name">Hi ...</span><span class="o-masthead-logged-in-title__application">Your account</span></p>
						<ul class="a-list-plain">
							<li><a class="a-button a-button--tertiary [ Modifier ]" href="..."><span class="a-button__inner">...</span></a></li>
							...
							<li class="o-masthead-logged-in__logout"><a class="a-button a-button--tertiary [ Modifier ]" href="..."><span class="a-button__inner">Log out</span></a></li>
							<!-- Optional last logged in message -->
							<li class="o-masthead-logged-in__last-time">...</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--edit" aria-label="..." ><span>Manage your policy</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>
				</nav>
				<!-- Logged in end -->				<!-- Primary nav start -->
				<nav id="nav" class="m-primary-navigation" aria-labelledby="navLabel">
					<h2 class="u-hidden--visually" id="navLabel">Site navigation</h2>
					<!-- Repeatable navigation sections start -->
					<div class="m-primary-navigation__section">
						<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 class="a-button a-button--tertiary [ Modifier ]" href="..."><span class="a-button__inner">...</span></a></li>
								</ul>
							</div>							<!-- Optional card column (always last) -->
							<div class="l-columns__column m-card t-accent-light t-accent-light--3">
								<div class="m-card-content">
									<div class="m-card-content__inner">
										<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 a-button a-button--tertiary [ Modifier ]" href="..."><span class="a-button__inner">View all ... products</span></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 -->
		<footer class="m-footer t-accent-dark">
			<!-- Footer content -->
		</footer>
	</div>
</div>

Dark Masthead

Dark variant that changes the masthead to use a dark accent accent colour, turning all links and icons used white. This variant is intended for use alongside automated theming by providing support for a dark brand colour to be used for the masthead.

Visual example of a dark accent masthead included within the alternative logo example.

Powered by Aviva

Variant to add powered by Abeille Assurances logo to the "Get support" bar within the mega dropdowns. This is intended for use with partner websites.

Visual example of the powered by Abeille Assurances variant is included within the alternative logo example.

Alternative logo

Designed to house sizes / ratios of brand logos; this is to allow for the flexibility to cater for all logo types. The maximum logo size is 180px wide or 60px deep, whichever is the greater.

The masthead area is deeper in order to cater for the larger logo sizes, becoming 80px deep at tablet and desktop rather than 60px.

Example shown also using alternative logo area and powered by Abeille Assurances variant of masthead.

Added chevrons

Down/up chevrons are added to indicate where menu options are expandable. The chevrons will not be applied if used with the basic masthead which does not have expandable menus.

Development and test

Notes for developers

Ensure that all links used are fully understandable when presented with any content eg. "Find out more" button on a promotional card has accessible text to say what it is referring too. This can be achieved by either using visually hidden additional text or providing more descriptive text within the aria-label attribute. Any links with the same text within the navigation also need to have additional descriptive text added to them if they are linking to different locations.

Company logo

The logo within the masthead should always link to the website's homepage. There are several reasons why this should be done including:

  • Returning to the homepage is a very common task for users, who will often go to the homepage when they are diorientated, have gone too deep into a site or are simply ready to start a new task.
  • The majority of users will enter websites via search engines meaning, they will most likely land on interior pages and bypass the homepage entirely. Easy access to the homepage provides them with a fresh starting point if they ended up on the wrong page or want to explore other parts of the site.

If there is a strong use case for not having the company logo linking to the homepage the code can be modified as follows.

<a class="o-masthead-logo__link" href="..." aria-label="ABeille Assurances"><img class="o-masthead-logo__image" src="./v.2023.01/brands/documentation/assets/logo/abeille-assurances-logo.svg" decoding="async" width="130" height="24" alt="AVIVA" /></a>

Would change to:

<span class="o-masthead-logo__link"><img class="o-masthead-logo__image" src="./v.2023.01/brands/documentation/assets/logo/abeille-assurances-logo.svg" decoding="async" width="130" height="24" alt="AVIVA" /></span>

Customisable / optional elements

Site switcher

Optional, and should only be used for the very highest level categories such as Personal / Business. For further information about this component and how to use and implement it see the site switcher documentation.

Country selection

If country selection is included it must link to a page that contains the country selection module. The content will then be pulled in from that page to build the dropdown menu when required.

Ensure that an apporiate value is applied to the aria label on the country selector link to make it clear what this link is for. The aria label must start with the text that is used within the anchor tag.

Website domain language indicator is optional but must be wrapped in a <span>.

<p class="m-site-country-selection__country [ Modifier ]">
	<a href="..." aria-label="... - select alternative country site">...
		<span> [ Website domain language indicator ] </span>
	</a>
</p>
Search

Optional. Can also be used to link to a search field within that opens as part of the mega dropdown (show within examples), but can also be used to link to a search field within the page that is not included within the mega dropdown (link must anchor directly to the search input field to transfer focus correctly) or link out to an external search page. Note: with the latter two options no link is displayed at mobile.

Log in and register

Optional. Can contain a login and register button which is displayed in the yellow bar at medium to large screens where space allows otherwise displays as just login which opens a dropdown with both options. It is possible to have a single login or logout link to an external page but these will not display on small screens.

Logged in state

Optional. Should only display the users first name and will be truncated if the name is too long to fit within the menu item.

Main menu items

The main menu items will display in a single menu mega menu when on small screens but also at medium and large screens when the menu items can not fit.

A section can be highlighted to indicate which level one section the current page sits under. This can be achevied by adding the class is-selected to the relevant m-primary-navigation__section. This is not for use with the logged in state menu.

m-primary-navigation__section-heading can be have a link to a section landing page. If a link is included ensure that a m-primary-navigation-sub-section__link is also included within that navigation section to ensure users can access all pages within the section of the site on all screen sizes.

The content within a m-primary-navigation__section can be made up of a maximum of five columns on large screens, with the last one optionally being a promotional card.

Support bar

Support bars must be included for all navigation sections as well as a global one for small screens within the standard masthead. The "Make and claim" and "FAQs" links are optional and should be set as appropriate for each section. The links included within the global support bar must link to global versions of the pages and must be consistent across all sites within a teratory.

Ensure that all the links within the support bars have appropriate aria-label text to differentiate the links from each other.

Extra content area

Optional. Can be used to place any extra content required eg. share price. The area is a maximum of 300px wide and 60px high. Ensure any content placed within this area does not exceed these dimensions.

If the content within this area is dynamically updated post initial page load then the redraw function must be called on the masthead element in order to recalculate what can fit at the current window size.

mastheadInstance.redraw();

See how to interact with Framework components for more information.

Sub-section description text

Optional, but if used, must be included on all subsections within the section.

Copy for the description must be between 55 and 85 characters long ( including spaces ).

Modifiers for the masthead

There are a number of modifiers for the masthead which can be optionally be applied alone or together. These are:

Dark masthead (o-masthead--dark)
Change the masthead to use a dark accent colour with white text and icons
Alternative logo (o-masthead--alt logo)
Change the masthead to enable it to house a larger range of logo sizes and ratios by making it taller
Added chevrons (o-masthead--alt logo)
The masthead to add down/up chevrons to indicate where menu options are expandable
Basic masthead (o-masthead-navigation--basic)
For microsites that do not require the mega dropdown functionality (will not apply chevrons)
Powered by Abeille Assurances (o-masthead-navigation--powered-by)
Include a "Powered by Aviva" logo within the "Get support" bar within the mega dropdowns

Changing locale settings

Default text for elements within the masthead can be changed for a particular locale.

en: {
	oMasthead : {
		menuText : 'Menu',
		closeText : 'Close',
		loadingText : 'Please wait',
		switcherInitial : 'Select your preferred option',
		switcherSelection : 'You are on {option}',
		primaryNavigationLabel : 'Primary navigation',
	},
},

For more information on this, see our page on how to change locale settings within JavaScript.

Visible labels and accessible names

If additional information is required to add context to a skip link, then an extra span with the class u-hidden--visually is required within the o-masthead__login-link skip link to hold the hidden text required to make the accessible name for the label meaningful to screen readers. The visible label should always come first, with the hidden text following on to extend this by adding meaning and context, for example:

<li class="o-masthead__login-link"><a href="...">Log in<span class="u-hidden--visually"> - skip to log in</span></a></li>

Notes for testers

The exact order of the countries under an area at tablet and desktop size may vary between browsers.

When JavaScript is available ensure that each navigation item can be opened via both mouse and keyboard and that all links within the open navigation panel can then be accessed in the same way.

With JavaScript and a navigation panel open, ensure that if navigating via a keyboard the user remains within the masthead and navigation panel (Can not tab to elements within the rest of the page).

When JavaScript is available, at small screens search, login and register, logged in state, main menu and a generic support bar will be displayed in a single menu. At tablet and above the largest number of items will be fitted within the yellow navigation bar with the main navigation items having priority.

Ensure that when navigating by keyboard that it is clear which link currently has focus.

When search opens a search form within the megamenu focus should be transfered to the search input to allow users to instantly start entering search terms.

Classes overview

The following table gives you a quick overview of the CSS classes that can be applied.

Class Outcome Required Applied to Comments
.o-masthead-main-content Base style for skip to content link Yes header > div Should be the first element within the header
.m-site-country-selection Base style for bar that sits above the masthead containing site switcher and country selector Yes (if section included) header > div  
.m-site-country-selection__site-list Base styling for tabbed site switcher link list Yes (if tabbed site switcher included) .m-site-country-selection > .l-content-container > ul.a-list-plain  
.m-site-country-selection__site-switcher Base styling for show/hide site switcher link Yes (if show/hide site switcher included) .m-site-country-selection > .l-content-container > p  
.m-site-country-selection__country Base style for country list Yes (if country selection included) .m-site-country-selection > .l-content-container > p Must follow .m-site-country-selection__site-list if included. Website domain language indicator is optional but must be wrapped in a <span>.
.m-site-country-selection__country--com Modifier to add flag icon for Global   .m-site-country-selection__country
Website domain language indicator: .com
.m-site-country-selection__country--at Modifier to add flag icon for Austria   .m-site-country-selection__country
Website domain language indicator: .at
.m-site-country-selection__country--au Modifier to add flag icon for Australia   .m-site-country-selection__country
Website domain language indicator: .au
.m-site-country-selection__country--be Modifier to add flag icon for Belgium   .m-site-country-selection__country
Website domain language indicator: .be
.m-site-country-selection__country--ca Modifier to add flag icon for Canada   .m-site-country-selection__country
Website domain language indicator: .ca
.m-site-country-selection__country--ch Modifier to add flag icon for Switzerland   .m-site-country-selection__country
Website domain language indicator: .ch
.m-site-country-selection__country--cn Modifier to add flag icon for China   .m-site-country-selection__country
Website domain language indicator: .com.cn
.m-site-country-selection__country--de Modifier to add flag icon for Germany   .m-site-country-selection__country
Website domain language indicator: .de
.m-site-country-selection__country--es Modifier to add flag icon for Spain   .m-site-country-selection__country
Website domain language indicator: .es
.m-site-country-selection__country--fi Modifier to add flag icon for Finland   .m-site-country-selection__country
Website domain language indicator: .fi
.m-site-country-selection__country--fr Modifier to add flag icon for France   .m-site-country-selection__country
Website domain language indicator: .fr
.m-site-country-selection__country--gb Modifier to add flag icon for United Kingdom   .m-site-country-selection__country
Website domain language indicator: .co.uk
.m-site-country-selection__country--hk Modifier to add flag icon for Hong Kong   .m-site-country-selection__country
Website domain language indicator: .com.hk
.m-site-country-selection__country--id Modifier to add flag icon for Indonesia   .m-site-country-selection__country
Website domain language indicator: .co.id
.m-site-country-selection__country--ie Modifier to add flag icon for Ireland   .m-site-country-selection__country
Website domain language indicator: .ie
.m-site-country-selection__country--in Modifier to add flag icon for India   .m-site-country-selection__country
Website domain language indicator: .india.in
.m-site-country-selection__country--it Modifier to add flag icon for Italy   .m-site-country-selection__country
Website domain language indicator: .it
.m-site-country-selection__country--li Modifier to add flag icon for Liechtenstein   .m-site-country-selection__country
Website domain language indicator: .li
.m-site-country-selection__country--lt Modifier to add flag icon for Lithuania   .m-site-country-selection__country
Website domain language indicator: .lt
.m-site-country-selection__country--lu Modifier to add flag icon for Luxembourg   .m-site-country-selection__country
Website domain language indicator: .lu
.m-site-country-selection__country--nl Modifier to add flag icon for Netherlands   .m-site-country-selection__country
Website domain language indicator: .nl
.m-site-country-selection__country--no Modifier to add flag icon for Norway   .m-site-country-selection__country
Website domain language indicator: .no
.m-site-country-selection__country--pl Modifier to add flag icon for Poland   .m-site-country-selection__country
Website domain language indicator: .pl
.m-site-country-selection__country--sg Modifier to add flag icon for Singapore   .m-site-country-selection__country
Website domain language indicator: .com.sg
.m-site-country-selection__country--se Modifier to add flag icon for Sweden   .m-site-country-selection__country
Website domain language indicator: .se
.m-site-country-selection__country--tr Modifier to add flag icon for Turkey   .m-site-country-selection__country
Website domain language indicator: .tr
.m-site-country-selection__country--tw Modifier to add flag icon for Taiwan   .m-site-country-selection__country
Website domain language indicator: .tw
.m-site-country-selection__country--us Modifier to add flag icon for United States   .m-site-country-selection__country
Website domain language indicator: .us
.m-site-country-selection__country--vn Modifier to add flag icon for Vietnam   .m-site-country-selection__country
Website domain language indicator: .com.vn
.o-masthead Base style website masthead Yes header > div Must follow .m-site-country-selection if included
.o-masthead--centered Modifier to center the company logo for pages such as login and register Yes .o-masthead  
.o-masthead--alt-logo Modifier to increase the height of the masthead to accomodate a wider range of logo sizes and ratios   .o-masthead  
.o-masthead--chevron Modifier to add chevrons next to indicate where menu options are expandable   .o-masthead  
.o-masthead--dark Modifier to change the masthead to use a dark accent colour with white text and icons   .o-masthead  
.o-masthead--landing-page-bottom Modifier to revert the landing page link for a section to the bottom of the mega menu at tablet and desktop, where it was originally located by default prior to v5.8.0   .o-masthead  
.o-masthead__navigation-container Base style masthead content container Yes .o-masthead > .l-content-container  
.o-masthead-logo Base style masthead logo area Yes .o-masthead__navigation-container > div  
.o-masthead-logo__link Base style masthead logo link Yes .o-masthead-logo > a  
.o-masthead-logo__image Base style masthead logo image Yes .o-masthead-logo__link > img  
.o-masthead__skip-links Base style for page skip links Yes .o-masthead-logo + ul.a-list-plain  
.o-masthead__menu-link Base style for main menu skip link Yes (if main menu included) .o-masthead__skip-links > li Must be first item in list
.o-masthead__login-link Base style for login/logout skip link Yes (if login/register included) .o-masthead__skip-links > li Must follow the main menu link in the list
.o-masthead__logged-in-link Base style for logged in state skip link Yes (if logged in state included) .o-masthead__skip-links > li Must follow the main menu link in the list
.o-masthead-logged-in-link__name Base style for the users name displayed within the logged in state skip link Yes (if logged in state included) .o-masthead__logged-in-link > a > span Must be the first element within the skip link
.o-masthead__search-link Base style for search skip link Yes (if search included) .o-masthead__skip-links > li Must follow the login/logout link in the list
.o-masthead__extra-content Base style for extra content area Yes (if extra content area included) .o-masthead__navigation-container + div  
.o-masthead-navigation Base style for main navigation area that is displayed as megamenu when JavScript is available Yes (if main menu, login or search included) .content-wrapper > div Must come directly before the footer
.o-masthead-navigation--basic Modifier to adjust the spacing for the basic navigation in comparison to the standard spacing Yes (if basic masthead is required) .o-masthead-navigation  
.o-masthead-navigation--powered-by Modifier to include "powered by Aviva" logo to the "Get support" bar within the mega dropdown   .o-masthead-navigation  
.m-site-search Base style for site search Yes (if search included) .o-masthead-navigation > .l-content-container > form Must be before the main menu and login content
.m-site-search__input Base style for search input field Yes .m-site-search > fieldset > input Must be before the main menu and login content
.m-site-search__button Base style for search input field Yes .m-site-search__input + button Must be after the search input field
.m-primary-navigation Base style primary navigation Yes (if main menu included) .o-masthead-navigation > .l-content-container > nav Must follow the search form if one is included
.m-primary-navigation__link-list Base style for basic masthead primary link list Yes (if basic masthead is required) .m-primary-navigation > ul  
.m-primary-navigation__section Base style for a primary navigation section Yes .m-primary-navigation > div  
.is-selected State for the navigation section to show the navigation marker Yes .m-primary-navigation__section
.m-primary-navigation__link-list > .a-button 		 
.m-primary-navigation__section-heading Base style for a primary navigation section heading Yes .m-primary-navigation__section > .a-heading--2 Text used for the links added for primary navigation within the masthead at large screens
.m-primary-navigation-sub-section Base style for column within primary navigation section Yes .m-primary-navigation__section > l-columns > .l-columns__column  
.m-primary-navigation-sub-section__heading Base style for headings within a sub section Yes .m-primary-navigation-sub-section > .a-heading--3 Can contain an anchor tag if required
.m-primary-navigation-sub-section__link-list Base style for list of links under a sub section heading Yes .m-primary-navigation-sub-section__heading + ul.a-list-plain  
.m-primary-navigation-sub-section__description Style for optional sub-section description text Yes .m-primary-navigation-sub-section__link-list > li:first-child Required when description text is included. All .m-primary-navigation-sub-section__link-list within the section must include have a description if one is to be included.
.m-primary-navigation-sub-section__link Base style for the section landing page link Yes .m-primary-navigation-sub-section__heading + ul + a Must contain a span
.o-masthead-support Base style for support bar that sits below the primary navigation sections Yes .m-primary-navigation > div Must come after all the primary navigation sections
.o-masthead-support__inner Base style inner container for the support bar Yes .o-masthead-support > div  
.m-primary-navigation__section-heading Base style for support bar heading Yes .o-masthead-support__inner > .a-heading--2  
.o-masthead-support__list Base style for support bar list of links Yes .o-masthead-support__heading + .a-list-plain  
.o-masthead-support__link Base style for support bar link Yes .o-masthead-support__list > li > a Must contain a span
.o-masthead-support__link--contact Modifier for support bar contact link   .o-masthead-support__link  
.o-masthead-support__link--claim Modifier for support bar claims link   .o-masthead-support__link  
.o-masthead-support__link--edit Modifier for support bar edit link   .o-masthead-support__link  
.o-masthead-support__link--faq Modifier for support bar FAQ link   .o-masthead-support__link  
.o-masthead-login Base login/register area Yes (if login/register included) .o-masthead-navigation > .l-content-container > div Must preceed the primary navigation if one is included and follow the search section if included
.o-masthead-login__link-list Base login/register link list Yes .o-masthead-login > ul.a-list-plain  
.o-masthead-login__link-list-divider Base for displaying a divider between the login and register buttons Yes .o-masthead-login__link-list > li  
.o-masthead-logged-in Base logged in state menu Yes (if logged in state included) .o-masthead-navigation > .l-content-container > nav Must preceed the primary navigation if one is included and follow the search section if included
.o-masthead-logged-in__content Base logged in state menu content container Yes (if logged in state included) .o-masthead-logged-in > div Must preceed the primary navigation if one is included and follow the search section if included
.o-masthead-logged-in-title Base logged in state menu title container (shown at small screen sizes) Yes (if logged in state included) .o-masthead-logged-in__content > p First element within the .o-masthead-logged-in__content
.o-masthead-logged-in-title__name Base logged in state menu user name style Yes (if logged in state included) .o-masthead-logged-in-title > span First element within the .o-masthead-logged-in-title
.o-masthead-logged-in-title__application Base logged in state menu application name style eg. "Your account" Yes (if logged in state included) .o-masthead-logged-in-title > span Last element within the .o-masthead-logged-in-title
.o-masthead-logged-in__logout Base logged in state menu logout link Yes (if logged in state included) .o-masthead-logged-in__content > .a-plain-list > li Last list item within the logged in state menu unless the last logged in message is included
.o-masthead-logged-in__last-time Base last logged in message (optional) Yes (if required) .o-masthead-logged-in__content > .a-plain-list > li:last-child Last list item within the logged in state menu

Keyboard operations

TAB

Tabbing to a link should make the link clearly visually different so that the focus point on the page is obvious to the user. If a mega menu is open the user should only be able to navigate to links within the open mega menu and masthead.

Enter

When JavaScript is available hitting enter on a masthead link to the country selector, main menu, search or login should open the megamenu if it is not already open, change the opened content if the menu is already open or close the menu if the menus content is already open.

Component releases

  • Added on: v3.0.0 (15/09/17)
  • Updated on: v5.10.0 (10/08/21)

Latest update:

  • updated: It is recommended that all landmark elements have a unique label to aid assistive technology users with their understanding of the page they are viewing and its structure. Masthead has been updated to include aria on the primary navigation element.
  • updated: The extra content area will now display within the masthead bar at desktop to reduce Cumulative Layout Shift (CLS) for the majority of occurances of masthead.
  • fixed: Fix for masthead not supporting the logged in menu without any logged out menu items. The locale file now contains an additional entry ('menuText') for the masthead menu link label for if no menu link is provided within the markup.

Full version history

A full history of changes and enhancements detailing all minor and major updates to the component.

View full version history

Want something new in Framework, or to chat about an issue you're having with it?

Contact the team