Layouts · Page frame
Top Navigation Layout
Also called: Top nav layout, Header layout, Header-content layout, Top nav
A horizontal nav bar across the top holds the logo, main menu and user links, and the whole area below it is content. Good for sites with only a few nav items.
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 firstUse a top navigation layout for this page. The nav bar at the top is 60px tall with a white background and a 1px light gray bottom border, and it's sticky. Put the logo on the left, then four menu items "Home, Product, Pricing, Docs" aligned left with the current one highlighted, and a search box and the user avatar on the right. Below the nav bar is the content area, max width 1200px, centered. On mobile, collapse the menu into a hamburger button.
Send to
01Decide
Does your content look like this?
Check both columns to confirm Top Navigation Layout is what you need.
Use Top Navigation Layout when
- There are few top-level nav items (seven or fewer) and a shallow hierarchy, so they fit on one line
- Company sites, online stores, blogs and other browsing-focused sites for general visitors
- The content area needs as much horizontal space as possible
Pick something else when
There are many menu items or multi-level submenus that don't fit on one line
Use insteadSidebar LayoutAdmin systems where users switch between lots of feature modules often
Use insteadSidebar LayoutThe page does just one thing and doesn't need site-wide navigation, like a login page or a step-by-step wizard
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.
- 01
Too many menu items, so they wrap onto two lines or the text gets cut off
The wireframe below shows this case. The red dashed box marks the problem.The wireframe on the right shows this case. The red dashed box marks the problem.
- 02
The nav bar doesn't highlight the current page, so users don't know which page they're on
- 03
On mobile, the menu stays in a horizontal row instead of collapsing into a hamburger menu
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 horizontal nav bar at the top with the logo, main menu and tool links from left to right. Below it is a full-width content area, usually with a max width and centered.
PartsClick one to highlight it in the wireframe above
04Explained
In detail
Top nav plus content is the most common overall frame for websites. At the very top is a fixed-height nav bar (usually 56–64px): the logo on the left, a few main menu items aligned left or centered, and search, notifications and the user avatar on the right. The content area sits right below the nav bar.
It leaves all the horizontal space to the content, which suits company sites, online stores, blogs and content communities with few top-level nav items (usually three to seven) and a shallow hierarchy. The nav bar is often sticky, so it stays visible while the page scrolls.
The main difference from a Sidebar Layout is how much navigation fits. A top bar has limited horizontal space, so once you have more than seven or eight menu items or multi-level submenus, it gets too crowded, and you should switch to side navigation. You can also combine the two: top-level modules in the top bar, and the current module's second-level menu on the left.
Developer infoTerm ID, DOM cues, match priority
- Term ID
layout-topbar-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-header):not(:has(.ant-layout-sider)).el-container:has(> .el-header):not(:has(.el-aside))
- Priority
- 1 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 29, 2026