Figma sidebar navigation components

Open any serious web app and the odds are the navigation lives on the left. The sidebar won that territory for good reasons: it scales as products grow, it keeps labels readable, and it leaves the full page width for content. The 9 sidebar components and 168 variants above cover the pattern from a simple link list to a collapsible rail, and the decisions behind them are worth knowing before you pick one.

Why the sidebar won the web app

Nielsen Norman Group's research on vertical navigation explains the pattern's persistence: left-side navs are fast to scan, hold more items than a horizontal bar, and grow gracefully when the product sprouts its ninth section.

An app shallow enough to fit every section in one row can run an application header navigation across the top. Marketing sites are a different story; pages built for first-time visitors usually want a header navigation instead, and the two shouldn't be mixed casually.

Five layouts, one anatomy

The set includes five sidebar types: a simple nav list, sections with dividers, sections with subheadings, a dual-tier layout that pairs an icon rail with a secondary panel for two-level products, and a slim rail. The standard sidebar is 280px wide; the slim version collapses to a 68px icon rail and expands to full labels on demand, and the dual-tier layout opens out to 536px with both tiers showing.

Every type also has a mobile version that becomes a slide-out drawer behind a menu button, so the responsive story is designed rather than improvised at the last breakpoint. Choosing between them is mostly a question of depth: the simple list for products with one level of navigation, sections when the list needs grouping, dual-tier when every section has its own sub-navigation, and the slim rail when screen space matters more than labels.

Nav items, account cards, and featured cards

Under the layouts sit the pieces you'll actually customize. Nav items carry current, hover, and focused states plus a dropdown version for nested sections, which in code follows the W3C disclosure navigation pattern.

An account card anchors the bottom of the sidebar with the user's avatar and a menu. And then there are thirteen featured card types for the promotional slot every sidebar eventually grows: upgrade and free trial CTAs, onboarding steps, progress bars and circles, referral links, cookie preferences, support prompts, even a QR code card.

Having them pre-built means the marketing request lands in your file as a component swap, not a Friday redesign. There's a search input slot and a nav menu button in the set too, covering the sidebar's supporting cast.

Collapsing and staying put

Two prototyping questions come up on every sidebar. Collapsing: the slim rail's collapsed and expanded versions exist as variants, so an interactive collapse is a "change to" interaction.

Staying put: to keep the sidebar fixed while the page scrolls, set the sidebar to fixed position in Figma's prototype settings, covered in Figma's scroll and overflow guide. It's the single most-asked sidebar prototyping question, and it's a checkbox once you know where it lives.

When it's time to build, the same sidebars exist in code. Untitled UI React sidebar navigations are open source, built with Tailwind CSS and React Aria, with keyboard navigation and collapse behavior handled for you.