Ready
App Drawer
The App Drawer displays the global navigation in a vertical format for effortless scanning.
Ready
App Drawer
The App Drawer displays the global navigation in a vertical format for effortless scanning.
Ready
App Drawer
The App Drawer displays the global navigation in a vertical format for effortless scanning.
States
States
States
Collapsed
Expanded
Behaviors
Behaviors
Behaviors
Breakpoint Behavior
X-large: When expanded, app drawer will push page content to the right and can remain open when user is working. ³
Large and below: When expanded, the app drawer will display over top of the page content and will collapse when the user interacts with the page content. ³
Best Practices
Best Practices
Best Practices
1
.
Global
The app header should be displayed globally across all pages. It provides a familiar and persistent way for users to navigate. The app header should be hidden if a modal is open.
1
.
Global
The app header should be displayed globally across all pages. It provides a familiar and persistent way for users to navigate. The app header should be hidden if a modal is open.
1
.
Global
The app header should be displayed globally across all pages. It provides a familiar and persistent way for users to navigate. The app header should be hidden if a modal is open.
2
.
Consistent
The content of the app header should remain consistent across all pages. On unauthenticated pages (e.g., login), a version with only the logo may be used.
2
.
Consistent
The content of the app header should remain consistent across all pages. On unauthenticated pages (e.g., login), a version with only the logo may be used.
2
.
Consistent
The content of the app header should remain consistent across all pages. On unauthenticated pages (e.g., login), a version with only the logo may be used.
3
.
Fixed
If the page has scrollable content, the app header should remain fixed and visible at the top of the screen.
3
.
Fixed
If the page has scrollable content, the app header should remain fixed and visible at the top of the screen.
3
.
Fixed
If the page has scrollable content, the app header should remain fixed and visible at the top of the screen.
4
.
Hover States
Navigation items should display a visible hover state. If a nav item opens a menu or tooltip, the nav item should remain in an active state.
4
.
Hover States
Navigation items should display a visible hover state. If a nav item opens a menu or tooltip, the nav item should remain in an active state.
4
.
Hover States
Navigation items should display a visible hover state. If a nav item opens a menu or tooltip, the nav item should remain in an active state.
5
.
Indicate the Current Location
Highlighting the current page improves wayfinding and prevents users from getting lost. ¹ ²
Do
5
.
Indicate the Current Location
Highlighting the current page improves wayfinding and prevents users from getting lost. ¹ ²
Do
5
.
Indicate the Current Location
Highlighting the current page improves wayfinding and prevents users from getting lost. ¹ ²
Do
6
.
Keep It Visible and Predictable
Persistent vertical navigation helps orientation and reduces cognitive load for users ¹.
6
.
Keep It Visible and Predictable
Persistent vertical navigation helps orientation and reduces cognitive load for users ¹.
6
.
Keep It Visible and Predictable
Persistent vertical navigation helps orientation and reduces cognitive load for users ¹.
7
.
Keep Primary Actions at the Top
Place high-priority or frequently accessed items at the top of the list where they're easiest to find ².
7
.
Keep Primary Actions at the Top
Place high-priority or frequently accessed items at the top of the list where they're easiest to find ².
7
.
Keep Primary Actions at the Top
Place high-priority or frequently accessed items at the top of the list where they're easiest to find ².
8
.
Navigation Item Grouping
Navigation items in the app drawer should be grouped with similar items. These groupings should include a heading that describes the group. This helps users scan and understand structure faster. ²
Do
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
Don't
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
8
.
Navigation Item Grouping
Navigation items in the app drawer should be grouped with similar items. These groupings should include a heading that describes the group. This helps users scan and understand structure faster. ²
Do
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
Don't
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
8
.
Navigation Item Grouping
Navigation items in the app drawer should be grouped with similar items. These groupings should include a heading that describes the group. This helps users scan and understand structure faster. ²
Do
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
Don't
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
9
.
New or Beta features
New or beta versions should use a “New” or “Beta” badge for a determined period of time. Do not label old versions of nav items with “Legacy”.
Do
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
Don't
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
9
.
New or Beta features
New or beta versions should use a “New” or “Beta” badge for a determined period of time. Do not label old versions of nav items with “Legacy”.
Do
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
Don't
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
9
.
New or Beta features
New or beta versions should use a “New” or “Beta” badge for a determined period of time. Do not label old versions of nav items with “Legacy”.
Do
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
Don't
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
10
.
Use Clear, Concise Labels
Navigation labels should be short, descriptive, and reflect the user’s mental model—not internal jargon ².
10
.
Use Clear, Concise Labels
Navigation labels should be short, descriptive, and reflect the user’s mental model—not internal jargon ².
10
.
Use Clear, Concise Labels
Navigation labels should be short, descriptive, and reflect the user’s mental model—not internal jargon ².
More
More
More
Related Pages
Additional Reading
Top vs side navigation: Which one is better for your product? https://uxdesign.cc/top-navigation-vs-side-navigation-wich-one-is-better-24aa5d835643
Best UX Practices for Designing a Sidebar https://uxplanet.org/best-ux-practices-for-designing-a-sidebar-9174ee0ecaa2
Left-Side Vertical Navigation on Desktop https://www.nngroup.com/articles/vertical-nav/