Navigation - Add fly-out dropdown to contextual navigation
Resources
FE @iamphill | UX @cperessini
When hovering over a section with second-level items, a fly-out dropdown menu appears to offer quick access to those second-level sections.
In order to avoid navigation tunnels, the dropdown should work similarly to how Amazon handle their categories dropdown. Here's a breakdown of how that works, and the poster has even made their jQuery implementation available on GitHub.
Expanded sidebar
When the sidebar is expanded, all sections show the fly-out on hover, except for the active section. The active section already shows all its sub-elements by default, so the fly-out would show duplicated information.
When a section has no sub-sections the fly-out doesn't show up either.
In resting state, the background of the dropdown matches the hover color of the sidebar (#4B4BA3). The text color is rgba(255, 255, 255, 0.9)
When hovering over one of the rows of the sidebar, its background is darkened with an overlay of rgba(0,0,0,0.12). The text color changes to rgba(255, 255, 255, 1.0) on hover.
| Resting state | Hover over a row | No fly-out for active section | No fly-out without subsections |
|---|---|---|---|
 |
 |
 |
 |
Collapsed sidebar
When the sidebar is collapsed, the fly-out is shown for every section, even if it's the active one or if it has no sub-elements.
For the collapsed sidebar, the fly-out also shows the top-level element (e.g. Repository or Issues), including its badge if it has one.
The background and text colors are the same ones from the expanded sidebar.
When hovering over a row with a badge, the badge's color is also darkened with an overlay of rgba(0,0,0,0.12).
When showing the fly-out for the current section, both the top-level item and the active subsection are shown in active state. That means that their font weight is 700 and their text color is rgba(255, 255, 255, 1.0). Additionally, the active sub-menu element gets an overlay of rgba(0,0,0,0.12) on its background.
When there are no sub-sections, the fly-out only shows the top-level item.
| Resting state | Hover over title | Hover over subsection | Active section | No subsections |
|---|---|---|---|---|
 |
 |
 |
 |
 |
Mobile sidebar
There is no hover action on mobile, so the fly-out should not be available.
Nevertheless, since our website is responsive users on desktop will see the mobile layout. We can change this behavior if frontend has a different recommendation.
Resources
Meta issue #32794 (closed) - Global and Contextual Navigation