SideNavigation

BetaAccessible

A side navigation is an additional navigation element that is located at the left-hand side of the viewport. It provides an extra level of navigation and also can be helpful in situations where the traditional top navigation feels too clumsy.

A visual rework is coming soon!
The HDS team will be unifying the SideNavigation component with the Hel.fi project side navigation in the near future.

Usage

Example

Principles

  • It is strongly recommended to always include the main (top) navigation component in your service.
    • It is allowed to use the side navigation without the top navigation. However, please note that the top navigation includes important features such as language selection and login. If you rely on the side navigation only, you need to provide these functionalities somewhere else in the user interface.
  • If you use both main (top) and side navigation, do not repeat the same navigation items in both of them.
  • Always position the side navigation to the left-hand side of the page. Keep the navigation in place so the user can always easily locate it.
  • Keep navigation menu link labels clear and concise. Prefer max 1-2 word long labels. Avoid starting multiple menu link labels with the same word.
  • The side navigation allows the use of icons for the first-level links.
    • If icons are used, all first-level links should have an icon.
    • Pay attention to the icon choices. The icons should be easily recognisable and not used for decorative purposes only.
    • The second-level links and external links must not include an icon.
    • Labels are always required even if icons are used. Do not create icon-only navigations.
  • When including external links in the side navigation, follow guidelines of the HDS Link component documentation.

When to use a side navigation?

  • Consider using the Side navigation when
    • the service's navigation hierarchy exceeds three (3) levels, or in some cases, even at three levels.
    • the user needs easily scan through and navigate between pages at a specific level (e.g. admin interfaces or documentation sites)
    • you are uncertain of the number of the navigation items and you need room for growth and changes
  • Avoid using the Side navigation when
    • you need space for your content (the side navigation uses a large portion of the content area)
    • your service has a small number of navigation items and only one level deep navigation hierarchy

Variations

Default

The default side navigation has support for two (2) levels of navigation, icons, external links, and a divider to create logical groups for the navigation items.

With icons

Icons are allowed to be used with the main level navigation items and accordions. The second-level navigation items do not have icon support. Also, icons are not visible in the mobile side navigation variant.

With skip link

  • Using the SideNavigation.SkipLink component is optional. Use the skip link component to help keyboard-only users skip the navigation links and jump to the main content.
  • See Example for SideNavigation.SkipLink in Storybook
  • The SideNavigation.SkipLink supports aria-label which gives possibility to define more informative text for screen readers