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.

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 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>

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>

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).

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

Check sbb-icon-sidebar-container on how to
position and connect the sbb-header with the icon sidebar.

Properties

Slots