Navbar
The bar across the top of a site or app: the brand, the main links and one call to action. On small screens the links fold into a menu behind a button.
Preview
Product
When to use
- At the top of every page of a marketing site or a product with a few top-level sections.
- When there are up to five or six main destinations; beyond that, group them or move to a sidebar.
Reach for something else
- For moving between sections within one page: that is a Tab Menu Horizontal.
- For a product with deep navigation: a sidebar with a Tab Menu Vertical style list holds more.
Anatomy
- 1
Bar
Full width, white, with a hairline along the bottom.
- 2
Brand
Logo mark and name, linking home.
- 3
Links
The main destinations; the current one in primary text with a soft surface.
- 4
Call to action
One button at the end, such as Get started.
- 5
Menu button
On small screens, replaces the links; opens a panel under the bar.
- 6
Menu panel
The links stacked full width, with the call to action at the bottom.
States
Desktop
Brand, links and call to action in one row.
Mobile closed
Brand and the menu button only.
Mobile open
The panel drops below the bar; the menu icon becomes a close icon.
Current link
Marked with a surface and aria-current.
Hover and focus
Links darken on hover; a ring shows on focus.
Accessibility
- The bar is a <header> holding a <nav> with an aria-label such as "Main", and the current link carries aria-current="page".
- The menu button is a <button> with aria-expanded and aria-controls pointing to the panel, and a label that says Open menu or Close menu.
- Escape closes the open menu and returns focus to the button.
- A skip link before the bar lets keyboard users jump straight to the main content.
Source
The Navbar is in the Figma library today, with every variant and state above. Its React and Vue source ships with the code library, free, and this page gets the install line, the props and the code the day it does.
See it in a block