Navbar
The navbar provides global wayfinding, search entry, and account controls. It should stay consistent and compact
across Company web products.
When to use
- Top-level app sections (Home, Workspace, Projects) on every primary view.
- Global search and user/account actions reachable from any screen.
- Establishing brand and current location in web applications.
When not to use
- Context-specific toolbars — use Ribbon Groups on desktop.
- Local panel actions — place buttons in Feature Panels.
- Secondary navigation inside a section — use tabs or a sidebar list.
Anatomy (left → right)
- Brand (logo / product name)
- Primary sections — short noun labels
- Global search
- System actions (notifications, settings)
- User menu (avatar)
- Window controls — desktop shell only, not in web
Layout and spacing
| Property |
Value |
| Navbar height |
56px |
| Horizontal padding |
16px at ≤1440px; 24px beyond |
| Item spacing |
1.5rem between items; 0.25rem icon–label gap |
| Logo max height |
28px |
| Search input width |
250–350px default, expands on focus |
Example
States
- Default: secondary text color
- Hover: background tint, pointer cursor
- Active / current: primary underline or emphasis on current section
Responsive behavior
- ≥1024px: full labels, expanded search
- <1024px: collapse to icon menu; preserve search access
See Responsive Design for breakpoints and touch targets.
Accessibility
- Wrap in
<nav> with an accessible name.
- Mark the current page with
aria-current="page".
- Search field has a visible or accessible label.
- Dropdown menus follow keyboard patterns from Dropdowns.
Related components