What does the component do?
It is part of the navigation component.
When should the component be used?
- Only within the navigation component.
Parent Components
Child Components
| Number | Type | Description | Optional | Info |
|---|---|---|---|---|
| 1 | Component | sbb-navigation-marker | No | |
| 1a | Component | sbb-navigation-link oder sbb-navigation-button | No | |
| 2 | Component | sbb-navigation-section | No | |
| 3 | Text | Label | No | |
| 4 | Component | sbb-navigation-list | No | |
| 4a | Text | Label | No | |
| 4b | Component | sbb-navigation-link oder sbb-navigation-button | No | |
| 5 | Component | sbb-transparent-button | No |
Examples
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. |