Sidebar Navigation Design
Sidebar navigation is the backbone of dashboards and productivity apps. It needs to hold many destinations, show where you are, and collapse gracefully on small screens.
By Mohamed Farhan · Updated Oct 19, 2026
Inside the example
The live example above is plain HTML with Tailwind utility classes, so you can paste it into any Tailwind project. It uses type sizes text-sm (14px), text-xs (12px) and spacing p-3 (12px), mb-3 (12px), px-3 (12px), py-2 (8px), space-y-0.5 (2px), mt-4 (16px), mt-1 (4px), constrained by w-60. Everything sits on a 4px grid, which keeps rhythm consistent when you adapt it.
Colors use Tailwind's neutral stone scale so the pattern stays brand-agnostic. Swap stone-900 for your primary color on the main action, keep body text dark and check contrast after any change.
Anatomy
- 1.Workspace or account switcher
- At the top, showing which space the user is in.
- 2.Primary sections
- The main destinations, each with a short label and an icon.
- 3.Groups
- Related items under a small heading.
- 4.Active state
- A filled or tinted background on the current item.
- 5.Footer
- Settings, help and the user menu.
Common variations
- Expanded sidebar with icons and labels, the default for productivity apps and dashboards.
- Collapsible sidebar that shrinks to an icon rail to give more room to content.
- Two-level sidebar, where a narrow rail of sections opens a wider panel of sub-pages, as in many developer and admin tools.
- Off-canvas sidebar that slides in from the side on smaller screens.
States to design
- Default item: icon and label in a neutral color.
- Hover and focus: subtle background change with a visible focus ring.
- Active item: filled or tinted background and stronger text, plus aria-current="page".
- Collapsed: icons only, with tooltips that show labels on hover and focus.
- With badge: small counts for unread items or alerts, used sparingly.
A walkthrough
An operations lead starts her day in an analytics app. The sidebar shows Home, Reports and Inbox at the top, with a small count of four unread items, then a Workspace group with Members and Settings. She opens Inbox, and the item becomes highlighted while the page title confirms where she is.
Working on a wide table, she collapses the sidebar to an icon rail to get more space. Hovering or tabbing onto an icon shows its label, so she does not have to memorize them. When she switches to a client's workspace from the top of the sidebar, the same structure appears, so nothing has moved. On her phone, the most important sections appear as a bottom tab bar in the same order.
How different products use it
Project management and productivity tools use sidebars for workspaces, projects and views, often with favorites pinned at the top.
Developer and admin tools often use a narrow icon rail for major areas and a second panel for detailed pages, so the content area keeps maximum width.
Email and messaging apps use sidebars for folders, channels and labels, with unread counts as the main status signal.
Visual design guidelines
Typical expanded widths are 220 to 280px, with 64 to 72px for a collapsed rail. Items are usually 32 to 40px tall with 16 to 20px icons and 13 to 14px labels. Use a slightly tinted background to separate the sidebar from content rather than a heavy border, and give the active item a filled or tinted background that is clearly different from hover.
Best practices
Do
- Group items and limit each group to about seven entries.
- Keep labels visible; icons alone are hard to learn.
- Allow collapsing to an icon rail on smaller screens.
- Show counts (like unread items) sparingly.
Don't
- Do not nest more than two levels deep.
- Do not move items around based on usage; people rely on position.
- Do not use the same icon for different destinations.
On mobile
On mobile, a permanent sidebar takes too much space. Common solutions are a bottom tab bar for the four or five most important sections plus a menu for the rest, or an off-canvas sidebar opened from a menu button. Keep the order of items the same as desktop so users do not have to relearn the app.
Common mistakes
- Too many items without groups, turning the sidebar into a long list.
- Icon-only navigation without labels, which is hard to learn.
- Deep nesting, where users have to open three levels to find a page.
- Moving items around based on usage, which breaks muscle memory.
Edge cases to plan for
- Very long project names. Truncate with an ellipsis and show the full name in a tooltip.
- Hundreds of items. Add search or filtering inside the sidebar, and let users pin favorites.
- Permissions. Hide or disable items users cannot access, and explain why if disabled.
- Small laptop screens. Auto-collapse below a breakpoint so content has room.
Accessibility checklist
- Use a nav element and a list structure.
- Mark the current item with aria-current="page".
- Make collapsed icon-only items show their labels as tooltips and accessible names.
Implementation notes
Use a nav element containing lists of links. Collapsible groups should use buttons with aria-expanded. In collapsed mode, keep accessible names on icon links with aria-label or visually hidden text, and make tooltips available on keyboard focus as well as hover.
In your design system
In a design system, treat the sidebar as a composition of smaller components: navigation item, group heading, badge, workspace switcher and collapse toggle. Define tokens for item height, icon size, active background and indentation, and document the expanded, collapsed and mobile variants together so teams adding new sections follow the same rules.
How to measure whether it works
Track which sidebar items are used, how often users collapse it, and how long it takes new users to find key features. If important features are rarely visited, try moving them higher or renaming them, and test with first-click tests.
Pre-launch checklist
Microcopy you can use
A step-by-step design process
- Inventory every section of the product and group related ones.
- Order groups by frequency of use, with the most common at the top.
- Choose icons carefully so each one is distinct and meaningful.
- Design expanded and collapsed states together.
- Design the mobile equivalent, such as a bottom tab bar or off-canvas menu.
- Plan for growth, including favorites, search and permissions.
Usability test tasks
Before shipping, run a short usability test with five or so people from your audience. Give them tasks rather than instructions and watch where they hesitate:
- Open the reports section and return to home.
- Collapse the sidebar and find settings.
- Tell how many unread items are in your inbox.
- Switch to another workspace.
Key terms
- Icon rail: A narrow, collapsed sidebar that shows only icons.
- Off-canvas: A panel that slides in from outside the viewport.
- Workspace switcher: A control for moving between accounts, teams or projects.
- Badge: A small count or status marker on a navigation item.
Writing the copy
Use short, consistent nouns for destinations: Projects, Reports, Members, Settings. Group headings can be even shorter. Avoid verbs in navigation labels unless the item is an action, such as 'New project', which should look like a button rather than a link.
Prompts to generate variations
If you use an AI UI generator such as Inspo AI, these prompts are a good starting point for exploring variations of this pattern:
- Design a project management app sidebar with workspace switcher, grouped navigation, favorites and a collapsible icon rail.
- Create a two-level developer console sidebar with a narrow icon rail and a secondary panel of pages.
- Design a mobile bottom tab bar that mirrors the five most important sidebar sections.
Related patterns
Sidebars sit alongside a top bar with search, and deep pages often add breadcrumbs. Settings sections inside the content area frequently use tabs.
Generate this pattern for your product
Inspo AI designs the full pattern with every state, grounded in how real products solve it, and exports React + Tailwind.
Sources and further reading
- WAI-ARIA Authoring Practices Guide · Accessible keyboard and screen reader patterns for UI components.
- WCAG 2.1: Non-text Contrast · Contrast requirements for buttons, borders and icons.
- WCAG 2.1: Use of Color · Why color should never be the only way information is shown.
- Nielsen Norman Group articles · Usability research on interface patterns.
More UI patterns
Questions people ask
When should I use a sidebar instead of a top navbar?
Use a sidebar when you have more than six or seven destinations or when users move between sections constantly, as in dashboards and tools.
How wide should a sidebar be?
Commonly 220 to 280px expanded and about 64px when collapsed to icons.
Should sidebar navigation have icons?
Icons help scanning and are essential for a collapsed rail, but keep text labels visible when expanded.
Should a sidebar be on the left or right?
Left is standard for primary navigation in left-to-right languages. Right sidebars are usually used for contextual panels and details.
How many items should a sidebar have?
There is no hard limit, but group items and keep each group to about seven entries so the list stays scannable.
↘ Building Inspo AI | AI-Powered Design Research & Builder Platform | Design Engineer.