{"id":112,"date":"2026-10-05T08:43:30","date_gmt":"2026-10-05T08:43:30","guid":{"rendered":"https:\/\/webdevpuneet.com\/blog\/?p=112"},"modified":"2026-10-05T08:43:34","modified_gmt":"2026-10-05T08:43:34","slug":"responsive-navbar-builder-the-complete-guide-to-dropdowns-mobile-menus-and-code-export","status":"publish","type":"post","link":"https:\/\/webdevpuneet.com\/blog\/responsive-navbar-builder-the-complete-guide-to-dropdowns-mobile-menus-and-code-export\/","title":{"rendered":"Responsive Navbar Builder: The Complete Guide to Dropdowns, Mobile Menus and Code Export"},"content":{"rendered":"<p><!--\n================================================================\n  POST TITLE (paste into the WordPress title field \u2014 it becomes the page H1)\n  Responsive Navbar Builder: The Complete Guide to Dropdowns, Mobile Menus and Code Export\n\n  SEO TITLE (57 chars, target 50\u201360, max 60 \u2014 \"Optimize SEO\" panel \u2192 SEO TITLE)\n  Responsive Navbar Builder Guide: Dropdowns & Mobile Menus\n\n  SEO DESCRIPTION (152 chars, target 150\u2013160, max 160 \u2014 \"Optimize SEO\" panel \u2192 SEO DESCRIPTION)\n  Build a responsive navbar with dropdowns, a hamburger menu and sticky or hide-on-scroll effects. 9 live demos, 5 code exports and Fork & Edit explained.\n\n  HOW TO PASTE: click the first line after this comment, press Ctrl+Shift+End, Ctrl+C.\n  In WordPress click \"Type \/ to choose a block\", then Ctrl+V.\n  Fallback: \u22ee menu \u2192 Code editor \u2192 paste.\n================================================================\n--><\/p>\n\n\n<p class=\"wp-block-paragraph\">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 <em>and<\/em> on click, collapse into a hamburger menu on phones, behave sensibly when the page scrolls, work with a keyboard and a screen reader \u2014 and then you need the same thing again in React, Vue or Angular for the next project.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The free <a href=\"https:\/\/webdevpuneet.com\/navbar-builder\/\">Navbar Builder<\/a> 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 \u2014 or click <strong>Fork &amp; Edit<\/strong> 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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Every demo below is real code from the builder. Each one has <strong>HTML<\/strong>, <strong>CSS<\/strong> and <strong>JS<\/strong> tabs in its top bar so you can read exactly what the tool generates, and a <strong>Fork &amp; Edit<\/strong> button that opens it in <a href=\"https:\/\/webdevpuneet.com\/ui-snippets\/mycode\/\">My Code<\/a>. Scroll inside each demo \u2014 several of them are about what happens on scroll.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Build a navbar in 60 seconds<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open the <a href=\"https:\/\/webdevpuneet.com\/navbar-builder\/\">Navbar Builder<\/a>. It opens on the <strong>Presets<\/strong> tab.<\/li>\n\n\n\n<li>Click a preset that is close to what you need \u2014 SaaS, Portfolio, E-commerce, Docs, Midnight or Agency.<\/li>\n\n\n\n<li>In the <strong>Logo<\/strong> and <strong>Links<\/strong> tabs, swap in your brand name, your links and any dropdown items.<\/li>\n\n\n\n<li>In the <strong>Behavior<\/strong> tab, choose the scroll effect and the mobile menu style.<\/li>\n\n\n\n<li>Pick <strong>HTML<\/strong>, <strong>React<\/strong>, <strong>Tailwind<\/strong>, <strong>Vue<\/strong> or <strong>Angular<\/strong> above the code and click <strong>Copy<\/strong> \u2014 or click <strong>Fork &amp; Edit<\/strong>.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Here is what you get with the builder&#8217;s default settings, before you change anything: a sticky bar with a <strong>Products<\/strong> dropdown, an active <strong>Home<\/strong> link and a <strong>Get Started<\/strong> button. Hover or click Products, then scroll.<\/p>\n\n\n\n<iframe src=\"https:\/\/webdevpuneet.com\/demos\/a1\/37\/1.html\" style=\"width:100%;height:500px;border:0;border-radius:10px;overflow:hidden;\" loading=\"lazy\" title=\"Navbar Builder Default Settings Demo by webdevpuneet.com\"><\/iframe>\n\n\n\n<h2 class=\"wp-block-heading\">A quick tour of the tool<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The builder is split into two columns. On the left are the layout buttons and five settings tabs \u2014 <strong>Presets<\/strong>, <strong>Logo<\/strong>, <strong>Links<\/strong>, <strong>Style<\/strong> and <strong>Behavior<\/strong>. On the right is a live preview with <strong>Desktop<\/strong> and <strong>Mobile<\/strong> buttons and a Fork &amp; 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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Presets: start from a finished navbar<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The fastest way to a good result is to start from something already good. The <strong>Presets<\/strong> tab has six complete navbars, and each one sets the layout, logo, links, dropdowns, colors, scroll effect and mobile menu in one click:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>SaaS<\/strong> \u2014 a Product dropdown, Pricing and Docs links, and a &#8220;Start free&#8221; button; shrinks on scroll.<\/li>\n\n\n\n<li><strong>Portfolio<\/strong> \u2014 a centered layout with a bottom border; hides on scroll and uses a full-screen mobile menu.<\/li>\n\n\n\n<li><strong>E-commerce<\/strong> \u2014 a Shop dropdown and a rounded &#8220;Cart&#8221; button; sticky, with a side drawer on mobile.<\/li>\n\n\n\n<li><strong>Docs<\/strong> \u2014 a dark bar with a Guides dropdown and a GitHub button; sticky with a bottom border.<\/li>\n\n\n\n<li><strong>Midnight<\/strong> \u2014 a dark theme that sits transparent over the hero and opens a left drawer.<\/li>\n\n\n\n<li><strong>Agency<\/strong> \u2014 a split layout with a Services dropdown and a full-screen mobile menu.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Four navbar layouts<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The buttons at the top of the left panel switch between four layouts:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Default<\/strong> \u2014 logo on the left, links on the right. The standard pattern for marketing sites and web apps.<\/li>\n\n\n\n<li><strong>Centered<\/strong> \u2014 the logo and links grouped in the middle, popular for portfolios.<\/li>\n\n\n\n<li><strong>Split<\/strong> \u2014 links on both sides of a centered logo, common for shops and agencies.<\/li>\n\n\n\n<li><strong>Minimal<\/strong> \u2014 links only, for docs and apps where the logo lives elsewhere.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">The Split layout is built with a three-column CSS grid, <code>1fr auto 1fr<\/code>, 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 \u2014 hover Services:<\/p>\n\n\n\n<iframe src=\"https:\/\/webdevpuneet.com\/demos\/a1\/37\/8.html\" style=\"width:100%;height:500px;border:0;border-radius:10px;overflow:hidden;\" loading=\"lazy\" title=\"Navbar Builder Split Layout Demo by webdevpuneet.com\"><\/iframe>\n\n\n\n<p class=\"wp-block-paragraph\">Every layout collapses into the same hamburger menu on small screens, so you never have to design a separate mobile version.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Logo and brand<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The <strong>Logo<\/strong> 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 \u2014 Tech, Business, Creative, Nature and simple Shapes \u2014 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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Links, the active page and CTA buttons<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The <strong>Links<\/strong> tab is a full link editor. Rename a link, change its URL, reorder it with the \u2191 \u2193 arrows, add new links or remove old ones. Two small controls on each row do a lot of work:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The <strong>green dot<\/strong> marks the current page. That link is shown in your accent color and gets <code>aria-current=\"page\"<\/code>, so screen readers announce &#8220;current page&#8221;. Only one link can be active at a time.<\/li>\n\n\n\n<li>The <strong>CTA<\/strong> toggle turns a link into a filled call-to-action button \u2014 &#8220;Get Started&#8221;, &#8220;Sign up&#8221;, &#8220;Book a call&#8221;. On mobile it becomes a full-width button inside the menu.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Dropdown menus and submenus<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Click <strong>&#8220;+ Dropdown item&#8221;<\/strong> 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:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>On desktop<\/strong>, the dropdown floats under its link and opens on hover or on click with a short fade-and-slide. An invisible &#8220;bridge&#8221; fills the gap between the link and the panel so the menu doesn&#8217;t close while your pointer travels into it.<\/li>\n\n\n\n<li><strong>On mobile<\/strong>, the same dropdown becomes an expandable section inside the menu.<\/li>\n\n\n\n<li><strong>Everywhere<\/strong>, it closes on Escape or on a click outside the navbar, and the button reports its open state with <code>aria-expanded<\/code>.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Here is the markup the builder exports for a dropdown. The parent is a real <code>&lt;button&gt;<\/code>, not a link, because it opens something rather than going somewhere:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;li class=\"nav-item has-dropdown\"&gt;\n  &lt;button class=\"nav-link nav-dropdown-toggle\" type=\"button\" aria-expanded=\"false\"&gt;\n    Products\n    &lt;svg class=\"nav-caret\" ...&gt;&lt;\/svg&gt;\n  &lt;\/button&gt;\n  &lt;ul class=\"nav-dropdown\"&gt;\n    &lt;li&gt;&lt;a href=\"\/products\/analytics\" class=\"nav-dropdown-link\"&gt;Analytics&lt;\/a&gt;&lt;\/li&gt;\n    &lt;li&gt;&lt;a href=\"\/products\/automation\" class=\"nav-dropdown-link\"&gt;Automation&lt;\/a&gt;&lt;\/li&gt;\n  &lt;\/ul&gt;\n&lt;\/li&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">The Docs preset below shows a dropdown on a dark bar. Click Guides, then press <strong>Tab<\/strong> to move through the links and see the keyboard focus outlines.<\/p>\n\n\n\n<iframe src=\"https:\/\/webdevpuneet.com\/demos\/a1\/37\/7.html\" style=\"width:100%;height:500px;border:0;border-radius:10px;overflow:hidden;\" loading=\"lazy\" title=\"Navbar Builder Dark Sticky Navbar with Dropdown Demo by webdevpuneet.com\"><\/iframe>\n\n\n\n<h2 class=\"wp-block-heading\">Navbar scroll effects: sticky, shrink, hide and transparent<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">How a navbar reacts to scrolling changes how a whole site feels. The <strong>On scroll<\/strong> setting in the <strong>Behavior<\/strong> tab has five options:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Static<\/strong> \u2014 the navbar scrolls away with the page.<\/li>\n\n\n\n<li><strong>Sticky<\/strong> \u2014 it stays pinned to the top using <code>position: sticky<\/code>.<\/li>\n\n\n\n<li><strong>Shrink<\/strong> \u2014 it stays pinned and slims its padding down, with a slightly stronger shadow, once the page scrolls.<\/li>\n\n\n\n<li><strong>Hide on scroll<\/strong> \u2014 it slides away while you scroll down and comes straight back on any scroll up.<\/li>\n\n\n\n<li><strong>Transparent<\/strong> \u2014 it sits clear over a hero image or banner and fades to a solid background as soon as the page scrolls.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Shrink on scroll<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The SaaS preset uses Shrink. Scroll inside the demo and watch the bar slim down \u2014 it keeps the navigation available without taking as much room from the content.<\/p>\n\n\n\n<iframe src=\"https:\/\/webdevpuneet.com\/demos\/a1\/37\/3.html\" style=\"width:100%;height:500px;border:0;border-radius:10px;overflow:hidden;\" loading=\"lazy\" title=\"Navbar Builder Shrink on Scroll Demo by webdevpuneet.com\"><\/iframe>\n\n\n\n<h3 class=\"wp-block-heading\">Hide on scroll<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<iframe src=\"https:\/\/webdevpuneet.com\/demos\/a1\/37\/4.html\" style=\"width:100%;height:500px;border:0;border-radius:10px;overflow:hidden;\" loading=\"lazy\" title=\"Navbar Builder Hide on Scroll Demo by webdevpuneet.com\"><\/iframe>\n\n\n\n<p class=\"wp-block-paragraph\">The effect is a single CSS rule plus a few lines of JavaScript that compare the current scroll position with the last one:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.navbar { position: sticky; top: 0; transition: transform 0.3s ease; }\n.navbar.is-hidden { transform: translateY(-100%); }\n\nlet lastY = window.scrollY;\nfunction onScroll() {\n  const y = window.scrollY;\n  navbar.classList.toggle('is-hidden', y &gt; lastY &amp;&amp; y &gt; 80 &amp;&amp; !navbar.classList.contains('is-open'));\n  lastY = y;\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Notice the last condition: the bar never hides while the mobile menu is open.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Transparent navbar over a hero<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The Midnight preset starts fully transparent over the hero and turns solid as soon as you scroll \u2014 a common look for landing pages with a big header image.<\/p>\n\n\n\n<iframe src=\"https:\/\/webdevpuneet.com\/demos\/a1\/37\/6.html\" style=\"width:100%;height:500px;border:0;border-radius:10px;overflow:hidden;\" loading=\"lazy\" title=\"Navbar Builder Transparent Navbar on Scroll Demo by webdevpuneet.com\"><\/iframe>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Tip:<\/strong> a transparent navbar needs text that reads well against your hero. Check the pair in the <a href=\"https:\/\/webdevpuneet.com\/color-contrast-checker\/\">Color Contrast Checker<\/a> before you ship.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The responsive mobile menu<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Below a width you choose, the links collapse behind a <strong>hamburger menu<\/strong>. Three settings in the Behavior tab control it: the menu style, the icon animation and the breakpoint.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">The breakpoint<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The <strong>Breakpoint<\/strong> slider (480\u20131024px, 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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Mobile menu style 1: dropdown panel<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The simplest option: the links drop down in a panel under the bar, and dropdowns expand inline. Tap the menu icon, then tap Products.<\/p>\n\n\n\n<iframe src=\"https:\/\/webdevpuneet.com\/demos\/a1\/37\/2.html\" style=\"width:100%;height:500px;border:0;border-radius:10px;overflow:hidden;\" loading=\"lazy\" title=\"Navbar Builder Mobile Dropdown Menu Demo by webdevpuneet.com\"><\/iframe>\n\n\n\n<h3 class=\"wp-block-heading\">Mobile menu style 2: slide-in drawer<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<iframe src=\"https:\/\/webdevpuneet.com\/demos\/a1\/37\/5.html\" style=\"width:100%;height:500px;border:0;border-radius:10px;overflow:hidden;\" loading=\"lazy\" title=\"Navbar Builder Side Drawer Mobile Menu Demo by webdevpuneet.com\"><\/iframe>\n\n\n\n<h3 class=\"wp-block-heading\">Mobile menu style 3: full screen<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">For a bold, app-like feel, the full-screen menu fades in over everything with large, centered links. This demo also uses the <strong>Spin<\/strong> icon animation.<\/p>\n\n\n\n<iframe src=\"https:\/\/webdevpuneet.com\/demos\/a1\/37\/9.html\" style=\"width:100%;height:500px;border:0;border-radius:10px;overflow:hidden;\" loading=\"lazy\" title=\"Navbar Builder Full-Screen Menu Demo by webdevpuneet.com\"><\/iframe>\n\n\n\n<h3 class=\"wp-block-heading\">Animated hamburger icons<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Choose how the three lines animate while the menu is open: <strong>Cross<\/strong> morphs them into an \u00d7, <strong>Arrow<\/strong> folds them into a \u2190 back arrow, and <strong>Spin<\/strong> rotates the button while it becomes an \u00d7. It is all CSS transitions driven by one class on the navbar. Here is the exported CSS for the Cross animation:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.nav-toggle span {\n  display: block;\n  width: 24px;\n  height: 2px;\n  border-radius: 2px;\n  background: #111827;\n  transition: transform 0.25s ease, opacity 0.2s ease;\n}\n.navbar.is-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }\n.navbar.is-open .nav-toggle span:nth-child(2) { opacity: 0; }\n.navbar.is-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Style: colors, spacing and typography<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The <strong>Style<\/strong> tab sets the look:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Three colors<\/strong> \u2014 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.<\/li>\n\n\n\n<li><strong>Four sliders<\/strong> \u2014 the bar&#8217;s padding, the font size, the gap between links and the CTA corner radius.<\/li>\n\n\n\n<li><strong>Font weight<\/strong> \u2014 Regular, Medium, Semibold or Bold.<\/li>\n\n\n\n<li><strong>Two toggles<\/strong> \u2014 a soft drop shadow and a bottom border.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Dropdowns and mobile menus pick up the same colors automatically. Need a color scheme first? Build one in the <a href=\"https:\/\/webdevpuneet.com\/color-palette-generator\/\">Color Palette Generator<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">A live preview that runs the real code<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The preview isn&#8217;t a picture of a navbar \u2014 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 <strong>Mobile<\/strong> to view it in a true 375px-wide frame where the media query switches to the hamburger menu.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Export to HTML, React, Tailwind, Vue and Angular<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Choose a format above the code and click <strong>Copy<\/strong>. All five include the same dropdowns, mobile menu, scroll behavior and accessibility attributes:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>HTML<\/strong> \u2014 the markup, a <code>&lt;style&gt;<\/code> block and a few lines of vanilla JavaScript. No libraries, so it drops into any website, CMS or landing page builder.<\/li>\n\n\n\n<li><strong>React<\/strong> \u2014 a <code>Navbar.jsx<\/code> component that uses <code>useState<\/code> and <code>useEffect<\/code>, plus a matching <code>Navbar.css<\/code>.<\/li>\n\n\n\n<li><strong>Tailwind<\/strong> \u2014 a React component styled entirely with Tailwind utility classes (Tailwind CSS v3.2 or later).<\/li>\n\n\n\n<li><strong>Vue<\/strong> \u2014 a Vue 3 single-file component with <code>&lt;script setup&gt;<\/code> and <code>&lt;style scoped&gt;<\/code>.<\/li>\n\n\n\n<li><strong>Angular<\/strong> \u2014 a standalone Angular 17+ component using signals and the <code>@for<\/code> \/ <code>@if<\/code> control flow.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">In the HTML version, the whole mobile menu comes down to one small function that flips a class and keeps the button&#8217;s labels honest for screen readers:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function setMenu(open) {\n  navbar.classList.toggle('is-open', open);\n  toggle.setAttribute('aria-expanded', open);\n  toggle.setAttribute('aria-label', open ? 'Close menu' : 'Open menu');\n}\n\ntoggle.addEventListener('click', () =&gt; setMenu(!navbar.classList.contains('is-open')));\nnavbar.querySelectorAll('.nav-menu a').forEach(link =&gt; link.addEventListener('click', () =&gt; setMenu(false)));<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Everything else \u2014 the hamburger animation, the dropdown panel, the drawer \u2014 is CSS keyed off that <code>is-open<\/code> class.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Fork &amp; Edit: keep building in My Code<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Copying is perfect when you are dropping a navbar into an existing project. When you want to keep shaping it, use <strong>Fork &amp; Edit<\/strong>. It sits in the preview bar and next to the Copy button, and here is what it does:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Click <strong>Fork &amp; Edit<\/strong>. <a href=\"https:\/\/webdevpuneet.com\/ui-snippets\/mycode\/\">My Code<\/a>, the free in-browser code editor on webdevpuneet.com, opens in a new tab.<\/li>\n\n\n\n<li>Your navbar arrives as a new snippet, with the HTML, CSS and JavaScript in separate editor panes and a live preview \u2014 together with the demo page from the builder, so you can still scroll and test it.<\/li>\n\n\n\n<li>Keep editing: add your real page content, rename classes, change the markup or add your own scripts, and the preview updates as you type.<\/li>\n\n\n\n<li>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.<\/li>\n\n\n\n<li>When it is ready, export it from My Code as a standalone HTML file, a React JSX component or a React + Tailwind component.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Nothing is uploaded at any point: the builder hands the snippet to My Code through your browser&#8217;s local storage. And every demo in this article has the same <strong>Fork &amp; Edit<\/strong> button in its top bar, so you can open any of them in My Code and start from there.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Accessibility built in<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">An accessible navbar is mostly about getting a handful of details right, and every export includes them:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A <code>&lt;nav aria-label=\"Main\"&gt;<\/code> landmark, so screen-reader users can jump straight to the navigation.<\/li>\n\n\n\n<li>A real <code>&lt;button&gt;<\/code> for the hamburger, with <code>aria-controls<\/code>, <code>aria-expanded<\/code> and a label that switches between &#8220;Open menu&#8221; and &#8220;Close menu&#8221;.<\/li>\n\n\n\n<li><code>aria-current=\"page\"<\/code> on the active link.<\/li>\n\n\n\n<li>Dropdown parents that are buttons with <code>aria-expanded<\/code>.<\/li>\n\n\n\n<li>Escape closes any open menu or dropdown.<\/li>\n\n\n\n<li>A visible <code>:focus-visible<\/code> outline in your accent color on every link and button, for keyboard users.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Tips for a better navbar<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Keep it short.<\/strong> Five or six top-level links is plenty; put the rest in dropdowns.<\/li>\n\n\n\n<li><strong>Use one CTA.<\/strong> A single filled button draws the eye; two compete with each other.<\/li>\n\n\n\n<li><strong>Set the breakpoint for your content.<\/strong> If your links start to crowd or wrap before 768px, raise the breakpoint until they don&#8217;t.<\/li>\n\n\n\n<li><strong>Mark the current page.<\/strong> It helps everyone find their place, and screen readers announce it.<\/li>\n\n\n\n<li><strong>Test on a real phone.<\/strong> Switch the preview to Mobile, then try the exported code on a device before you ship.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Frequently asked questions<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Is the Navbar Builder free?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Do I need Bootstrap, jQuery or any other library?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How do I add a dropdown menu to a link?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">In the Links tab, click &#8220;+ Dropdown item&#8221; under the link and fill in each item&#8217;s label and URL. The link becomes a dropdown that opens on hover or click on desktop and expands inline on mobile.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Can I change where the hamburger menu appears?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Yes. Move the Breakpoint slider in the Behavior tab anywhere from 480 to 1024px. Every export uses the same value.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">What happens when I click Fork &amp; Edit?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Will the navbar work with Next.js, Nuxt or an Angular app?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Try it yourself<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Open the <a href=\"https:\/\/webdevpuneet.com\/navbar-builder\/\">Navbar Builder<\/a>, 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 <a href=\"https:\/\/webdevpuneet.com\/ui-snippets\/navigation\/\">navigation snippets<\/a> in the UI Snippets library, or see <a href=\"https:\/\/webdevpuneet.com\/tools\/\">all the free tools<\/a> on webdevpuneet.com.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":113,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","advanced_seo_description":"Build a responsive navbar with dropdowns, a hamburger menu and sticky or hide-on-scroll effects. 9 live demos, 5 code exports and Fork & Edit explained.\n","jetpack_seo_html_title":"Responsive Navbar Builder Guide: Dropdowns & Mobile Menus","jetpack_seo_noindex":false,"jetpack_seo_schema_type":"","_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"Build a responsive navbar with dropdowns, a hamburger menu and sticky or hide-on-scroll effects. 9 live demos, 5 code exports and Fork & Edit explained.","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[11],"tags":[12,13],"class_list":["post-112","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tools","tag-navigation","tag-responsive","et-has-post-format-content","et_post_format-et-post-format-standard"],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/phrh5V-1O","jetpack_featured_media_url":"https:\/\/i0.wp.com\/webdevpuneet.com\/blog\/wp-content\/uploads\/2026\/10\/navbar-builder.png?fit=1200%2C630&ssl=1","_links":{"self":[{"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/posts\/112","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/comments?post=112"}],"version-history":[{"count":1,"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/posts\/112\/revisions"}],"predecessor-version":[{"id":114,"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/posts\/112\/revisions\/114"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/media\/113"}],"wp:attachment":[{"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/media?parent=112"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/categories?post=112"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/tags?post=112"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}