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
| Name | Attribute | Privacy | Type | Default | Description |
accessibilityCloseLabel | accessibility-close-label | public | | string | undefined | | This will be forwarded as aria-label to the close button element. |
activeNavigationSection | - | public | HTMLElement | null | null | |
trigger | trigger | public | string | HTMLElement | null | null | The element that will trigger the navigation. Accepts both a string (id of an element) or an HTML element. |
Methods
| Name | Privacy | Description | Parameters | Return | Inherited From |
close | public | Closes the navigation. | | void | SbbOpenCloseBaseElement |
open | public | Opens the navigation. | | void | SbbOpenCloseBaseElement |
Events
| Name | Type | Description | Inherited From |
didClose | CustomEvent<void> | Emits whenever the sbb-navigation is closed. | SbbOpenCloseBaseElement |
didOpen | CustomEvent<void> | Emits whenever the sbb-navigation is opened. | SbbOpenCloseBaseElement |
willClose | CustomEvent<void> | Emits whenever the sbb-navigation begins the closing transition. Can be canceled. | SbbOpenCloseBaseElement |
willOpen | CustomEvent<void> | Emits whenever the sbb-navigation begins the opening transition. Can be canceled. | SbbOpenCloseBaseElement |
CSS Properties
| Name | Default | Description |
--sbb-navigation-z-index | var(--sbb-overlay-default-z-index) | To specify a custom stack order, the z-index can be overridden by defining this CSS variable. The default z-index of the component is set to var(--sbb-overlay-default-z-index) with a value of 1000. |
Slots
| Name | Description |
| Use the unnamed slot to add sbb-navigation-button/sbb-navigation-link elements into the sbb-navigation menu. |
