Zur Navigation Zum Inhalt Kontakt Menu Trova un componente Descrizione generale Lyne Principi Base Accessibilité Sistema di design Guidelines Deutsch Français Italiano English I nostri principi di design Soluzioni focalizzate sull’utente Riconoscibilità Inclusione Riduzione Olistico Autoesplicativo Orientamento all’attività Adeguatezza Portale della marca FFS Logo Orologio digitale Diritti di utilizzazione Colori die base Colori funzionali Colori Off Brand Icone Icone dell'orario Pittogrammi Informazioni sull’accessibilità Über diesen Guide Contatti Letture consigliate Product Owner User Research Interaction Design Visual Design Development Content Design Testing What is a design system? Designing Coding FAQ Aiuto Processo Contribution Contatto Introduzione Base Componenti Introduzione Base Componenti Introduzione Base Componenti Overview Releases Design Tokens Komponenten Introduzione Base Informazioni Senso & scopo Community Assets Istruzioni Power-Apps Banner pubblicitari digitali SAP Icone delle app Questa pagina non è disponibile nella lingua desiderata. Lingue disponibili Deutsch English Navigation Implementation

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
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.
accessibilityCloseLabel accessibility-close-label public | string | undefined This will be forwarded as aria-label to the close button element.
disableAnimation disable-animation public boolean false Whether the animation is enabled.
activeNavigationSection - public HTMLElement | null null

Methods

Name Privacy Description Parameters Return Inherited From
open public Opens the navigation. void
close public Closes the navigation. void

Events

Name Type Description Inherited From
willOpen CustomEvent<void> Emits whenever the sbb-navigation begins the opening transition. Can be canceled.
didOpen CustomEvent<void> Emits whenever the sbb-navigation is opened.
willClose CustomEvent<void> Emits whenever the sbb-navigation begins the closing transition. Can be canceled.
didClose CustomEvent<void> Emits whenever the sbb-navigation is closed.

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.
Beispiele
Default
Long Content
With Navigation Section
HTML-Markup kopiert.
Trova un componente

Lyne

Impressum Contatto Impostazioni dei cookie