skip to content

Navigation

Navigation provides users with links to main sections and subsections of a website or application. It organises links and adapts to different viewport sizes, converting to an accordion menu on smaller viewports.

Demo

{{#with mainDemo}}
	<div style="position: relative">
		{{> eds-c-navigation}}
		{{> eds-c-navigation-expander}}
	</div>
{{/with}}

When to use this component

Use the Navigation component to:

  • provide the primary navigation structure for a website, product or service
  • organise navigation links into logical groups and categories
  • highlight the current page or section the user is viewing

When not to use this component

Do not use the Navigation component for:

  • footer links, use a simple list instead

How it works

In its most basic form the navigation component creates a horizontal menu with a single level of navigation.

In its more advanced form, the top level navigation items can expand to show a second level of navigation.

Progressive enhancement

In the enhanced JavaScript experience, when a top level item is selected, the navigation expands to reveal the second level items.

In the core no JavaScript experience, where a top level item has second level items under it, the top level item will become an anchor link. When selected, this will take users to a list of the second level items, usually at the bottom of the page.

Smaller viewports behaviour

On smaller viewports, the navigation converts to an accordion, using the accordion component.

Top level items that have second level items will appear as an accordion section. The accordion expands and collapses to show or hide
the second level navigation.

Top level items that do not have second level items will appear as links.

Installation

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

To use the Navigation component, enter the following command in your Terminal:

npm install @springernature/elements

Styles

Import the styles of the Navigation component into your scss file:

@import '../path/to/@springernature/elements/components/eds-c-navigation';

// For the accordion
@import '../path/to/@springernature/elements/components/eds-c-accordion';

JavaScript

To enhance Navigation component, import the navigation module and initialize it
when the DOM is ready:

import navigation from '@springernature/elements/components/eds-c-navigation/js/eds-c-navigation';

// Initialize navigation when the DOM is ready
document.addEventListener('DOMContentLoaded', () => {
 navigation();
});

Without dropdowns

Top level navigation items only.

{{#with noDropdownsDemo}}
	{{> eds-c-navigation}}
{{/with}}

With dropdowns

The navigation component supports two dropdown panel variants that determine how second level navigation appears on larger viewports. The descriptions here apply only to JavaScript enabled experiences.

Tray dropdown

The second level navigation expands below the top level item and use the full width of the navigation area.

This is typically used for main site navigation with many options.

{{#with trayDropdownWithSingleColumnOfLinksDemo}}
	<div style="position: relative">
		{{> eds-c-navigation}}
		{{> eds-c-navigation-expander}}
	</div>
{{/with}}

Second level navigation can be organised into columns of links with an optional heading.

You can use this to categorise related links and help users scan.

{{#with trayDropdownWithGroupedLinksDemo}}
	<div style="position: relative">
		{{> eds-c-navigation}}
		{{> eds-c-navigation-expander}}
	</div>
{{/with}}

Fixed width dropdown

The second level navigation expands with a fixed width, below the top level item.

This creates a more compact navigation style.

{{#with fixedWidthDropdownDemo}}
	{{> eds-c-navigation}}
	{{> eds-c-navigation-expander}}
{{/with}}

Configuration

To view all the properties of this component, go to the schema.

Component root options

Name Type Description Required
iconPath String Path to the SVG icon used for expand and collapse indicator. ✅
navigationAriaLabel String ARIA label for the navigation element. ✅
navigationExpanderAriaLabel String ARIA label for the navigation expander element. ✅
trayDropdown Boolean true for tray style (full width) dropdown,
false for fixed width dropdown.		 ✅
navigationItems Array Array of top level navigation items.
Go to the top level item options.		 ✅
iconPathSecondary String Path to the SVG icon appended to direct links in the fixed width dropdown.

Top level item options

The Navigation component accepts an array of top level navigation items.

These may be of 3 types:

  1. A direct link.
  2. A dropdown navigation with grouped columns of links (trayDropdown: true).
  3. A dropdown navigation with a single column of links (any trayDropdown value).
Common options for top level items
Name Type Description Required
triggerText String Text content for the item link element. ✅
triggerUrl String URL or anchor (without the #) for the item link element href. ✅
noDropdown Boolean true for direct link item type, false for dropdown navigation types. ✅
dataAttributes Array Array of custom data attributes to add to the item link element.
Name Type Description Required
links Array Array of second level items to display in the navigation expander.
Go to the link options.		 ✅
mobileAccordion Object Accordion options for mobile menu.
Go to the mobile accordion options.		 ✅

These options apply if trayDropdown is set to true.

Name Type Description Required
groups Array Array of groups grouping second level items to display in the navigation expander.
Go to the group options.		 ✅
mobileAccordion Object Accordion options for mobile menu.
Go to the mobile accordion options.		 ✅

Second level item options

These options apply to the links array of top level dropdown navigation items with a single column or groups of links.

Each link has the following options:

Name Type Description Required
linkText String Link text displayed to the user. ✅
linkUrl String href attribute for the link. ✅
dataAttributes Array Array of custom data attributes to add to the item link element.
Group options

These group options apply to top level dropdown navigation with grouped links.

Each group gets the following options:

Name Type Description Required
links Array Array of link objects in this group. Same format as a single column of links. Go to the link options. ✅
heading String Column heading for the group.
Mobile accordion options

Top level navigation items are coupled with an Accordion component configured through the mobileAccordion option.

Here are the options for the mobileAccordion:

Name Type Description
id String Unique identifier for the accordion section.
title String Section title matching the main navigation label.
iconURL String Path to the chevron icon for the accordion.
headingLevel String HTML heading level (3 to 6).
open Boolean Whether the section is expanded by default.
groupedContent Boolean Set to true to apply grouped styling for columns.
content String HTML content to display when expanded.
dataAttributes Array Custom data attributes for the accordion.

Help improve this page

If you have a question, idea, or suggestion to improve this component or guidance, post in the Ask Elements Teams channel.