README
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/nature-header/scss/50-components/header-expander';
@import '@springernature/brand-context/default/scss/60-utilities/buttons.scss';
@import '@springernature/brand-context/default/scss/60-utilities/display.scss';
@import '@springernature/brand-context/default/scss/60-utilities/hiding.scss';
@import '@springernature/brand-context/default/scss/60-utilities/lists.scss';
@import '@springernature/brand-context/default/scss/60-utilities/spacing.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.
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.
For ease of maintenance, the scss
for this component is separated into 2 classnames and contained in 2 separate files:
c-header-expander
- for all interactive Header parts that users can open and close, like dropdown menus and pop-out modalsc-header
- for all other parts of the Header
You can find the HTML in the included handlebars template.
The loops and conditional statements show which parts of the component contain dynamic content.
Header expander
The Header’s JavaScript file uses:
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-expander__item–keyline
classname to apply a keyline above a menu item. For example:
<li class="c-header-expander__item c-header-expander__item--keyline">
<a href="some url">Some text</a>
</li>
If the items in your menu are dynamic, you can use the c-header-expander__item–keyline-first-item-only
classname to apply a keyline above the first menu item in a group.
For example, you may want to keep social media links grouped together, visually separated from the other menu items.
In these instances, you can apply c-header-expander__item–keyline-first-item-only
to a group of list items, so the first item in that group always has a keyline above it.
You can see an example of this in the view
template.
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.