Page header

Every page must have a page header.

• The header is a page region.
• It must be a header element.
• It should have breadcrumbs.
• It must have a h1 with the page title.

Breadcrumbs

Breadcrumbs help the user to orientate within the app. We provide a breadcrumbs web component for this.

• Every page except the ‘home’ page should have breadcrumbs.
• The first crumb must be a link to the ‘home’ page.
• The current page must be the last crumb. This may not be a link.
• All other crumbs must be links to pages.

With actions

Buttons in the header should affect the entity referred to by the title, i.e. the object being shown on the page.

• Buttons must be size ‘large’
• Buttons must start with the form ‘[VERB/what you do]’, e.g ‘Save’
• Buttons may include [NOUN/the thing], e.g ‘Create Metric’ or ‘Connect Data Source’
• The primary button:
  • Must be furthest to the right
  • Must be ‘primary’
  • Must have an icon
  • May show a ‘busy’ spinner on clicking, if the action it performs is not immediate
• There can only be one primary button. All other buttons:
  • Must be ‘secondary’ or ‘flat’

For list pages that have a ‘create’ action, there should be a ‘create’ button in the header. The button must:

• Have a ’+’ icon;
• Include the text ‘Create’, e.g. ‘Create Dimension’
• No need to say it’s new, you don’t create something old.

Sticky header

Please use our component fun-header-controller to switch between different headers depending on the scroll position. You can see an example of this by scrolling in our example pages.

This is how you can style your scrolled header: