Skip to main content
Frontend Glossary

Layouts · Page frame

Sidebar Layout

Also called: Sidebar navigation, Side nav layout, Admin layout, Left menu layout

A vertical feature menu on the left and the content for the current menu item on the right. Good for admin systems with many modules that users switch between often.

Click “Labeled” to see what each part is called, or “Anti-pattern” to see the most common mistake.

How to tell AI

Swap in your own content first

Use a sidebar layout. The left menu is 220px wide and can collapse to 64px showing only icons. Menu items are "Overview, Orders (with a submenu), Products, Users, Settings", with the current item highlighted. On the right, a 56px-tall top bar holds the breadcrumb and user avatar, and below it the content area has a light gray background and 24px padding. The sidebar stays fixed; only the content area scrolls.

Send to

01Decide

Does your content look like this?

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

Use Sidebar Layout when

  • There are many feature modules (more than seven) or menus two or more levels deep
  • Admin systems and tool products where users switch between several modules often
  • Desktop use, where people stay for a long time to get work done

Pick something else when

  • The left column shows data records that users click to see details

    Use insteadMaster-Detail Layout

  • There are only three to five nav items, which fit in a single top bar

  • Marketing pages and company sites for general visitors, where the goal is reading and conversion

    Use insteadTop Navigation Layout

  • Mostly used on phones, where the screen can't fit a persistent sidebar

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

    Only three or four menu items, but they take up a whole sidebar and waste horizontal space

    The wireframe below shows this case. The red dashed box marks the problem.

  2. 02

    The sidebar scrolls with the content, so the menu disappears as you scroll down

  3. 03

    The current page isn't highlighted in the menu, or the expanded submenu doesn't match the current page

Anti-pattern, matches item 01

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 fixed-width vertical menu on the left. On the right, a slim top bar (breadcrumb, user menu) sits above a content area that fills the remaining space.

PartsClick one to highlight it in the wireframe above

04Explained

In detail

The sidebar layout is the standard frame for admin systems. On the left is a vertical menu about 200–240px wide that lists feature modules like "Overview, Orders, Products, Users, Settings" and can expand into submenus. On the right is the content area for the current module, often with a slim top bar that holds the breadcrumb and the user avatar.

A vertical menu can fit many items and several levels, so users can always see what the system offers and which item they're on. The sidebar can usually collapse into a narrow icon-only strip to give the content area more room.

Note the difference from a Master-Detail Layout. In a sidebar layout, the left column is a fixed feature menu, and clicking an item swaps the right side for another feature page. In a master-detail layout, the left column is a list of data records, and clicking one shows that record's details on the right.

Developer info
Term ID
layout-sidebar-content
DOM selectors

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

  • .ant-layout:has(> .ant-layout-sider)
  • .el-container:has(> .el-aside)
  • .arco-layout:has(> .arco-layout-sider)
Priority
1 · when several match at the same level, the higher priority wins
Version
v2 · updated Sep 29, 2026