Tailor the navigation for a mobile breakpoint

⚠ Note: Design is still being finalized, and guidelines coming soon...

Overview

So far, the navigation redesign is functional in mobile but it can be further optimized. In this issue we will attempt to resolve a functional pain point to make the navigation experience feel more seamless in a mobile setting.

Once a few changes have merged, this should make this issue solely focused on the breadcrumb to keep it's density as minimal as possible.

• Sticky header
• Aligning disclosure widgets

Proposal

The key difference will be in how the breadcrumb adapts to the smaller viewport <576px. The goal is to keep the breadcrumb informative and accessible, but not a detractor.

• In the breadcrumb truncate all except first and last, truncation expands in place via ellipse button

Open Figma →