Every website needs a navigation bar, and a good one is far more work than it looks. It has to hold its layout as links are added, open dropdown menus on hover and on click, collapse into a hamburger menu on phones, behave sensibly when the page scrolls, work with a keyboard and a screen reader — and then you need the same thing again in React, Vue or Angular for the next project.

The free Navbar Builder on webdevpuneet.com does all of that visually. You pick a preset or a layout, add your links and dropdowns, choose how the bar reacts to scrolling and how the mobile menu opens, and copy production-ready code in five formats — or click Fork & Edit to keep building it in an online code editor. This guide walks through every feature, with nine live demos that were all exported straight from the tool.

Every demo below is real code from the builder. Each one has HTML, CSS and JS tabs in its top bar so you can read exactly what the tool generates, and a Fork & Edit button that opens it in My Code. Scroll inside each demo — several of them are about what happens on scroll.

Build a navbar in 60 seconds

  1. Open the Navbar Builder. It opens on the Presets tab.
  2. Click a preset that is close to what you need — SaaS, Portfolio, E-commerce, Docs, Midnight or Agency.
  3. In the Logo and Links tabs, swap in your brand name, your links and any dropdown items.
  4. In the Behavior tab, choose the scroll effect and the mobile menu style.
  5. Pick HTML, React, Tailwind, Vue or Angular above the code and click Copy — or click Fork & Edit.

Here is what you get with the builder’s default settings, before you change anything: a sticky bar with a Products dropdown, an active Home link and a Get Started button. Hover or click Products, then scroll.

A quick tour of the tool

The builder is split into two columns. On the left are the layout buttons and five settings tabs — Presets, Logo, Links, Style and Behavior. On the right is a live preview with Desktop and Mobile buttons and a Fork & Edit button, and under it the code, with tabs for each export format and a Copy button. Every change you make on the left updates the preview and the code instantly.

Presets: start from a finished navbar

The fastest way to a good result is to start from something already good. The Presets tab has six complete navbars, and each one sets the layout, logo, links, dropdowns, colors, scroll effect and mobile menu in one click:

  • SaaS — a Product dropdown, Pricing and Docs links, and a “Start free” button; shrinks on scroll.
  • Portfolio — a centered layout with a bottom border; hides on scroll and uses a full-screen mobile menu.
  • E-commerce — a Shop dropdown and a rounded “Cart” button; sticky, with a side drawer on mobile.
  • Docs — a dark bar with a Guides dropdown and a GitHub button; sticky with a bottom border.
  • Midnight — a dark theme that sits transparent over the hero and opens a left drawer.
  • Agency — a split layout with a Services dropdown and a full-screen mobile menu.

Presets are only a starting point: every setting stays editable, so a preset plus a few changes is usually the quickest route to your own navbar.

Four navbar layouts

The buttons at the top of the left panel switch between four layouts:

  • Default — logo on the left, links on the right. The standard pattern for marketing sites and web apps.
  • Centered — the logo and links grouped in the middle, popular for portfolios.
  • Split — links on both sides of a centered logo, common for shops and agencies.
  • Minimal — links only, for docs and apps where the logo lives elsewhere.

The Split layout is built with a three-column CSS grid, 1fr auto 1fr, so the logo stays exactly in the middle however many links sit on each side. The first half of your links go left and the rest go right, and you control the split by reordering links. Here is the Agency preset in Split layout — hover Services:

Every layout collapses into the same hamburger menu on small screens, so you never have to design a separate mobile version.

Logo and brand

The Logo tab sets your brand name and an optional icon in front of it. The emoji picker next to the icon field opens a grid of logo-friendly symbols in five groups — Tech, Business, Creative, Nature and simple Shapes — or you can paste any emoji or character yourself. The logo is set 4px larger than your link text so it stands out, it links to your home page, and you can hide it entirely with the Show Logo toggle.

Links, the active page and CTA buttons

The Links tab is a full link editor. Rename a link, change its URL, reorder it with the ↑ ↓ arrows, add new links or remove old ones. Two small controls on each row do a lot of work:

  • The green dot marks the current page. That link is shown in your accent color and gets aria-current="page", so screen readers announce “current page”. Only one link can be active at a time.
  • The CTA toggle turns a link into a filled call-to-action button — “Get Started”, “Sign up”, “Book a call”. On mobile it becomes a full-width button inside the menu.

Dropdown menus and submenus

Click “+ Dropdown item” under any link to give it a submenu, then fill in a label and URL for each item. That link becomes a dropdown button with a small arrow. The dropdown behaves differently on desktop and on mobile, and the builder handles both:

  • On desktop, the dropdown floats under its link and opens on hover or on click with a short fade-and-slide. An invisible “bridge” fills the gap between the link and the panel so the menu doesn’t close while your pointer travels into it.
  • On mobile, the same dropdown becomes an expandable section inside the menu.
  • Everywhere, it closes on Escape or on a click outside the navbar, and the button reports its open state with aria-expanded.

