Library / UI components / Sidebar
No. 005·noun·also called side nav, navigation rail, left nav

Sidebar

A column down the side of the screen that holds the app's main navigation and stays put while you move around.

SPECIMEN · LIVE DEMO
Definition

What it is

A sidebar is a vertical panel, usually on the left, listing the main places in an app. It stays visible as you move between pages, so you always know where you are and how to get elsewhere.

Sidebars suit apps with many sections that people jump between all day: email, project tools, dashboards. They often collapse to a thin strip of icons to save room, and on phones they usually turn into a drawer opened from a menu button.

A sidebar is permanent navigation. A drawer is a panel that slides in on demand and goes away again.

Say it like a builder

How to ask for it

Vague

“Put the menu on the left side so I can get to everything.”

Precise

“Add a fixed left sidebar with links to Dashboard, Projects, Reports, and Settings, highlighting the current page. It should collapse to icons below 1100px wide and become a drawer behind a menu button on mobile.”

Why it works

"The menu on the left" leaves behavior open; "sidebar" names persistent navigation and the prompt covers the active state and smaller screens.

In the wild

You've seen this in

  • SSlack's channel list
  • GThe folder list in Gmail
  • NNotion's page tree
Usage note

Often confused with

DrawerA drawer slides in when asked and closes again; a sidebar is always there.TabsTabs switch views inside one page; a sidebar moves you around the whole app.