Navbars

What is a navbar?

A navbar, or navigation bar, is the horizontal bar at the top of a website that holds the logo, main links and often a search field, language switcher or call-to-action button. It is usually the first thing visitors use to explore a site, so it needs to be clear on desktop and collapse gracefully on phones and tablets.

When to use a navbar

Use a top navbar for marketing sites, blogs, documentation and most web apps with a small number of main sections, typically five to seven links. For large sites, combine it with a mega menu; for dashboards with many sections, a sidebar is often a better fit. Sticky navbars help on long pages but take up vertical space, so keep them slim on mobile.

Navbar best practices

• Wrap the links in a <nav> element with an aria-label such as "Main".
• Mark the active link with aria-current="page" and a visible style, not colour alone.
• The hamburger toggle should be a <button> with aria-expanded and aria-controls, plus an accessible label.
• Dropdowns must open with the keyboard and close with Escape.
• Keep the logo linked to the homepage and include descriptive alt text.
• Test the breakpoint where links collapse; long labels can wrap awkwardly just above it.
• Ensure sufficient contrast, especially on transparent navbars placed over hero images.

Bootstrap navbar examples and other frameworks

These responsive navbar examples are available in Bootstrap 6, Bootstrap 5, Tailwind CSS and pure CSS. Bootstrap 5 navbars use the familiar navbar, navbar-expand-* and collapse plugin; the Bootstrap 6 alpha versions use its ES module JavaScript, <dialog>-based off-canvas menus and theme-* colour roles for light, dark and brand variations. Tailwind and pure CSS navbars give you a lightweight HTML and CSS navigation bar with a small toggle script. Filter by framework, check the live preview at narrow widths, then copy the code or download it and swap in your own logo and links.