AI Navbar Generator.

Create a horizontal navbar with a logo mark plus wordmark on the left, five links — Product, Pricing, Docs, Customers, Blog — centered, and one filled Get started button on the right. Mark the current route with aria-current="page" plus a 2px underline sitting on the text baseline rather than the container edge. Below 768px, replace the link row with a hamburger button that toggles aria-expanded and opens a full-height drawer sliding in from the right. Trap focus inside the drawer, close it on Escape and on route change, lock body scroll while it is open, and return focus to the hamburger button when it closes.

Create a navbar where two of five top-level items open a full-width mega menu panel: three columns of grouped links, each label with a one-line description underneath, plus a highlighted card on the right. Open the panel on hover after a 120ms delay and on Enter or Space for keyboard users. Give each trigger aria-expanded and aria-controls, move between panel links with arrow keys, close on Escape and when focus leaves the panel, and let Tab move on to the next top-level item. Below 1024px, flatten every mega panel into a nested accordion inside the mobile drawer instead of a hover panel.

Create a navbar laid out as a three-column grid so the center block stays optically centered regardless of logo width or button label length: logo left, four links centered, and two actions right — a text Sign in link and a filled Start free button. Start fully transparent over the hero, then switch to a solid background with a 1px bottom border once the page scrolls past 80px, transitioning over 200ms, and swap the logo from its light variant to its dark variant at the same threshold. On mobile, collapse the links into a hamburger and keep only the Start free button visible next to it.

Create a navbar for a documentation site: logo on the left, then Docs, API and Changelog links, a version select showing v3.2 with older majors listed beneath, a search button showing a Command-K hint, a theme toggle and a GitHub star count. Bind Command-K and Control-K globally to open search, and make sure the shortcut is ignored while focus is inside an input or textarea. Below the tablet breakpoint, keep the search button and the sidebar toggle visible in the bar and move the links, version switcher and theme toggle into a drawer.

Create an e-commerce navbar: logo on the left, six category links with two opening a dropdown of subcategories, a search input that expands to fill the available row width on focus, and on the right an account link and a cart button with a count badge. Announce cart changes through an aria-live="polite" region so the count is not a silent visual update. Below 768px, keep the logo, a search icon and the cart in the bar, move categories into a left-hand drawer as a nested accordion, and expand search into a full-width overlay when its icon is tapped.

Create a minimal navbar for a design studio: a lowercase wordmark on the left and four links — Work, Studio, Journal, Contact — right-aligned in a light weight with generous letter spacing. Mark the current route with aria-current="page" and a subtle opacity change rather than an underline. Keep the bar static rather than sticky so it scrolls away with the page. Below 640px, keep all four links visible by dropping to a two-line layout with the wordmark above the links instead of introducing a hamburger, since four short labels do not justify a drawer.