skip to content

Header (new)

The header helps users navigate across Springer Nature services and find the information they need.

It includes:

  1. The logo of the product, which appears on the left. This must link to the domain’s home page.

  2. Navigation, the main links that let users get around the website. These appear as a horizontal list but collapse into a menu on smaller screens.

  3. Utilities are tools and secondary actions. For example, Springer Nature account or notifications. They appear on the right.

Header with the 3 main parts indicated with the numbers 1, 2 and 3

Demo

{{> eds-c-header-new}}

When to use this component

Use the header for any product, service or website within the Springer Nature brand. The header must be at the top of every page.

How it works

Use the eds-c-header-new component.

We will keep eds-c-header in the package until all teams have started using eds-c-header-new.

Installation

To install the components, go to the get started guide for developers.

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

npm install @springernature/elements

Then, import the style of the Header component into your scss file:

@import '../../node_modules/@springernature/elements/components/eds-c-header-new';
@import '../../node_modules/@springernature/elements/components/eds-c-navigation'; 
@import '../../node_modules/@springernature/elements/components/eds-c-accordion';

For separate pages, for example error or login pages, you can use the header with only the logo visible. Do not use this for other page types.

2 versions of the header indicated by numbers 1 and 2. 1 shows the header with main navigation included. 2 shows it without the main navigation

To use the default header pass:

logo, headerNavigation object with navigationMain and navigationActionItems, headerNavigationMenu, headerYourWork and headerAccount.

To use the focussed header pass:

logo, headerNavigation object with navigationActionItems, headerYourWork and headerAccount.

To use the header with only the logo pass:

logo object on its own.

For more detailed information on how to use the properties correctly, go to the schema file.

The header uses the navigation component. Use the eds-c-navigation component and set the property trayDropdown: to true.

For websites with more sections, use the dropdown menus to organise pages into groups. Do not create more than 4 dropdowns.

Header with main navigation. There are 3 dropdown menus, each indicated by a chevron to its right

Within a dropdown, group links into columns with a heading. Dropdown menus open on select and close when the user selects outside of the menu. For keyboard users, pressing the escape key will close the menu.

Header with the first dropdown menu active on a larger viewport. Group 1 is highlighted in blue and an overlay window is open under the header. This window contains 2 columns with headings and links listed under these headings

On small viewports the navigation component uses the accordion component.

Header on a smaller viewport. Main navigation is replaced by a menu button to the right of the account button. Groups show as an accordion

This replaces the navigation with a menu button. When active, navigation will display as an accordion. In this view, groups are represented as sections that can be collapsed and expanded. The first section is open by default.

Use standard links when you have a flat website hierarchy or if a particular link does not fit within a group.

Header with main navigation. There are 2 dropdown menus and then a standard link

Creating navigation

If you are creating a new main navigation, make sure the:

  • proposed navigation is tested with users

  • labels are clear and unambiguous

  • labels follow our digital writing guidelines

The header on Springer Nature Link uses specific navigation. This set of links is defined by the UX and Product teams and you must not make changes without approval.

Before making a request to change this navigation, read the Springer Nature Navigation governance.

Utilities

Utilities are things users might find it helpful to have access to as they use a product or service.

Some utilities display across multiple products and apply to the whole system. These include:

  • ‘Your work’ menu with links to tasks within the researcher journey

  • ‘Account’ menu providing access to a user’s Springer Nature profile and account settings

To integrate with the Springer Nature Identity service, use their API. This will give you the data you need for the account menu in the component.

Header with the account menu active and user logged in. An overlay appears under the header. This contains the name and email address of the account and links for manage your account, subscriptions and purchases and log out

When a user is not logged in, the links in these menus will go to the Springer Nature login flow.

Header with account menu active and user logged out. An overlay appears under the header. This contains links for manage your account and subscriptions and purchases.

Some utilities are product specific, for example search and the shopping cart. Only include them when they are functional to the product experience.

When the search button is active, a panel will display an input field.

Header with search included. Search button and icon are on the right and active. An overlay appears below the header. This contains a search input field and button

Notifications

The 'Your work’ menu icon shows a red dot when users have unread notifications. When a user opens the menu, a badge showing number of unread notifications will appear next to the notifications link.

Header with the your work menu active. An overlay window appears under the header. This contains a link to notifications with a red badge to the right of it showing how many unread messages there are. Further links are then listed

Notifications are served by the in-app service. For information on how to design for notifications, go to the content and design rules.

Springer Nature logos are displayed in two formats: a single line and stacked. For viewports smaller than 1220px, the stacked version will display.

2 versions of the Springer Nature logo. One is on a single line, the other has Springer stacked above Nature

All logos must follow our brand guidelines and be approved by our brand team. This includes internal services.

