Design Principle
Collapsing navigation is not hiding every entry; it reorders by task frequency and current location.
Principle
Collapsing navigation is not hiding every entry; it reorders by task frequency and current location.
Design action
Keep global navigation on desktop, compress secondary entries on tablet, and preserve current task, back, search, and primary action on mobile.
Examples
Positive example: SaaS, knowledge bases, libraries, admin tools, and ecommerce need cross-page movement. Counterexample: Mobile leaves only a hamburger menu and loses the primary action.
Apply when
SaaS, knowledge bases, libraries, admin tools, and ecommerce need cross-page movement. Users need to judge state, scope, risk, or next action quickly.
Source notes
Source note: Synthesized from Apple HIG, Material Design, GOV.UK/Polaris/Atlassian component practices, and interaction accessibility principles. Apple HIG Motion: https://developer.apple.com/design/human-interface-guidelines/motion Material Design Motion: https://m3.material.io/styles/motion/overview/how-it-works GOV.UK Design System Patterns: https://design-system.service.gov.uk/patterns/ Shopify Polaris Patterns: https://polaris-react.shopify.com/patterns Atlassian Empty State: https://atlassian.design/components/empty-state
Agent Directive
Keep global navigation on desktop, compress secondary entries on tablet, and preserve current task, back, search, and primary action on mobile.