Nature Header

The Nature Header component includes:

• the journal’s logo - which appears in the top left
• a list of common actions, like view all journals, search and login - which appear in the top right
• a vertical list of dropdown menu links - which appear underneath the logo

When to use this component

Use the Nature Header for any product or service in the Nature Portfolio.

How it works

Navigation menu

The dropdown menu labels describe the main categories for the navigation menu sub-items. Research showed that users found what they needed more quickly and easily with the main categories listed out - rather than hidden behind a single “menu” button.

Do user research to learn the best way to categorise and label navigation menu items for the journal you’re working on.

Use sentence case, not title case, for the text of each menu label.

Separating menu items with keylines

In some cases, you may want to use a keyline to visually separate navigation menu items. For example, to separate social media links from the other navigation links, like this:

Installation

To use the Header component, enter the following command in your Terminal:

npm install @springernature/nature-header

Usage

Import the installed component code in your scss file:

@import '@springernature/nature-header/scss/50-components/header';

@import '@springernature/brand-context/default/scss/60-utilities/hiding.scss';

Then import the JavaScript as follows:

import {header} from '@springernature/nature-header/js/header';

header();

Once you’ve installed the scss and JavaScript, build your Header using the Handlebars template below as a guide.

Template

You can find a configurable template in the Header's view folder.

See an example in the Header's demo folder

The loops and conditional statements show which parts of the component contain dynamic content.

Header

In the oscar-sites-nature application, the color of the border on each journal’s header is defined from Pubserv. It will override the Header’s default black border.

Header logo

In the oscar-sites-nature application, some journals will have a compact variant of their logo shown at narrower viewports and swapped with another variant at wider viewports. An example of this is observable in Nature Cardiovascular Research journal's header.

Header expander

The Header’s JavaScript file uses the following from brand-context:

• Expander
• makeArray

When a user selects the trigger, the Global expander component opens and closes the specified target. You’ll need to put matching values into the href of the trigger and the id attribute on the target element to make this work.

Adding keylines above menu items

There are 2 ways to apply keylines to menu items.

If your menu is static - meaning it can’t be changed from another source, like a CMS - use the c-header__item--keyline classname to apply a keyline above a menu item. For example:

<li class="c-header__item c-header__item--keyline">
    <a href="some url">Some text</a>
</li>

If there is more than one group in a menu, a keyline is applied above the first menu item for all groups after the first group. For example, you may want to keep social media links grouped together, and visually separated from the other menu items:

<ul class="c-header__list">
    <li class="c-header__item"><a href="#">Site link</a></li>
</ul>
<ul class="c-header__list">
    <li class="c-header__item"><a href="#">Social network 1</a></li>
    <li class="c-header__item"><a href="#">Social network 2</a></li>
</ul>

Research on this component

The Pandora team originally created this component whilst redesigning the information architecture of the Nature journal websites.

The team designed the header to help users find what they needed more easily than with the previous version, which placed all navigation items behind a single “Menu” button.

A/B testing showed that exposing top-level navigation links in the menu increased the number of people visiting certain pages. For example, information for authors.

Read a blog post on the Nature header and navigation redesign

Help improve this page

If you’ve got a question, idea or suggestion about how to improve this component or guidance, post in the #design-systems Slack channel.