Here is the markup the builder exports for a dropdown. The parent is a real <button>, not a link, because it opens something rather than going somewhere:

<li class="nav-item has-dropdown">
  <button class="nav-link nav-dropdown-toggle" type="button" aria-expanded="false">
    Products
    <svg class="nav-caret" ...></svg>
  </button>
  <ul class="nav-dropdown">
    <li><a href="/products/analytics" class="nav-dropdown-link">Analytics</a></li>
    <li><a href="/products/automation" class="nav-dropdown-link">Automation</a></li>
  </ul>
</li>

The Docs preset below shows a dropdown on a dark bar. Click Guides, then press Tab to move through the links and see the keyboard focus outlines.

Navbar scroll effects: sticky, shrink, hide and transparent

How a navbar reacts to scrolling changes how a whole site feels. The On scroll setting in the Behavior tab has five options:

  • Static — the navbar scrolls away with the page.
  • Sticky — it stays pinned to the top using position: sticky.
  • Shrink — it stays pinned and slims its padding down, with a slightly stronger shadow, once the page scrolls.
  • Hide on scroll — it slides away while you scroll down and comes straight back on any scroll up.
  • Transparent — it sits clear over a hero image or banner and fades to a solid background as soon as the page scrolls.

Shrink on scroll

The SaaS preset uses Shrink. Scroll inside the demo and watch the bar slim down — it keeps the navigation available without taking as much room from the content.

Hide on scroll

The Portfolio preset hides the navbar as you scroll down and brings it back the moment you scroll up. It is a favorite on phones, where every pixel of height counts.

The effect is a single CSS rule plus a few lines of JavaScript that compare the current scroll position with the last one:

.navbar { position: sticky; top: 0; transition: transform 0.3s ease; }
.navbar.is-hidden { transform: translateY(-100%); }

let lastY = window.scrollY;
function onScroll() {
  const y = window.scrollY;
  navbar.classList.toggle('is-hidden', y > lastY && y > 80 && !navbar.classList.contains('is-open'));
  lastY = y;
}

Notice the last condition: the bar never hides while the mobile menu is open.

Transparent navbar over a hero

The Midnight preset starts fully transparent over the hero and turns solid as soon as you scroll — a common look for landing pages with a big header image.

Tip: a transparent navbar needs text that reads well against your hero. Check the pair in the Color Contrast Checker before you ship.

The responsive mobile menu

Below a width you choose, the links collapse behind a hamburger menu. Three settings in the Behavior tab control it: the menu style, the icon animation and the breakpoint.

The breakpoint

The Breakpoint slider (480–1024px, 768px by default) sets the width at and below which the hamburger takes over. The value is written into the CSS media queries, the JavaScript and the Tailwind variant, so every export switches at exactly the same width. Use a wider breakpoint if you have many links or long labels. The demos in this article use 560px for the desktop examples and 1024px for the mobile ones, so you can see both inside the article column.

Mobile menu style 1: dropdown panel

The simplest option: the links drop down in a panel under the bar, and dropdowns expand inline. Tap the menu icon, then tap Products.

Mobile menu style 2: slide-in drawer

The classic off-canvas menu: a full-height drawer slides in from the left or right over a dimmed page. Tapping the dimmed backdrop or pressing Escape closes it, and the page behind stops scrolling while it is open. This is the E-commerce preset with a right-hand drawer.

Mobile menu style 3: full screen

For a bold, app-like feel, the full-screen menu fades in over everything with large, centered links. This demo also uses the Spin icon animation.

Animated hamburger icons

Choose how the three lines animate while the menu is open: Cross morphs them into an ×, Arrow folds them into a ← back arrow, and Spin rotates the button while it becomes an ×. It is all CSS transitions driven by one class on the navbar. Here is the exported CSS for the Cross animation:

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: #111827;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.navbar.is-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar.is-open .nav-toggle span:nth-child(2) { opacity: 0; }
.navbar.is-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

The lines are 2px tall with a 5px gap, so moving the outer two by 7px lands them exactly on the middle line before they rotate.

Style: colors, spacing and typography

The Style tab sets the look:

  • Three colors — Background, Text and Accent, each with a native color picker and a hex field. The accent is used for the active link, hover states, the CTA button and the keyboard focus outline.
  • Four sliders — the bar’s padding, the font size, the gap between links and the CTA corner radius.
  • Font weight — Regular, Medium, Semibold or Bold.
  • Two toggles — a soft drop shadow and a bottom border.

Dropdowns and mobile menus pick up the same colors automatically. Need a color scheme first? Build one in the Color Palette Generator.

A live preview that runs the real code

The preview isn’t a picture of a navbar — it is a real, scrollable page running the exact HTML, CSS and JavaScript you are about to copy. That means the dropdowns, scroll effects and mobile menu behave just as they will on your site. Scroll inside it to try the sticky, shrink, hide or transparent effect, and click Mobile to view it in a true 375px-wide frame where the media query switches to the hamburger menu.

Export to HTML, React, Tailwind, Vue and Angular

