Three navigation devices that answer three different questions, instead of three that answer the same one.
Deep products accumulate navigation: a sidebar, tabs, a breadcrumb, a command bar and a back button, most of which duplicate each other while leaving 'where am I' unanswered.
Each device is assigned one question and forbidden the others. The sidebar answers where can I go; the breadcrumb answers where am I; the command bar answers how do I get to a thing I can already name.
Reference landscape
- Linear — Right about the command bar as the primary verb surface
- Jira — Every device answering every question, badly
“One question per navigation device.”
Duplication is why navigation feels heavy: three controls that all answer 'where can I go' cost three times the space and still leave orientation unsolved. Assigning one question each makes each device smaller and the set complete.
Stage by stage
01
Information architecture
Every existing control mapped to the question it actually answered. Four of seven answered the same one.
02
Design system
Eleven components, with the breadcrumb generated from the route rather than hand-authored per page.
What was difficult
Breadcrumbs that show the route rather than the journey are noise.
The trail collapses repeated segments and always shows the entity's own name, so it reads as a location rather than a URL.
Exactly what you get
- Figma source
- 5 screens
- Light + dark
- React + Tailwind
- Version
- 1.0.0
- Formats
- Figma, React, Tailwind
- Screens
- 5
- Components
- 11
- Dark mode
- Yes
- Prototype
- No
- Accessibility
- AA
Dependencies
- Inter — SIL Open Font Licence — included
- Lucide — ISC licence
Commercial fonts are never redistributed — they are named and linked, with a free equivalent substituted in the delivered files.
Navigation shrank while the number of reachable destinations went up.