UI components · Navigation
Navbar
Also called: Navigation bar, Top nav, Header, App bar
A horizontal bar fixed at the top of the page that holds the site logo, links to the main sections, and global entry points like search and sign-in.
Click “Labeled” to see what each part is called.
How to tell AI
Swap in your own content firstBuild a 64px-tall white navbar at the top of the page that sticks when scrolling. Put the logo on the left, followed by four sections: Home, Products, Pricing, Docs. Make the current section bold with an underline. On the right, put a search box and the user's avatar, and open a dropdown menu when the avatar is clicked. Below 768px wide, collapse the sections into a hamburger menu.
Send to
01Decide
Does your content look like this?
Check both columns to confirm Navbar is what you need.
Use Navbar when
- When the site or app has 7 or fewer top-level sections that users need to switch between quickly from any page
- Content-focused pages with plenty of horizontal space, like marketing sites, blogs, and store home pages
- When you need a fixed spot for global entry points like search, notifications, and the user avatar
Pick something else when
Admin systems with more than 8 top-level sections or multi-level submenus, which won't fit horizontally
Use insteadSidebar MenuJust switching between a few blocks of content within one page
Use insteadTabsA few action options that appear temporarily after clicking a button
Use insteadDropdown Menu
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
Cramming a dozen or more sections into the navbar in one row, so the text gets squashed and wraps or overflows on small screens
- 02
No highlight on the current section, so users can't tell which page they're on
- 03
The navbar and the sidebar menu holding exactly the same set of links, taking up space twice
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 container with a logo on the left, a group of section links, and an action area on the right (search, notifications, avatar or sign-in button). On small screens there's also a hamburger menu button.
PartsClick one to highlight it in the wireframe above
04Explained
In detail
The navbar spans the top of the page. The logo usually sits on the left, a few main sections sit in the middle or on the left, and global actions like search, messages, and the avatar sit on the right. It appears on every page, so users always know which site they're on and where they can go. Seven sections or fewer works best. Any more and they won't fit.
It often shows up together with a dropdown menu, but they do different jobs. The navbar is a permanent entry point that's always on the page. A dropdown menu is a set of options that pops up temporarily on click or hover and closes when you're done. Only hang a dropdown menu under a navbar item when that section has subpages.
On small screens, the navbar usually collapses into a "hamburger" icon that expands the sections when tapped. On longer pages it's often made sticky so it stays visible while scrolling.
Developer infoTerm ID, DOM cues, match priority
- Term ID
component-navbar- DOM selectors
The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).
header navbody > header[role="banner"].navbar.ant-layout-header.ant-menu-horizontal.el-headerul.el-menu--horizontal[class*="MuiAppBar-root"].arco-layout-header.arco-menu-horizontal.t-head-menu.n-layout-header.n-menu--horizontal[data-slot="navigation-menu"]
- Priority
- 1 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 29, 2026