Side Navigation

The side navigation component (often referred to as a "sidebar" or "side menu") is a user interface element that is typically positioned on the side of a webpage or application screen, such as the left or right side. It is used to provide navigation and access to various sections, features, or pages of the application.

Variations

Basic side navigation menu Requires JS

Side Navigation menu with separator and multiple menu groups Requires JS

Side navigation menu with search bar and alert message Requires JS

copydone

Side navigation menu with user profile and alert message Requires JS

copydone

Side navigation menu with user profile and contact list Requires JS

Usage

Side navigation is positioned on the side of a screen to help users navigate an application's sections and features efficiently. They save space, offer clear labeling, and enhance user experience, especially in mobile design. The Side navigation remains open on bigger screens but auto hides on smaller screens and is then activated by a burger button.

Specs

The side navigation main is implemented with an <aside> html element with the following characteristics:

  • Dimensions: The side navigations spans to the full height of the viewport and its width is 18rem (288px).
  • Mobile trigger: On small screens a button is required to allow the side navigation to be opened and closed.
  • Backdrop: When the side navigation is open on small screens a backdrops cover the content to allow the user to close the sidenavigation when its clicked.

A navbar consists of the following main components:

  • Header: the top part of the sidenavigation that can include the logo, user profile, or a search bar.
  • Navigation links: a list that contains links to your main pages. It uses a <nav> element that includes a list for the links.
  • Footer: It can contain actions (like a "logout" link) or even alerts for the user.

Accessibility notes

  • The navigation links wrapper should have a role="navigation" (not required if a native <nav> is used.)
  • The trigger button has an aria-expanded role with a true/false value, that allows vocalizing menu states (open or closed).
  • If a user is on a page that is within the navigation menu the aria-current="page" attribute should be assigned to the item corresponding to the active page.

Check out the latest release!