@springernature/springer-header
v8.0.0
Published
Publisher level header
Downloads
209
Maintainers
Keywords
Readme
Springer Header
Publisher level header for Springer products.
Usage
Import and compile the Sass. You need to ensure you are importing some utility stylesheets.
@import '../node_modules/@springernature/brand-context/default/scss/60-utilities/icons.scss';
@import '../node_modules/@springernature/brand-context/default/scss/60-utilities/buttons.scss';
@import '../node_modules/@springernature/brand-context/default/scss/60-utilities/flex.scss';
@import '../node_modules/@springernature/brand-context/default/scss/60-utilities/spacing.scss';
@import '../node_modules/@springernature/springer-header/scss/10-settings/header';
@import '../node_modules/@springernature/springer-header/scss/50-components/header';
Then compile the template located in the ./view
folder whenever the component is needed. See the ./demo/context.json
to see an example of the expected data.
Variants
Promoted menu
The promoted menu is the menu on the top left of the header. Each menu item can have an optional icon assigned.
"promotedMenu": [
{
"label": "SpringerLink shop",
"href": "/path/to/1",
"iconUrl": null
}
]
Search
To activate search, include a search
property on the data.
"search": {
"action": "/search",
"inputLabel": "Search this site",
"inputName": "search",
"iconUrl": "../../img/search.svg#i-search",
"springerLinkUrl": "#",
"springerLinkText": "Search our products and science on SpringerLink"
}
The search box is revealed and focused when the search link in the promoted menu is pressed. This link is included automatically.
Enhancement
By default, this click-to-reveal functionality works without JavaScript and using the :target
CSS pseudo-class. However, it is recommended you enhance with JavaScript and focus the search input (rather than the search form) when the search box is revealed.
The ./demo/main.js
file consists of a basic script demonstrating how you might go about this enhancement. It makes use of the c-header__search-form--visible
class to reveal the search form.