Skip to content

Make interacting with the navigation sidebar seamless

Problem to solve

The button used to hide / show the navigation sidebar was introduced in !110868 (merged). While dogfooding that experience in the Alpha, an unacceptable user experience arose in 3 problem areas.

  1. Smaller breakpoints with overlapping content
  2. Accessing the navigation sidebar from the middle of a page
  3. Accommodating sticky headers and contextual sidebars (Issues / Merge requests)

Proposal

  • Must have: Make the breadcrumb always fluid
  • Must have: Add a sticky header to every GitLab page, with a few exceptions
  • Must have: All page content will be set to 1200px max on fixed width → !113068 (closed)
  • Really nice to have: Add navigation peek on :hover → #390773 (closed)
  • Nice-to-have: Move any global alerts / broadcast messages to appear above the page content (not sticky)

Example_of_issue_on_ultra_wide

Open Figma → Ultra wide | XL | LG | MD | XS |

Opportunities to address

Some pages have different max-width on fixed
↳ All pages will be set to 1200px unless set to fluid. → Draft: Streamline fixed container width (!113068 - closed)

How will the button to follow the user as they scroll down the page?
↳ The button will move into the sticky header or be accessible by hotspot on the left side of the page or by keyboard shortcut (#390773 (closed)).
↳ Related: Super sidebar toggle placement when collapsed (#392976 - closed)

How will the button be visible on pages without a breadcrumb?
↳ All pages will have a breadcrumb moving forward. While not specifically a piece of the breadcrumb component, the button to show the sidebar will always appear in the top left hand corner when the navigation sidebar is hidden from view.
↳ Related: Add breadcrumbs to all pages in GitLab that nee... (&10032 - closed)

Should the sidebar be opened by default?
↳ Sometimes. If it's not then it might be confusing what to do next without it, especially when jumping contexts. If the viewport size (tbd - Large?) can comfortably fit the sidebar, then show it. For example, going from a project into my user settings.
↳ Related: Allow pages to expand the super sidebar by default (#391285 - closed)

How can we prevent the page from adjusting too frequently when navigating?
↳ Users should be able to peek into the navigation sidebar through an overlay accessible by hover.
↳ Related: Super sidebar peek on viewport edge hover (#390773 - closed)

Edited by Austin Regnery