Navbars
A navbar is the strip across the top of a product that holds the brand mark, the top level of navigation and whatever controls depend on who is signed in. It is the one component every page shows, so it absorbs more state than its size suggests: a menu open or closed, a session signed in or out, a width wide enough for the links or not.
Both navbars here carry those axes as live state rather than as separate designs, which is the honest way to build one: drawn as static frames, a hover-open menu crossed with a signed-in avatar multiplies into a wall of pictures of two components. The part worth getting right is hover intent. A menu that opens the instant a pointer touches its trigger will open on the way past, and one that closes the instant the pointer leaves will close while the reader is moving diagonally toward it. A short delay on both edges fixes it; a click pins the menu open, and Escape returns focus to the trigger.
Marketing navbar
Best for
Marketing sites, product landing pages, brand-forward app shells
Anatomy
Brand mark and wordmark · four nav links · a Products mega-menu whose columns are tone-coded by theme · a Resources dropdown · a Log in/Sign up pair that becomes a signed-in Manage pill · a full-width sheet once the links collapse
Compact navbar
Best for
SaaS dashboards, boxed app shells, product tools without a marketing brand mark
Anatomy
A boxed 800px pill · four nav pills, three opening their own panels (a Products grid of the tools it works with, Customers, Resources) · a Log in/Get started pair that becomes a signed-in Manage pill · the brand mark and a sheet once the pills collapse
App top bar
Best for
The bar across the top of a signed-in app
Anatomy
Brand mark with store name · page links · search · bell with unread count · user chip with role · light and dark
Using Navbars
Reach for it when
- A product whose top-level sections fit across one row
- Landing pages where sign-up has to be reachable from any scroll position
- App shells that need the account control in a fixed, predictable corner
- When signed-out and signed-in visitors share a page but need different actions
Reach for something else when
- A section tree several levels deep: a sidebar or a tree view shows depth that a mega-menu flattens
- Checkout and other one-way flows: strip the header back to the mark and an exit
- Switching between views of the same page. That is what tabs say
Where it shows up
Marketing site header
The header a first-time visitor meets: brand mark, a handful of section links, and the sign-up pair kept visible while they read, since that pair is what the page is for.
Product mega-menu
A panel wide enough to group what you sell into columns, each with its own heading and a short description per entry, so a visitor can tell two similar offerings apart without leaving the page.
Dashboard app shell
A boxed bar over a tool: a few nav pills, no marketing brand mark, and the account control in the corner where it stays put as the view beneath it changes.
Signed-in account state
The same bar has to serve a stranger and a member. One sees a log-in and a sign-up; the other sees their photo and a way to manage the account, in the same place on the same row.
Questions
Should navbar menus open on hover or on click?
Both, with rules. Open on hover after a short delay so the menu does not appear when the pointer is only passing, and close after a delay so it survives a diagonal trip into the panel. A click pins it open for anyone who prefers clicking, keyboard focus opens it, and Escape closes it and returns focus to the trigger.
What should a navbar do when the links no longer fit?
Collapse the links into a sheet behind a menu button, and keep the brand mark and the one action that matters on the bar itself. Do not let the row scroll sideways: a link sitting past the right edge with nothing announcing it is unreachable in practice. The sheet should close on Escape and when navigation happens.
Premium components,
free in your inbox.
Join the Orvain Dispatch and get production-ready components, free to keep: React and Vue code plus the Figma frame, yours to ship.
Orvain MCPNavbars
A navbar is the strip across the top of a product that holds the brand mark, the top level of navigation and whatever controls depend on who is signed in. It is the one component every page shows, so it absorbs more state than its size suggests: a menu open or closed, a session signed in or out, a width wide enough for the links or not.
Both navbars here carry those axes as live state rather than as separate designs, which is the honest way to build one: drawn as static frames, a hover-open menu crossed with a signed-in avatar multiplies into a wall of pictures of two components. The part worth getting right is hover intent. A menu that opens the instant a pointer touches its trigger will open on the way past, and one that closes the instant the pointer leaves will close while the reader is moving diagonally toward it. A short delay on both edges fixes it; a click pins the menu open, and Escape returns focus to the trigger.
Marketing navbar
Best for
Marketing sites, product landing pages, brand-forward app shells
Anatomy
Brand mark and wordmark · four nav links · a Products mega-menu whose columns are tone-coded by theme · a Resources dropdown · a Log in/Sign up pair that becomes a signed-in Manage pill · a full-width sheet once the links collapse
Compact navbar
Best for
SaaS dashboards, boxed app shells, product tools without a marketing brand mark
Anatomy
A boxed 800px pill · four nav pills, three opening their own panels (a Products grid of the tools it works with, Customers, Resources) · a Log in/Get started pair that becomes a signed-in Manage pill · the brand mark and a sheet once the pills collapse
App top bar
Best for
The bar across the top of a signed-in app
Anatomy
Brand mark with store name · page links · search · bell with unread count · user chip with role · light and dark
Using Navbars
Reach for it when
- A product whose top-level sections fit across one row
- Landing pages where sign-up has to be reachable from any scroll position
- App shells that need the account control in a fixed, predictable corner
- When signed-out and signed-in visitors share a page but need different actions
Reach for something else when
- A section tree several levels deep: a sidebar or a tree view shows depth that a mega-menu flattens
- Checkout and other one-way flows: strip the header back to the mark and an exit
- Switching between views of the same page. That is what tabs say
Where it shows up
Marketing site header
The header a first-time visitor meets: brand mark, a handful of section links, and the sign-up pair kept visible while they read, since that pair is what the page is for.
Product mega-menu
A panel wide enough to group what you sell into columns, each with its own heading and a short description per entry, so a visitor can tell two similar offerings apart without leaving the page.
Dashboard app shell
A boxed bar over a tool: a few nav pills, no marketing brand mark, and the account control in the corner where it stays put as the view beneath it changes.
Signed-in account state
The same bar has to serve a stranger and a member. One sees a log-in and a sign-up; the other sees their photo and a way to manage the account, in the same place on the same row.
Questions
Should navbar menus open on hover or on click?
Both, with rules. Open on hover after a short delay so the menu does not appear when the pointer is only passing, and close after a delay so it survives a diagonal trip into the panel. A click pins it open for anyone who prefers clicking, keyboard focus opens it, and Escape closes it and returns focus to the trigger.
What should a navbar do when the links no longer fit?
Collapse the links into a sheet behind a menu button, and keep the brand mark and the one action that matters on the bar itself. Do not let the row scroll sideways: a link sitting past the right edge with nothing announcing it is unreachable in practice. The sheet should close on Escape and when navigation happens.
Related blocks
All blocksPremium components, free in your inbox.
Join the Orvain Dispatch and get production-ready components, free to keep: React and Vue code plus the Figma frame, yours to ship.
