Zur Navigation Zum Inhalt Kontakt Menu Komponente finden Übersicht Lyne Prinzipien Grundlagen Barrierefreiheit Design System Guidelines Deutsch Français Italiano English Unsere Gestaltungsprinzipien Nutzerzentriert Wiedererkennbar Inklusiv Reduziert Ganzheitlich Selbsterklärend Aufgabenorientiert Passend SBB Markenportal Logo Digitale Uhr Nutzungsrechte Basis-Farben Funktionale Farben Off-Brand Farben Icons Fahrplan-Icons Piktogramme Über Barrierefreiheit Über diesen Guide Kontakt Weitere Informationen Product Owner User Research Interaction Design Visual Design Development Content Design Testing Was ist ein Design System?​ Designing Coding FAQ Hilfe Prozess Contribution Kontakt Übersicht Basis Komponenten Übersicht Basis Komponenten Übersicht Basis Komponenten Übersicht Releases Design Tokens Komponenten Übersicht Basis Informationen Sinn & Zweck Community Assets Anleitung Power-Apps Digitale Werbebanner SAP App Icons Skiplink-List Implementation

The sbb-skiplink-list is a component that can be used to collect one or more hidden sbb-block-links,
which become visible only when focused, e.g., using the Tab key.

When the component contains multiple link elements, only one of them is shown (the focused one), while the others stay visually hidden.

It has an optional sbb-title element, which is visually hidden too, but it's read from screen-readers,
and it can be set using the title-content property.

<sbb-skiplink-list title-level="2" title-content="Title text">
  <sbb-block-link href="https://www.sbb.ch/">Content</sbb-block-link>
  <sbb-block-link href="https://www.sbb.ch/en/help-and-contact.html">Contact</sbb-block-link>
  ...
</sbb-skiplink-list>

Properties

Name Attribute Privacy Type Default Description
titleContent title-content public string | undefined The title text we want to place before the list.
titleLevel title-level public SbbTitleLevel '2' The semantic level of the title, e.g. 2 = h2.

CSS Properties

Name Default Description
--sbb-skiplink-list-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-block-link/sbb-block-link-button elements to the sbb-skiplink-list.
Beispiele
Skiplink List
Skiplink List With Title
HTML-Markup kopiert.
Komponente finden

Lyne

Impressum Kontakt Cookie Einstellungen