Navbar
UI ComponentsA horizontal navigation bar typically placed at the top of a page, containing the logo, main navigation links, and often search or user account controls.
Visual Examples
Example 1
Example 2
Example 3
Visual examples for Navbar coming soon.
How It Works in Apps/Websites
The navbar (navigation bar) is usually the primary navigation element on a website. It stays at the top of the page and often becomes 'sticky' so it remains visible while scrolling. A typical navbar contains the logo (linked to homepage), main navigation links, and utility elements like search, notifications, or user profile. On mobile, the full menu typically collapses into a hamburger menu icon.
How AI Interprets This Term
When you say 'navbar', AI understands this as a horizontal bar at the top of the page, typically 60-80px tall, with the logo on the left, navigation links in the center or right, and possibly a user avatar or action buttons on the far right. It expects the navbar to span the full width of the viewport with horizontal padding.
Prompt Examples
Copy-paste these prompts to use in your AI tools.
Create a navbar with logo, 4 navigation links, and a login button
Design a sticky navbar with logo on left, centered navigation links (Home, Features, Pricing, About), search icon and user avatar on right. Include transparent-to-solid background transition on scroll.
Show a navbar in desktop view with full navigation, and mobile view with hamburger menu expanded
Compare With
Related or contrasting terms to help you understand the differences.
Variants & States
Variants
States
Usage Guidelines
When to Use
- •As the primary navigation on most websites
- •When you have 3-7 main navigation items
- •When brand visibility is important
- •Sites with hierarchical navigation structure
When NOT to Use
- •Mobile-first apps where bottom navigation is more thumb-friendly
- •Single-page apps with minimal navigation needs
- •Immersive experiences where chrome should be minimal
Related Terms
Breadcrumbs
A secondary navigation aid showing the user's location within the site hierarchy, typically displayed as a horizontal trail of links separated by arrows or slashes.
Hamburger Menu
A button consisting of three horizontal lines that, when clicked, reveals a hidden navigation menu. Named for its resemblance to a hamburger.
Header
The topmost section of a page containing the logo, navigation, and often key actions like login or search. It typically stays consistent across all pages.