Without JavaScript

The Elements Design System takes a progressive enhancement approach with all components. This means we provide a baseline experience for scenarios when there is no JavaScript. This way, our services will work with basic HTML.

The behaviour of the navigation and utility menus is different with no JavaScript:

  • on larger viewports, dropdown links will anchor to the bottom of the page

  • on smaller viewports, the menu button will anchor to the bottom of the page

  • the search field is open by default and sits underneath the header

  • notifications appear at the bottom of the page

  • the account menu becomes a link to the account landing page

Header with no JavaScript. Search always appears below the header

To apply the appropriate labels for assistive technology, use cartCountAriaLabel for cart and hasNotificationAriaLabel for notifications.

JavaScript

Import the javascript files:

import EdsCHeaderNew from '@springernature/elements/components/eds-c-header-new/js/eds-c-header-new'; 
import EdsCAccordion from '@springernature/elements/components/eds-c-accordion/js/eds-c-accordion'; 
import navigation from '@springernature/elements/components/eds-c-navigation/js/eds-c-navigation';

If your product has a cart or contains a link to notifications, use the appropriate properties to make that functionality accessible.
On the event of a user adding a new item to the cart, use the cartHandler function passing a count and a message as parameters. Do not forget to update the actual value of the cartCount and cartCountAriaLabel in your application.

Example:

import EdsCHeaderNew from '@springernature/elements/components/eds-c-header-new/js/eds-c-header-new';
const headerNew = new EdsCHeaderNew();

// 1. event: cartCount 0, user adds 1 item. A request is sent to the server to update cartCount and cartCountAriaLabel properties.
// 2. use the header function to handle the event on the user interface

headerNew.cartHandler(1, 'Your cart has 1 item');

This function will:

  • update the user interface visually
  • handle aria-live regions updates for screen reader users

On the event of a user receiving a notification, use the notificationHandlerfunction passing a message. Do not forget to update the actual value of the hasNotificationAriaLabel in your application.

Example:

import EdsCHeaderNew from '@springernature/elements/components/eds-c-header-new/js/eds-c-header-new';
const headerNew = new EdsCHeaderNew();

// 1. event: the user gets a new notification. If used, hasNotificationAriaLabel property is updated.
// 2. use the header function to handle the event on the user interface.

headerNew.notificationHandler('you have new notifications');

When an update happens in an ARIA live region, screen readers announce that update once. In the header component these announcements are placed inside a list.
After your event happens, make sure to clean up the list, using the function cleanAriaLiveAnnouncements.

Template

To support progressive enhancement, the component has a main template and partials templates.

Partials need to be placed in specific areas of your application to achieve the required design in JavaScript and non JavaScript experiences.

At the top of the page place the main header template, the search template and the notification template:

    
    {{#with data.eds-c-header-new}} 
        <div class="eds-c-header__wrapper">
            {{> eds-c-header-new}}
            {{#with headerSearch}}
                <div class="u-js-hide">
                    {{> eds-c-header-new/partials/eds-c-header-new-search-dropdown}}
                </div>
            {{/with}}
            {{#with headerYourWork.notifications}}
                <div class="u-js-hide">
                    <div class="u-container">
                        {{> eds-c-header-new/partials/eds-c-header-new-notifications}}
                    </div>
                </div>
            {{/with}}
        </div>
    {{/with}}

At the bottom of the page place, the navigation expander partial, the account partial, the navigation mobile menu partial and your work partial:

    
    {{#with data.eds-c-header-new}}
        {{#with headerNavigation.navigationMain}}
            <div class="u-js-hide">
                <div class="u-container">
                    {{> eds-c-navigation/eds-c-navigation-expander}}
                </div>
            </div>
        {{/with}}
        {{#with headerAccount}}
            <div class="u-js-hide">
                <div class="u-container">
                    {{> eds-c-header-new/partials/eds-c-header-new-account}}
                </div>
            </div>
        {{/with}}
        {{#with headerNavigationMenu}}
            <div class="u-js-hide">
                <div class="u-container">
                    {{> eds-c-header-new/partials/eds-c-header-new-navigation-menu}}
                </div>
            </div>
        {{/with}}
        {{#with headerYourWork}}
            <div class="u-js-hide">
                <div class="u-container">
                    {{> eds-c-header-new/partials/eds-c-header-new-your-work}}
                </div>
            </div>
        {{/with}}
    {{/with}}

Javascript

import EdsCHeaderNew from '@springernature/elements/components/eds-c-header-new/js/eds-c-header-new'; 
import EdsCAccordion from '@springernature/elements/components/eds-c-accordion/js/eds-c-accordion'; 
import navigation from '@springernature/elements/components/eds-c-navigation/js/eds-c-navigation';

Help improve this page

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