Was macht die Komponente?
Sie ist Teil der Navigation-Komponente.
Wann soll die Komponente eingesetzt werden?
- Nur innerhalb der Navigation-Komponente.
Übergeordnete Komponenten
Enthaltene Komponenten
| Nummer | Typ | Beschreibung | Optional | Hinweis |
|---|---|---|---|---|
| 1 | Komponente | sbb-navigation-marker | Nein | |
| 1a | Komponente | sbb-navigation-link oder sbb-navigation-button | Nein | |
| 2 | Komponente | sbb-navigation-section | Nein | |
| 3 | Text | Label | Nein | |
| 4 | Komponente | sbb-navigation-list | Nein | |
| 4a | Text | Label | Nein | |
| 4b | Komponente | sbb-navigation-link oder sbb-navigation-button | Nein | |
| 5 | Komponente | sbb-transparent-button | Nein |
Beispiele
The sbb-navigation-section is a container for both sbb-navigation-list and sbb-button.
Its intended use is inside a sbb-navigation component, in which it can be seen as a 'second-level' panel.
Trigger
To display the sbb-navigation-section component you must provide a trigger element using the trigger property,
Optionally a label can be provided via slot or via the titleContent property.
<sbb-navigation-section trigger="nav1" titleContent="Title 1">
<sbb-navigation-list label="Label 1.1">
<sbb-navigation-link aria-current="page" href="...">Label 1.1.1</sbb-navigation-link>
<sbb-navigation-link href="...">Label 1.1.2</sbb-navigation-link>
...
</sbb-navigation-list>
<sbb-button>Something</sbb-button>
</sbb-navigation-section>
Accessibility
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 |
|---|---|---|---|---|---|
accessibilityBackLabel | accessibility-back-label | public | | string | undefined | This will be forwarded as aria-label to the back button element. | |
accessibilityLabel | accessibility-label | public | string | undefined | This will be forwarded as aria-label to the nav element and is read as a title of the navigation-section. | |
titleContent | title-content | public | string | undefined | The label to be shown before the action list. | |
trigger | trigger | public | string | HTMLElement | null | null | The element that will trigger the navigation section. 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 section. | void | ||
open | public | Opens the navigation section on trigger click. | void |
Slots
| Name | Description |
|---|---|
Use the unnamed slot to add content into the sbb-navigation-section. |