Icon-Sidebar – digital.sbb.ch

Icon-Sidebar.

Info

Was macht die Komponente?

Die Icon-Sidebar ist eine vertikale Navigationsleiste, die zur Strukturierung von Inhalten innerhalb einer Anwendung dient. Sie ermöglicht eine schnelle und intuitive Navigation zwischen verschiedenen Bereichen oder Funktionen der Anwendung. Die Icon-Sidebar kann Links oder Buttons enthalten.

Wann soll die Komponente eingesetzt werden?

Wenn eine Anwendung eine permanente oder leicht zugängliche Navigation benötigt.
Wenn Benutzer:innen schnell zwischen mehreren Hauptbereichen wechseln müssen.

Regeln.

Die Icon-Sidebar kann mit der Sidebar kombiniert werden. In diesem Fall soll entweder die Icon-Sidebar oder Sidebar die Farbvariante «Milk» verwenden, damit sich die zwei Komponenten visuell differenzieren lassen.

Sidebar

Anatomie

Nummer	Typ	Beschreibung	Optional	Hinweis
1	Komponente	`sbb-icon-sidebar`	Nein
2	Komponente	`sbb-icon-sidebar-button` oder `sbb-icon-sidebar-link`	Nein
2a	Komponente	`sbb-icon-sidebar-button` oder `sbb-icon-sidebar-link`	Nein	Hover State mit Tooltip
2b	Komponente	`sbb-icon-sidebar-button` oder `sbb-icon-sidebar-link`	Nein	Current State
3	Komponente	`sbb-sidebar-title`	Ja
4	Komponente	`sbb-sidebar-close-button`	Ja
5	Inhalt		Nein
6	Eigenschaft	Backdrop	Ja	Nur im Overlay-Mode sichtbar

Demo

Default.

Milk.

Milk End.

Nested.

Nested End.

HTML in Zwischenablage kopiert.

Implementation

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-vertical-spacing);.

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>

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	`'button' \| 'reset' \| 'submit'`	`'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	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	`'_blank' \| '_self' \| '_parent' \| '_top' \| string`	`''`	Where to display the linked URL.

Slots.

Name	Description
`icon`	Slot used to display the icon.

Was macht die Komponente?

Wann soll die Komponente eingesetzt werden?

Regeln.

Style.

Color.

Position.

Icon Sidebar Actions.

Active / current state.

Combine with <sbb-sidebar>.

Use with <sbb-header>.

Accessibility.

API Documentation.

class: SbbIconSidebarButtonElement, sbb-icon-sidebar-button.

Properties.

Methods.

Slots.

class: SbbIconSidebarContainerElement, sbb-icon-sidebar-container.

Properties.

Slots.

class: SbbIconSidebarContentElement, sbb-icon-sidebar-content.

Slots.

class: SbbIconSidebarElement, sbb-icon-sidebar.

Properties.

Slots.

class: SbbIconSidebarLinkElement, sbb-icon-sidebar-link.

Properties.

Slots.

Combine with `<sbb-sidebar>`.

Use with `<sbb-header>`.

class: `SbbIconSidebarButtonElement`, `sbb-icon-sidebar-button`.

class: `SbbIconSidebarContainerElement`, `sbb-icon-sidebar-container`.

class: `SbbIconSidebarContentElement`, `sbb-icon-sidebar-content`.

class: `SbbIconSidebarElement`, `sbb-icon-sidebar`.

class: `SbbIconSidebarLinkElement`, `sbb-icon-sidebar-link`.