Menu
You might say
There are too many features now. Add a menu so people can find their way around.
Help people move between the main sections of a productA menu groups destinations and makes the current location visible. Keep labels consistent, group related items, and avoid making the hierarchy deeper than the product requires. Actions such as sign out should be distinguished from navigation links.
When to use it
- Primary product navigation
- A compact group of destinations
- Nested sections with a real hierarchy
- Account or workspace navigation
When NOT to use it
- Mix unrelated actions and destinations without distinction
- Create deep nesting for a simple site
- Hide the active location
- Rename the same destination in different menus
Anatomy
The whole menu — lays out the items and tracks which one is active
A clickable entry that navigates to its page
Optional — helps users recognize the feature at a glance
Optional — flags unread counts or fresh content
Variants
Horizontal
When there are only a few navigation items and enough horizontal space for a top bar.
Vertical
When there are many functions that need to stay visibly grouped
Collapsed
When the content area is too narrow, collapse it to icon-only navigation.
Typical use cases
App sidebar
Account menu
Workspace navigation
Mobile menu
Alex Chen
Further reading