Sidebar
侧边栏
Aliases:左侧菜单侧栏左边菜单导航侧栏固定菜单网页左边固定菜单侧边导航
What is it
A vertical navigation area pinned to one side of the page (usually the left), carrying the primary hierarchy of a product. The de facto standard of admin systems: brand and global search on top, module tree in the sidebar, content focused on the task.
Interactive playground
Try it. Make an informed choice.Switch navigation items and compare expanded and collapsed density.
Loading lab…
What to look for
- 01Mark the current page and retain accessible names when collapsed.
- 02Avoid permanently reserving sidebar width on narrow screens.
✓ When to use
- Deep-hierarchy admin panels, docs sites, dashboards
- Navigation must stay visible for quick switching
- Desktop-first, wide-screen layouts
✕ When not to use
- Mobile — use a drawer or bottom nav instead
- Simple sites with few sections — a top nav is lighter
- Width-hungry content like reading or writing modes
Variants
Fixed
固定宽
Persistent ~240px, the classic
Collapsible
可折叠
Collapses to icon rail — balances density and space
Floating
浮动
Detached, floating card style (Linear-like)
Implementation
position: stickyflexwidthoverflow-y: autoFlex layout: fixed-width sidebar + flex-1 content; sidebar scrolls internally, sticky top. Collapse animates width (240px ↔ 64px) with icon-centered items and text fading out. On mobile breakpoints it becomes a fixed drawer with backdrop. Mark the active item with an accent block or left bar.
Platform API
<aside><nav>Compare
Full comparison →| Sidebar侧边栏 | Menu菜单 | Navbar顶部导航栏 | |
|---|---|---|---|
| Space footprint | High — persistent width | Low — hidden until invoked | Low — one top strip |
| Layer capacity | High — multi-level tree | Medium — two levels at most | Low — mostly one flat level |
| Mobile friendly | Poor — becomes a drawer | Medium — needs larger touch targets | Medium — folds into a hamburger |
Related concepts
A horizontal navigation bar pinned to the top of the page: brand on the left, primary links in the middle, search, actions and avatar on the right. It is the front door of a site — the 3–7 most important destinations compressed into one strip, folding into a hamburger menu on mobile. Usually kept visible with position: sticky.
ComponentsAlternativeA panel that slides in from a screen edge (usually right or left), usually with a backdrop. Lighter than a modal: it carries longer content without leaving the page, and closing restores the original context. On mobile it appears as a nav drawer or a bottom sheet.
ComponentsSimilarA floating search panel summoned with ⌘K / Ctrl+K: type to filter commands, pages or content, navigate with arrow keys, execute with Enter. Popularized by macOS Spotlight; now standard in power-user products.
ComponentsSimilarA hierarchical path like "Home / Library / Page" that states where the user sits in the information architecture: every ancestor is a link back, and the last item marks the current page. The cheapest way to keep users oriented — the name comes from the breadcrumbs Hansel dropped to find his way home. Usually placed above the page title.
ComponentsSimilar