Skip to content
Sign in

Navbars for React and Tailwind

A navbar is on every page, so small mistakes get repeated everywhere. The good ones stay readable over any background, collapse cleanly on a phone and make the current page obvious. Check how each one behaves when the links run out of room, because that is where most fall apart. Install one as code you own, then add your own links and logo.

Expandable Navbar
Expandable Navbar
Line Nav
Line Nav

About navbars

Navbars are the bar across the top of a site: logo, main links, a call to action and often search, a theme switch or sign in. They can stick to the top, shrink or blur as the page scrolls, open mega menus with grouped links, and collapse into a menu button on phones.

Keep the main links few and named for what people look for. Show the current section, make the bar sticky only if it stays slim, and test the collapsed menu as carefully as the desktop bar. The sign up button should be easy to find at every width.

Frequently asked questions

Show the main links in a row on wide screens and swap them for a menu button that opens a drawer or full screen panel on narrow ones, switching at a breakpoint with CSS.

Set position sticky and top zero on the header, give it a background so content doesn't show through and keep it slim. Some designs hide it on scroll down and show it on scroll up.

Give the header a semi transparent background and backdrop-filter blur, so content scrolling underneath shows softly through it. Keep a solid fallback colour for browsers without support.

A large dropdown from the navbar that shows many links at once, grouped into columns with headings and sometimes images. It suits sites with many products or sections.

Usually between three and seven main links, plus a call to action. Move secondary pages into a dropdown or the footer.

Compare each link with the current route, style the match differently and set aria-current to page so screen readers announce it.

Use buttons to open them, set aria-expanded, let Escape close them and make sure every item can be reached with the Tab and arrow keys.

Explore more