Skip to content

Navigation - Move contextual navigation to sidebar

The contextual navigation moves to a sidebar next to the content area.

The active section is highlighted with a different background from the rest of the sidebar. The color is $purple-600. When the active section has second-level items, they are displayed beneath it.

The content of the dropdown can scroll if vertical space is limited. The header scrolls with the rest of the elements.

The hover state for first-level items darkens the background for the whole 'cell'. The hover state for second-level items darkens and boldens the name of the section.

First level Second level
navigation__sidebar-section-hover navigation__sidebar-subsection-hover

Resources

Specs

Meta issue #32794 (closed) - Global and Contextual Navigation

Edited by Chris Peressini