What does the component do?

The navigation component displays a list of navigation links that help users to navigate through the various areas of a website or application. This is displayed as an overlay and is hidden behind a hamburger menu.

When should the component be used?

• To provide users with a clear and accessible way to navigate through the website or application.
• When compact navigation is required.

Rules

• The navigation should be hidden behind a hamburger icon and placed as the first element in the header.
• The navigation links should be logically grouped and arranged in a sensible order.

Child Components

Examples

The sbb-navigation component provides a way to present a navigation menu.

Some of its features are:

• uses a native dialog element;
• creates a backdrop for disabling interaction below the navigation;
• disables scrolling of the page content while open;
• manages focus properly by setting it on the first focusable element or the first action with the .sbb-active class;
• can act as a host for components as sbb-navigation-list,
  sbb-navigation-marker
  and sbb-navigation-section;

Interactions

To display the sbb-navigation component you can either provide a trigger element using the trigger property,
or call the open() method on the sbb-navigation component.

<!-- Trigger element -->
<sbb-button id="nav-trigger">Navigation trigger</sbb-button>

<!-- Navigation component with navigation sections -->
<sbb-navigation trigger="nav-trigger">
  <sbb-navigation-marker>
    <sbb-navigation-button aria-current="page" id="nav-section-1">Label 1</sbb-navigation-button>
    <sbb-navigation-button id="nav-section-2">Label 2</sbb-navigation-button>
    <sbb-navigation-link href="https://www.sbb.ch/some/route">Label 3</sbb-navigation-link>
  <sbb-navigation-marker>

  <sbb-navigation-marker>
    <sbb-navigation-button aria-pressed="true">Language 1</sbb-navigation-button>
    <sbb-navigation-button aria-pressed="false">Language 2</sbb-navigation-button>
    <sbb-navigation-button aria-pressed="false">Language 3</sbb-navigation-button>
  <sbb-navigation-marker>

  <sbb-navigation-section trigger="nav-section-1">
    <span slot="label">Title 1</span>
    <sbb-navigation-list>
      <span slot="label">Label 1.1</span>
      <sbb-navigation-link href="...">Label 1.1.1</sbb-navigation-link>
      <sbb-navigation-link href="...">Label 1.1.2</sbb-navigation-link>
      <sbb-navigation-link href="...">Label 1.1.3</sbb-navigation-link>
    </sbb-navigation-list>
    ...
    <sbb-button>Something</sbb-button>
  </sbb-navigation-section>
  ...
</sbb-navigation>

Accessibility

On opening, the focus will be automatically set on the first focusable element or the first action with the .sbb-active class and, if the action with this class has a connected section, the section will be opened and the focus will be set on the first focusable element or the first action with the .sbb-active class in the section.
When a navigation action is marked to indicate the user is currently on that page, aria-current="page" should be set on that action.
Similarly, if a navigation action is marked to indicate a selected option (e.g., the selected language) aria-pressed should be set on that action.

Properties

Methods

Events

CSS Properties

Slots