components / Structure

Sidebar

Commonly, Sidebars will contain a SideNav but can also contain other content when necessary.

Behavior

Sidebars are responsive and will collapse if it is within a browser window smaller than 992px. The biggest difference in behavior is between large displays and small displays. On large displays the open/close state is stored in the browser's localStorage. On small displays, the Sidebar is always in a temporary state and it's open/close state is not saved.

Temporary State

When the Sidebar is in a temporary state, interacting outside of the Sidebar (hovering or tapping outside the Sidebar) while open will close it.

  • On small displays, Sidebars are always in a temporary state
  • On large displays, Sidebars temporarily open only if they are hovered over or tapped on while collapsed, clicking/tapping the expand button for large displays will remove the temporary state and keep the Sidebar open
  • In a temporary state, Sidebars hover over content when open instead of taking up space and pushing content over

Remembers previous open/close state

The Sidebar remembers and restores the previous non-temporary open/close state across user sessions and window resizes. Since small displays are always temporary, only the state of large displays are saved. Each Sidebar instance remembers its own state as long as a static unique localStorageKey prop is given.

Interactions

Large Displays

Large displays are defined as having a browser window width greater than or equal to 992px.

Toggle
Sidebar
Outside Sidebar
Click
open/close
n/a
n/a
Touch/Tap
open/close
n/a
n/a
Hover
show tooltip
if collapsed, temporarily open
if temporarily open, close

Small Displays

Small displays are defined as having a browser window width less than 992px and are always in a temporary state.

Toggle
Sidebar
Outside Sidebar
Click
temporarily open/close
n/a
n/a
Touch/Tap
temporarily open/close
temporarily open
close
Hover
show tooltip
temporarily open
close

Sidebar Sections are used as direct children of the Sidebar to section off the content with a horizontal divider


Best practices

  • Sidebars should be within a Page
  • Sidebars should be given a static unique localStorageKey prop value