{% wip %}

# 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.  

{% demoImage demos.edsHeaderNewDemo.site.images.intro %}

## Demo

{% demo 'Header', 'edsHeaderNewDemo', demos.edsHeaderNewDemo, component.brand %}


## When to use this component

Use the header for any product or service under the Springer Nature brand. The header is a global UI element that must be present at the top of every page. 


## When not to use this component

Do not use this component for a Nature Portfolio or Springer branded product. If working on Nature Portfolio, use the [Nature header](http://eds.springernature.com/components/nature/nature-header/).


## How it works

Use the `eds-c-header-new` component.

### Installation

To install the components, [go to the get started guide for developers](https://github.com/springernature/elements#readme).

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

```bash
npm install @springernature/elements
```

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

```scss
@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'; 
```

### Configurations

You can display the header in different ways depending on the context: 

1. The default header includes the main navigation and utilities. 

2. Focussed header removes the main navigation. 

Use the focussed header when users are in a step by step flow. For example, when an author is submitting a manuscript or finalising a transaction. 

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. 

{% demoImage demos.edsHeaderNewDemo.site.images.configurations %}

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](https://github.com/springernature/elements/tree/eds-c-header-new-2024/components/eds-c-header-new/data/eds-c-header-new.schema.json).

### Main navigation 

The header uses the navigation component. 

For websites with more sections, you can use the dropdown menus included as part of the main navigation to organise pages into groups. Do not create more than 4 dropdowns. 

Within a dropdown, organise 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. 

{% demoImage demos.edsHeaderNewDemo.site.images.navOpen %}

On small viewports the navigation component uses the accordion component. 

{% demoImage demos.edsHeaderNewDemo.site.images.navMobile %}

On smaller viewports, the navigation is replaced with a menu button. When active, a full screen overlay will display an accordion. In this view, groups are represented as sections that can be collapsed and expanded. The first section is open by default. 

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

### Creating navigation  

If creating a new main navigation make sure the: 

- proposed navigation is tested with users 

- labels are clear and unambiguous 

- labels follow our content style guide 

 
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](https://springernature.sharepoint.com/:w:/r/sites/UXD/Shared%20Documents/Information%20architecture/SN%20Link%20-%20Global%20navigation%20principles.docx?d=w6fd7d67020df5668a4f1ae087be2f9b3&csf=1&web=1&e=CV8q2M). 

 

### 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 

When not logged in, the menu links will direct to the Springer Nature login flow.  

{% demoImage demos.edsHeaderNewDemo.site.images.navLoggedOut %}

To integrate with Springer Nature account, the header uses an API. [SNID Technical implementation wip]

{% demoImage demos.edsHeaderNewDemo.site.images.navSearch %}

Some utilities are product specific, for example search and the shopping cart. Only include search if your product can provide search functionality and it is helpful to your users. Only include the shopping cart if your product can provide ecommerce functionality. 

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

### Notifications 

The utility menu icons use an indicator to show when users have unread notifications. When opened, a badge with the number of unread notifications will display next to the notifications link in the menu. 

{% demoImage demos.edsHeaderNewDemo.site.images.notifications %}

Notifications are served by the in-app service. For information on how to design for notifications, go to the [content and design rules](https://eds.springernature.com/content/how-to-guides/notifications).

### Product logo 

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

{% demoImage demos.edsHeaderNewDemo.site.images.logos %}

All logos must follow our [brand guidelines](https://brand.springernature.com/document/26?#/basics/logo-usage/product-logos) and be approved by our brand team. This includes internal services. 

## Best practices 

### Without JavaScript 

The Elements Design System takes a [progressive enhancement approach](https://github.com/springernature/frontend-playbook/blob/main/practices/progressive-enhancement.md) 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 below the search field outside 

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

{% demoImage demos.edsHeaderNewDemo.site.images.noJs %}

### Template 

To support progressive enhancement, the component has a main template (link to the 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:

```html
    {% raw %}
    {{#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}}
    {% endraw %}
```

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

```html
    {% raw %}
    {{#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}}
    {% endraw %}
```

### Javascript

```js
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](https://springernature.slack.com/archives/CNBTFLBLP) Slack channel.