Skip to main content
Frontend Glossary

UI components · Navigation

Sidebar Menu

Also called: Sidebar, Side nav, Left nav, Sider

A vertical navigation menu on the left side of the page that can hold many sections and expand them level by level. Common in admin systems and docs sites.

Click “Labeled” to see what each part is called.

How to tell AI

Swap in your own content first

Build a 220px-wide, full-height sidebar menu on the left side of the page, with an icon before each item. "Orders" and "Users" have second-level menus that expand or collapse on click. Highlight the background of the item for the current page and keep its parent expanded. Put a collapse button at the bottom. When collapsed, it becomes a 64px-wide column of icons, and hovering an icon shows its name in a tooltip.

Send to

01Decide

Does your content look like this?

Check both columns to confirm Sidebar Menu is what you need.

Use Sidebar Menu when

  • Admin panels and data platforms with many top-level sections plus second- and third-level subsections
  • When users switch between feature modules often and need to see every entry point at all times
  • Pages wide enough that reserving about 200px on the left doesn't hurt the main content
  • Docs sites organized by chapter, with a deep table of contents

Pick something else when

  • Marketing sites with only three to five sections. A navbar is simpler.

    Use insteadNavbar

  • Narrow screens like phones, where a permanent sidebar squeezes the content. Use a drawer or a bottom tab bar.

    Use insteadDrawer

  • Just switching between a few blocks of content on the same page

    Use insteadTabs

Not sure? Upload a screenshot and page analysis will check which layout each block should use.

02Pitfalls

Common misuse

It looks like it works, but it makes things harder for users.

  1. 01

    A fixed sidebar for only three or four menu items, leaving a big empty strip that wastes width

  2. 02

    Submenus nested four or five levels deep, so users can't find things or tell where they are

  3. 03

    No highlight on the current page's menu item, and its parent isn't expanded either

03Spot it

How to spot it

Look at the overall structure first, then check a few features you can spot at a glance.

Structure

A vertical container with icon menu items, expandable submenu groups, and a collapse button at the bottom. Often paired with a navbar.

PartsClick one to highlight it in the wireframe above

04Explained

In detail

A sidebar menu runs down the left side of the page. Each item is a section, and items with subsections can be clicked to expand the next level. Because it's vertical, it fits far more sections than a navbar. Even fifteen or twenty don't feel crowded, which is why admin panels, consoles, and docs sites almost all use one.

It usually supports collapsing down to a single column of icons, giving the space to the content area on the right. The current menu item is highlighted and its parent stays expanded, so users know where they are.

Many systems combine a navbar with a sidebar menu. The top bar holds the product logo and account info, and the sidebar holds the business sections. If you're only switching between a few blocks of content on one page, use tabs. You don't need a sidebar menu.

Developer info
Term ID
component-sidebar-menu
DOM selectors

The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).

  • aside nav
  • nav[aria-label*="sidebar" i]
  • aside [role="menu"]
  • .ant-layout-sider
  • .ant-menu-root.ant-menu-inline
  • .ant-menu-root.ant-menu-vertical
  • .el-aside
  • ul.el-menu--vertical:not(.el-menu--popup)
  • [class*="MuiDrawer-docked"]
  • .arco-layout-sider
  • .arco-menu-vertical
  • .t-default-menu
  • .n-layout-sider
  • .n-menu--vertical
  • [data-slot="sidebar"]
  • .nav.flex-column
Priority
2 · when several match at the same level, the higher priority wins
Version
v2 · updated Sep 29, 2026