Choose a format above the code and click Copy. All five include the same dropdowns, mobile menu, scroll behavior and accessibility attributes:

  • HTML — the markup, a <style> block and a few lines of vanilla JavaScript. No libraries, so it drops into any website, CMS or landing page builder.
  • React — a Navbar.jsx component that uses useState and useEffect, plus a matching Navbar.css.
  • Tailwind — a React component styled entirely with Tailwind utility classes (Tailwind CSS v3.2 or later).
  • Vue — a Vue 3 single-file component with <script setup> and <style scoped>.
  • Angular — a standalone Angular 17+ component using signals and the @for / @if control flow.

In the HTML version, the whole mobile menu comes down to one small function that flips a class and keeps the button’s labels honest for screen readers:

function setMenu(open) {
  navbar.classList.toggle('is-open', open);
  toggle.setAttribute('aria-expanded', open);
  toggle.setAttribute('aria-label', open ? 'Close menu' : 'Open menu');
}

toggle.addEventListener('click', () => setMenu(!navbar.classList.contains('is-open')));
navbar.querySelectorAll('.nav-menu a').forEach(link => link.addEventListener('click', () => setMenu(false)));

Everything else — the hamburger animation, the dropdown panel, the drawer — is CSS keyed off that is-open class.

Fork & Edit: keep building in My Code

Copying is perfect when you are dropping a navbar into an existing project. When you want to keep shaping it, use Fork & Edit. It sits in the preview bar and next to the Copy button, and here is what it does:

  1. Click Fork & Edit. My Code, the free in-browser code editor on webdevpuneet.com, opens in a new tab.
  2. Your navbar arrives as a new snippet, with the HTML, CSS and JavaScript in separate editor panes and a live preview — together with the demo page from the builder, so you can still scroll and test it.
  3. Keep editing: add your real page content, rename classes, change the markup or add your own scripts, and the preview updates as you type.
  4. The snippet is saved in your browser, so it is still there next time. You can back it up to a private GitHub Gist if you like.
  5. When it is ready, export it from My Code as a standalone HTML file, a React JSX component or a React + Tailwind component.

Nothing is uploaded at any point: the builder hands the snippet to My Code through your browser’s local storage. And every demo in this article has the same Fork & Edit button in its top bar, so you can open any of them in My Code and start from there.

Accessibility built in

An accessible navbar is mostly about getting a handful of details right, and every export includes them:

  • A <nav aria-label="Main"> landmark, so screen-reader users can jump straight to the navigation.
  • A real <button> for the hamburger, with aria-controls, aria-expanded and a label that switches between “Open menu” and “Close menu”.
  • aria-current="page" on the active link.
  • Dropdown parents that are buttons with aria-expanded.
  • Escape closes any open menu or dropdown.
  • A visible :focus-visible outline in your accent color on every link and button, for keyboard users.

Tips for a better navbar

  • Keep it short. Five or six top-level links is plenty; put the rest in dropdowns.
  • Use one CTA. A single filled button draws the eye; two compete with each other.
  • Set the breakpoint for your content. If your links start to crowd or wrap before 768px, raise the breakpoint until they don’t.
  • Mark the current page. It helps everyone find their place, and screen readers announce it.
  • Test on a real phone. Switch the preview to Mobile, then try the exported code on a device before you ship.

Frequently asked questions

Is the Navbar Builder free?

Yes. It is completely free, with no sign-up and no limits, and the code you generate is yours to use in personal and commercial projects. Everything runs in your browser, so your design is never sent to a server.

Do I need Bootstrap, jQuery or any other library?

No. The HTML export is plain HTML, CSS and vanilla JavaScript. The React, Vue and Angular exports only use their own framework, and the Tailwind export only needs Tailwind CSS. The hamburger and the dropdown arrows are drawn with CSS and inline SVG, so there are no icon fonts either.

How do I add a dropdown menu to a link?

In the Links tab, click “+ Dropdown item” under the link and fill in each item’s label and URL. The link becomes a dropdown that opens on hover or click on desktop and expands inline on mobile.

Can I change where the hamburger menu appears?

Yes. Move the Breakpoint slider in the Behavior tab anywhere from 480 to 1024px. Every export uses the same value.

What happens when I click Fork & Edit?

Your navbar opens in My Code as a new snippet with HTML, CSS and JavaScript panes and a live preview, saved in your browser. You can keep editing it there and export it later as an HTML file or a React component.

Will the navbar work with Next.js, Nuxt or an Angular app?

Yes. Use the React or Tailwind export in Next.js, the Vue export in Nuxt or any Vue 3 app, and the Angular export in Angular 17 and later. The plain HTML version works in WordPress, Webflow, static sites and any CMS that accepts custom HTML.

Try it yourself

Open the Navbar Builder, pick a preset, make it yours, and copy the code or fork it into My Code. Looking for more ready-made navigation patterns? Browse the navigation snippets in the UI Snippets library, or see all the free tools on webdevpuneet.com.

Discover more from WebDevPuneet

Subscribe to get the latest posts sent to your email.