Version
has been released! Read the upgrade guide

Masthead

The documentation on this page is considered legacy.

We will be updating this content to our new principle-based format in the near future.

A top level section displayed at the top of the page.

Overview

The Masthead is a simple section at the top of the page that allows the developer to communicate the service logo, user profile, notifications, and offer a search bar.

1Usage

The Masthead component is a main navigational component that resides at the top of an application. It is fixed in place and has a higher stacking order than the rest of the page, so content will flow underneath it on scroll. There should only be one Masthead component per page.

2Anatomy

  1. Container. The Masthead Container wraps the entire Masthead and ensures it stays pinned to the top of the viewport.

  2. Search. This button triggers the appearance of the Search Bar. When clicked, the page links in the Header.

  3. Notifications. This icon displays to the user when they have an unread notification. Clicking on the icon will display the Notification Sheet.

  4. Profile. This button links to the User's profile, including settings.

  5. App Nav. Works similarly to the Tabset, allowing the user to quickly navigate between multiple application pages.

3States

Aside from the active page links (an example of these states is shown in the Tabset Docs), the Masthead component only has two states. When the Search button is clicked in the top row of the Masthead, the page links are replaced with a full width search bar. Clicking on the Search button again will hide the bar.

The MOD.UK Design System provides guidance and tools for building high–quality Services within the UK Ministry of Defence. This project is open source and its source code is available on GitHub.

All content is available under the Apache 2.0 licence, except where otherwise stated.

© Crown copyright