figma guide
Designing sidebars and navigation drawers in Figma: patterns, states, and handoff
Design persistent sidebars and off-canvas navigation drawers in Figma with collapsed states, nested nav, mobile breakpoints, and Dev Mode specs for engineers.
- Published
- Updated
- Jun 12, 2026
- Read time
- 8 min
- Level
- Beginner
Quick answer
Sidebars and drawers in Figma are app-shell navigation patterns—a persistent sidebar stays visible on desktop; a drawer slides in from the edge on mobile or when space is tight. Build a Sidebar / Shell component with variants for state=expanded | collapsed | hidden, breakpoint=desktop | mobile, and optional style=rail | full. Pair nav items with tabs, badges, and modals. Document width tokens, collapse behavior, active route styling, nested menu rules, and focus trap for mobile drawers in Dev Mode. Start from the Figma guides hub if you are new to layout shells.
Who this is for
- Product designers shipping admin dashboards, SaaS apps, and mobile-first products with shared navigation.
- Design system teams replacing one-off left-nav hacks with one shell primitive.
- Engineers implementing responsive breakpoints,
aria-current, and drawer overlay behavior.
Sidebar vs drawer vs top nav vs tabs
| Pattern | Layout | Best for | Avoid when |
|---|---|---|---|
| Persistent sidebar | Fixed left column; content shifts | 6–20 destinations; admin tools | Marketing sites with 4 links |
| Collapsible rail | Icon-only strip; expands on hover or click | Dense apps; power users | First-time users who need labels |
| Off-canvas drawer | Hidden until hamburger opens | Mobile, narrow viewports | Desktop-primary workflows |
| Top navigation | Horizontal bar | Marketing, shallow IA | 15+ nested sections |
| Tabs | Peer views in same context | Settings sub-views | Global app destinations |
Verdict: use a sidebar on desktop and a drawer on mobile for the same nav tree—do not maintain two different information architectures. Use tabs inside the content area for section switching, not for primary app routes.
App shell anatomy
| Part | Purpose | Spec tip |
|---|---|---|
| Sidebar container | Nav column | Width: 240–280px expanded; 56–72px rail |
| Header slot | Logo, product name, collapse toggle | Sticky at top of sidebar |
| Nav group label | ”Main”, “Settings” (optional) | Caption style; hide in rail mode |
| Nav item | Link or button row | Icon + label; min 40–44px height |
| Active indicator | Current route | Left border, fill, or bold—one system-wide |
| Nested items | Children under parent | Indent 16–24px; chevron on parent |
| Footer slot | User menu, help, collapse | Sticky at bottom |
| Content area | Main page canvas | Fills remaining width |
| Mobile overlay | Scrim behind drawer | rgba(0,0,0,0.4–0.6); click to dismiss |
AppShell
├── Variant: sidebar=expanded | collapsed | hidden
├── Variant: breakpoint=desktop | mobile
├── Layer: Sidebar (vertical auto layout, fill height)
│ ├── Header (logo + collapse toggle)
│ ├── NavGroup × N
│ │ ├── Group label (optional)
│ │ └── NavItem × N
│ └── Footer (user avatar, settings)
├── Layer: Main (fill container)
│ └── Page content slot
└── Layer: DrawerOverlay (mobile only, optional)Use layout grids on the main content area—not inside the sidebar list.
Sidebar width and collapse modes
| Mode | Width | Shows | When to use |
|---|---|---|---|
| Expanded | 240–280px | Icon + label + badges | Default desktop |
| Collapsed rail | 56–72px | Icon only; tooltip on hover | Power users; small laptops |
| Hidden | 0px | Drawer trigger in top bar | Mobile; immersive editors |
| Overlay sidebar | 280px over content | Drawer on desktop too | Canvas-heavy tools (Figma, video editors) |
Document whether collapse is user-persisted (localStorage) or breakpoint-driven. Engineering cannot infer this from a single frame.
Nav item states
| State | Visual | Interaction |
|---|---|---|
| Default | Neutral text and icon | Hoverable |
| Hover | surface/hover background | Pointer cursor |
| Active / current | Brand accent, left bar, or bold label | aria-current="page" |
| Focus | Visible focus ring on entire row | Keyboard navigable |
| Disabled | Muted; no pointer | aria-disabled |
| Parent expanded | Chevron rotated; children visible | Toggle on click |
| Parent collapsed | Chevron default; children hidden | Children still reachable via route |
Reuse interactive components for hover and press on nav rows. Active state should not rely on color alone—add weight, icon fill, or left indicator.
Nested navigation
| Depth | Pattern | Spec tip |
|---|---|---|
| 1 level | Flat list with group labels | Up to ~12 items per group |
| 2 levels | Parent row + indented children | Max 5–7 children per parent |
| 3+ levels | Flyout submenu or accordion in sidebar | Avoid on mobile drawer |
NavItem / Parent
├── Variant: state=default | hover | active | expanded
├── Property: hasChildren=true | false
├── Layer: Row (horizontal auto layout, gap 12px, padding 8–12px)
│ ├── Icon (20–24px)
│ ├── Label (truncate with tooltip)
│ ├── Badge (optional)
│ └── Chevron (if hasChildren)
└── Layer: Children (vertical auto layout, indent 24px)
└── NavItem / Child × NDocument default expanded parents (e.g., current section open on load) in the component description.
Mobile drawer behavior
| Behavior | Spec | Common mistake |
|---|---|---|
| Trigger | Hamburger in top app bar | Hidden with no menu affordance |
| Entry | Slide from left (or right for RTL) | Instant appear with no motion spec |
| Scrim | Tap outside closes | Drawer blocks entire screen permanently |
| Focus trap | Tab cycles inside drawer until close | Focus lost behind overlay |
| Escape | Esc closes drawer | No keyboard dismiss |
| Scroll | Nav list scrolls inside drawer | Body scrolls underneath |
| Active route | Closes drawer after navigation (optional) | Drawer stays open on every tap |
Prototype at least: closed, open, and nested expanded frames. Note animation duration (200–300ms) and easing in Dev Mode.
Responsive breakpoint strategy
| Viewport | Shell behavior | Frame in Figma |
|---|---|---|
| ≥1024px | Expanded sidebar | Desktop 1440 or 1280 frame |
| 768–1023px | Collapsed rail or overlay | Tablet frame |
| <768px | Hidden sidebar + drawer | Mobile 390 frame |
Use constraints and breakpoints on the shell—not separate unrelated files per breakpoint. Publish Sidebar and Drawer as linked variants or separate components with a mapping table in handoff.
Pairing with other patterns
| Need | Pattern | Link |
|---|---|---|
| User account menu | Avatar + dropdown in footer | Profile, logout |
| Notifications | Bell icon + badge in header | Badges |
| Search | ⌘K or search in top bar | Search UI |
| Settings sections | Content-area tabs or accordions | Not duplicate nav |
| Destructive actions | Modal | Never bury delete in drawer footer |
Accessibility checklist
| Requirement | Implementation |
|---|---|
| Landmark | <nav aria-label="Main"> |
| Current page | aria-current="page" on active item |
| Expandable sections | aria-expanded on parent rows |
| Mobile drawer | role="dialog" or focus trap; return focus to trigger on close |
| Icon-only rail | aria-label or tooltip on every icon |
| Skip link | ”Skip to main content” above shell (document in handoff) |
Test keyboard order: logo → nav items top-to-bottom → footer → main content. Verify contrast on active and hover states.
Prototyping limits
Figma cannot persist collapse state across pages. For demos:
- Build frames: expanded, collapsed rail, mobile drawer open.
- Wire collapse toggle between expanded and rail frames.
- Wire hamburger → drawer open; scrim tap → closed.
- Note real routing and persistence in sticky comments.
Organize flows with sections per breakpoint.
Handoff to engineering
| Deliverable | Where it lives |
|---|---|
| Sidebar widths (expanded / rail) | Token table or component description |
| Breakpoint values | lg, md px thresholds |
| Collapse persistence | User toggle vs responsive-only |
| Nav data shape | { label, href, icon, children?, badge? } |
| Active matching rules | Exact path vs prefix |
| Drawer animation | Duration, easing, transform origin |
| RTL mirror | Drawer from right; chevron flip |
| z-index stack | Drawer above modals? Document layer order |
Include the shell in your Dev Mode handoff checklist. Publish under Patterns / Navigation in your team library.
Real-world examples
SaaS admin dashboard
Expanded sidebar with grouped nav (Dashboard, Projects, Reports, Settings). Collapsed rail on tablet. User avatar and logout in footer. Content uses tables and breadcrumbs in page header.
Mobile-first consumer app
No persistent sidebar on phone. Bottom tab bar for 4 primary destinations; hamburger drawer for secondary links (Help, Legal, Account). Drawer uses full-height list with large tap targets.
Design tool / canvas app
Overlay sidebar that does not push canvas. Icon rail default; panel expands over content. Document that main canvas does not reflow when sidebar opens.
Common mistakes
| Mistake | Consequence | Fix |
|---|---|---|
| Different nav trees on mobile vs desktop | Users get lost | Same IA; only presentation changes |
| Active state only changes icon color | Fails contrast / color-blind users | Add weight, bar, or background |
| 40+ items in flat sidebar | Unusable scroll | Group, collapse, or move to search |
| Drawer with no scrim | Users do not know how to close | Overlay + tap-outside + Esc |
| Rail mode without tooltips | Icons ambiguous | Required aria-label or tooltip |
| Sidebar scrolls entire page | Footer nav disappears | Internal scroll in nav list |
| Nested flyouts on mobile | Accidental dismiss | Use accordion expand in drawer |
| z-index fights with modals | Drawer covers dialogs | Layer order spec |
FAQ
Sidebar vs hamburger-only navigation?
Use persistent sidebar when users switch destinations many times per session (admin, email, design tools). Use hamburger-only when navigation is rare (marketing, single-task flows).
Bottom tab bar instead of drawer?
Bottom tabs for 3–5 primary mobile destinations users hit daily. Drawer for secondary or 10+ links. Many apps combine both.
Should the sidebar push content or overlay?
Push when users need spatial context (file browsers). Overlay when canvas space is sacred (Figma, maps, video). Document which mode you chose.
Collapse on route change?
Optional for mobile drawer (close after tap). Desktop sidebar usually stays open—do not collapse without user intent.
Bottom line
Design navigation as an app shell—sidebar, rail, drawer, and content area—not isolated nav rows. Document widths, breakpoints, collapse rules, active states, and mobile focus behavior in Dev Mode. Continue with navigation tabs, avatars in the sidebar footer, responsive frames, and the tutorials hub.
§ Keep reading