✳flâneur — a map of the web's best reading

Designing Navigation for Mobile: Design Patterns and Best Practices — Smashing Magazine

smashingmagazine.com · 3,537 words · saved by 1 readers

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. When he is not writing, he’s most probably running front-end & UX … More about Vitaly ↬ Weekly tips on front-end & UX. Trusted by 200,000+ folks. When it comes to complex navigation on mobile, we often think about hamburger menus, full-page overlays, animated slide-in-menus, and a wide range of nested accordions. Not all of these options perform well, and there are some alternative design patterns that are worth exploring. Let’s dive in! Pssst! This article is part of our ongoing series on design patterns. It’s also a part of Smart Interface Design Patterns 🍣 and is available in the Live Interface Design Training 🍕 as well. One of the most common strategies for navigation on mobile is to use a good ol’ accordion. In fact, accordions work very well for multiple levels of navigation and are usually better than slide-in menus. However, since we open and collapse menus, we also need to indicate it with an icon. T

16 min read Navigation , Design Patterns , UX Share on Twitter , LinkedIn About The Author Vitaly Friedman loves beautiful content and doesn’t like to give in easily. When he is not writing, he's most probably running front-end & UX … More about Vitaly ↬ Email Newsletter Your (smashing) email Weekly tips on front-end & UX . Trusted by 182,000+ folks. Custom Web Forms for Angular, React, & Vue. Your backend. Deep Dive On Accessibility Testing with Manuel Matuzović How To Measure UX and Design Impact with Vitaly Friedman Figma Workflow Masterclass with Christine Vallaure Design Patterns For AI I

Explore this link on the map →

related reading