@springernature/nature-header

Publisher level header

Usage no npm install needed!

<script type="module">
  import springernatureNatureHeader from 'https://cdn.skypack.dev/@springernature/nature-header';
</script>

README

Nature Header

NPM version

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:

A dropdown menu titled "Publish with us". The menu has 3 items. The last item has a keyline which visually separates it from the 2 items above it.

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 modals
  • c-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.