Component · Navigation · 11
Navbar
Navbar = a top bar holding logo, links, and search, separated from the page by a hairline or a blur.
What is a Navbar?
A navbar is a persistent orientation strip. Specify height, logo, link density, search, and scroll behavior.
Variants
Tap a property to highlight it in the preview.
- A navbar with an opaque background fill.
- A navbar with no background until content scrolls under it.
- A navbar with a frosted-glass (backdrop-blur) background.
- The vertical size of the navbar; affects how much it pushes content down.
- The brand mark at the start of the navbar.
- The primary navigation items in the navbar.
- Give a value, not a vibe word.
States
Tap a property to highlight it in the preview.
- The resting, valid state of a field before any input or error.
- How the control reacts on pointer-over: lift, tint, or border change. Name it so the model does not guess.
Anatomy
These are the parts to name in your prompt.
- 01 Logo
- 02 Links
- 03 Search
When to use
- Persistent orientation at the top of every page
- Marketing sites — logo, 3 links, one search field
- Product apps — add search or an account menu
Avoid when
- Deep hierarchies — pair it with a Sidebar
- Mobile-first flows without a menu-button plan
- More than 5 top-level links