What does the component do?
The icon sidebar is a vertical navigation bar that is used to structure content within an application. It enables quick and intuitive navigation between different areas or functions of the application. The icon sidebar can contain links or buttons.
When should the component be used?
- When an application requires permanent or easily accessible navigation.
- When users need to switch quickly between several main areas.
Rules
- The icon sidebar can be combined with the sidebar. In this case, either the icon sidebar or sidebar should use the ‘milk’ colour variant so that the two components can be visually differentiated.
| Number | Type | Description | Optional | Info |
|---|---|---|---|---|
| 1 | Component | sbb-icon-sidebar | No | |
| 2 | Component | sbb-icon-sidebar-button or sbb-icon-sidebar-link | No | |
| 2a | Component | sbb-icon-sidebar-button or sbb-icon-sidebar-link | No | Hover state with tooltip |
| 2b | Component | sbb-icon-sidebar-button or sbb-icon-sidebar-link | No | Current state |
| 3 | Component | sbb-sidebar-title | Yes | |
| 4 | Component | sbb-sidebar-close-button | Yes | |
| 5 | Content | No | ||
| 6 | Property | Backdrop | Yes | Only visible in overlay mode |
The <sbb-icon-sidebar> is a component that can display action items with an icon on the left or right side of the viewport.
The <sbb-icon-sidebar-container> is a component that holds together the <sbb-icon-sidebar-content>
and one or two <sbb-icon-sidebar> elements.
Inside the <sbb-icon-sidebar-content> another <sbb-icon-sidebar-container> can be placed
to achieve multiple nested icon sidebars.
The icon sidebar components are designed to add side content to a fullscreen app.
To set up an icon sidebar we use three components: <sbb-icon-sidebar-container> which acts as a structural container for
our content and sidebar, <sbb-icon-sidebar-content> which represents the main content,
and <sbb-icon-sidebar> which represents the added side content.
<sbb-icon-sidebar-container>
<sbb-icon-sidebar>
<sbb-icon-sidebar-link
sbb-tooltip="Go to the party"
accessibility-label="Go to the party"
icon-name="glass-cocktail-small"
href="#"
></sbb-icon-sidebar-link>
<sbb-icon-sidebar-link
sbb-tooltip="Be a unicorn"
accessibility-label="Be a unicorn"
icon-name="unicorn-small"
href="#"
class="sbb-active"
accessibility-current="page"
></sbb-icon-sidebar-link>
</sbb-icon-sidebar>
<sbb-icon-sidebar-content role="main">
<p style="padding: var(--sbb-spacing-fixed-4x); margin: 0">
In the enchanting world of fantasy, unicorns are legendary creatures known for their grace,
purity, and magical abilities. These mystical beings have inspired countless tales of bravery
and wonder. Here, we delve into some captivating unicorn success stories that continue to
enchant and inspire, each with a touch of public transport magic.
</p>
</sbb-icon-sidebar-content>
</sbb-icon-sidebar-container>
Style
If the <sbb-sidebar-container> is placed after the <sbb-header>, an automatic margin-block-start is added.
In other contexts you may need to set the margin manually, e.g. margin-block-start: var(--sbb-header-height);.
Color
Per default, the <sbb-icon-sidebar> receives a white background color. As alternative,
it's possible to set the color property to milk.
If using the <sbb-icon-sidebar> along with a <sbb-sidebar>, it's recommended to alternate
the background colors (white / milk) for a clear visual distinction.
<sbb-icon-sidebar color="milk"></sbb-icon-sidebar>
Position
An <sbb-icon-sidebar> can be positioned at the left or right side of the viewport.
To display the icon sidebar on the right side, place the <sbb-icon-sidebar>
after the <sbb-icon-sidebar-content> in the DOM.
Technically it's possible to place two icon sidebars, but from UX perspective it's not recommended.
positioned on the right side:
<sbb-icon-sidebar-container>
<sbb-icon-sidebar-content role="main">Content</sbb-icon-sidebar-content>
<sbb-icon-sidebar>Sidebar Content</sbb-icon-sidebar>
</sbb-icon-sidebar-container>
Icon Sidebar Actions
There are two types of icon sidebar actions: links and buttons, represented by the <sbb-icon-sidebar-link>
and <sbb-icon-sidebar-button> components respectively.
<sbb-icon-sidebar-link
icon-name="glass-cocktail-small"
href="https://www.sbb.ch"
accessibility-label="Go to the party"
></sbb-icon-sidebar-link>
<sbb-icon-sidebar-button
icon-name="glass-cocktail-small"
aria-label="Go to the party"
></sbb-icon-sidebar-button>
As an alternative, the icon can be slotted:
<sbb-icon-sidebar-link accessibility-label="Go to the party" href="https://www.sbb.ch">
<sbb-icon name="glass-cocktail-small" slot="icon"></sbb-icon>
</sbb-icon-sidebar-link>
Active / current state
To indicate an active state, the CSS class sbb-active should be used.
From accessibility perspective accessibility-current="page" (or aria-current="page"
for <sbb-icon-sidebar-button>) should be set whenever the CSS class sbb-active is set.
<sbb-icon-sidebar-link
href="https://www.sbb.ch"
icon-name="glass-cocktail-small"
accessibility-label="Go to the party"
class="sbb-active"
accessibility-current="page"
></sbb-icon-sidebar-link>
Combine with <sbb-sidebar>
It's possible the combine the <sbb-icon-sidebar> with the <sbb-sidebar> as following:
<sbb-icon-sidebar-container>
<sbb-icon-sidebar>Icon sidebar content</sbb-icon-sidebar>
<sbb-icon-sidebar-content>
<sbb-sidebar-container>
<sbb-sidebar role="navigation">Sidebar content</sbb-sidebar>
<sbb-sidebar-content role="main">Content</sbb-sidebar-content>
</sbb-sidebar-container>
</sbb-icon-sidebar-content>
</sbb-icon-sidebar-container>
Use with <sbb-header>
In order to correctly display the shadow of the header when scrolled,
you need to set the scrollOrigin property of the <sbb-header>.
The value should be either the id of the <sbb-sidebar-content> / <sbb-icon-sidebar-content>
or the element reference itself. Note that when using nested sidebars, it's required to
continuously update the scrollOrigin property with the id/reference of the
currently active <sbb-sidebar-content> / <sbb-icon-sidebar-content>. Also, depending
on how e.g. a RouterOutlet (Angular) is used, it may also be necessary to update the scrollOrigin
property when the navigation changes.
<sbb-header scroll-origin="content">...</sbb-header>
<sbb-icon-sidebar-container>
<sbb-icon-sidebar>...</sbb-icon-sidebar>
<sbb-icon-sidebar-content id="content" role="main">Content</sbb-sidebar-content>
</sbb-icon-sidebar-container>
Accessibility
The <sbb-icon-sidebar> has the role navigation applied.
The <sbb-sidebar-content> should be given a role based on what it contains. If it
represents the primary content of the page, it may make sense to mark it role="main". If no more
specific role makes sense, role="region" is a good fallback.
As described in sbb-icon-sidebar-link and
sbb-icon-sidebar-button, it's important to set
both a label and a tooltip to the action elements.
It's also described how to set the current icon as active (aria-current).
The <sbb-icon-sidebar-content> should be given a role based on what it contains. If it
represents the primary content of the page, it may make sense to mark it role="main". If no more
specific role makes sense, role="region" is a good fallback.
<sbb-icon-sidebar-container>
<sbb-icon-sidebar>Sidebar Content</sbb-icon-sidebar>
<sbb-icon-sidebar-content role="main">Content</sbb-icon-sidebar-content>
</sbb-icon-sidebar-container>
For the <sbb-icon-sidebar-button> and <sbb-icon-sidebar-link>> the definition of a meaningful
aria-label or accessibility-label (<sbb-icon-sidebar-link>>, forwarded as aria-label to the
inner <a> element) is mandatory as only an icon is displayed.
To show the user which entry is active, accessibility-current='page' (or aria-current="page"
for <sbb-icon-sidebar-button>) should be set whenever sbb-active class is set.
See https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current for more
information.
API Documentation
class: SbbIconSidebarButtonElement, sbb-icon-sidebar-button
Properties
| Name | Attribute | Privacy | Type | Default | Description |
|---|---|---|---|---|---|
form | form | public | HTMLFormElement | null | The <form> element to associate the button with. | |
iconName | icon-name | public | string | '' | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. |
name | name | public | string | Name of the form element. Will be read from name attribute. | |
type | type | public | SbbButtonType | 'button' | The type attribute to use for the button. |
validationMessage | - | public | string | Returns the current error message, if available, which corresponds to the current validation state. Please note that only one message is returned at a time (e.g. if multiple validity states are invalid, only the chronologically first one is returned until it is fixed, at which point the next message might be returned, if it is still applicable). Also, a custom validity message (see below) has precedence over native validation messages. | |
validity | - | public | ValidityState | Returns the ValidityState object for this element. | |
value | value | public | string | '' | Value of the form element. |
willValidate | - | public | boolean | Returns true if this element will be validated when the form is submitted; false otherwise. |
Methods
| Name | Privacy | Description | Parameters | Return | Inherited From |
|---|---|---|---|---|---|
checkValidity | public | Returns true if this element has no validity problems; false otherwise. Fires an invalid event at the element in the latter case. | boolean | SbbFormAssociatedMixin | |
reportValidity | public | Returns true if this element has no validity problems; otherwise, returns false, fires an invalid event at the element, and (if the event isn't canceled) reports the problem to the user. | boolean | SbbFormAssociatedMixin | |
setCustomValidity | public | Sets the custom validity message for this element. Use the empty string to indicate that the element does not have a custom validity error. | message: string | void | SbbFormAssociatedMixin |
Slots
| Name | Description |
|---|---|
icon | Slot used to display the icon. |
class: SbbIconSidebarContainerElement, sbb-icon-sidebar-container
Properties
| Name | Attribute | Privacy | Type | Default | Description |
|---|---|---|---|---|---|
end | - | public | SbbIconSidebarElement | null | The icon-sidebar child at the end position. | |
sidebars | - | public | SbbIconSidebarElement[] | The icon-sidebar children. | |
start | - | public | SbbIconSidebarElement | null | The icon-sidebar child at the start position. |
Slots
| Name | Description |
|---|---|
Use the unnamed slot to add sbb-sidebar and sbb-sidebar-content elements. |
class: SbbIconSidebarContentElement, sbb-icon-sidebar-content
Slots
| Name | Description |
|---|---|
| Use the unnamed slot to add any content elements. |
class: SbbIconSidebarElement, sbb-icon-sidebar
Properties
| Name | Attribute | Privacy | Type | Default | Description |
|---|---|---|---|---|---|
color | color | public | 'white' | 'milk' | 'white' | Background color of the icon sidebar. Either white or milk. * |
container | - | public | SbbIconSidebarContainerElement | null | Returns the SbbIconSidebarContainerElement where this icon-sidebar is contained. |
Slots
| Name | Description |
|---|---|
| Use the unnamed slot to slot any content into the icon-sidebar. |
class: SbbIconSidebarLinkElement, sbb-icon-sidebar-link
Properties
| Name | Attribute | Privacy | Type | Default | Description |
|---|---|---|---|---|---|
accessibilityCurrent | accessibility-current | public | string | '' | This will be forwarded as aria-current to the inner anchor element. |
accessibilityLabel | accessibility-label | public | string | '' | This will be forwarded as aria-label to the inner anchor element. |
download | download | public | boolean | false | Whether the browser will show the download dialog on click. |
href | href | public | string | '' | The href value you want to link to. |
iconName | icon-name | public | string | '' | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. |
rel | rel | public | string | '' | The relationship of the linked URL as space-separated link types. |
target | target | public | LinkTargetType | string | '' | Where to display the linked URL. |
Slots
| Name | Description |
|---|---|
icon | Slot used to display the icon. |