FreeComponent · Navbars
Mega Menu Navbar
Vue 3 navbar with Products and Resources mega-menu panels, keyboard navigation and a mobile accordion. Built with Tailwind CSS, dark mode ready.
by Vueplay
Vue navbar components
A navbar sits on every page, so small problems like a menu that traps focus or a header that jumps on scroll are felt everywhere. These Vue 3 navbar components include responsive mobile menus, dropdowns and sticky headers, styled with Tailwind CSS 4.
Links are passed as typed props, so the same component works with RouterLink, NuxtLink or plain anchors. Each one supports class-based dark mode and has no dependencies besides vue.
Free
FreeComponent · Navbars
Responsive Navbar
Responsive Vue 3 navbar with logo, links, a CTA and an accessible hamburger menu that closes on Escape. Tailwind CSS, dark mode, typed props.
by Vueplay
FreeComponent · Navbars
Navigator
A menu container that controls the styling and behavior of all nested links. Links can be nested infinitely to create multi-level menus.
Good to know
Building navbars that hold up
- Wrap links in a nav landmark
- Use a <nav> element with an aria-label and mark the active link with aria-current="page". Screen reader users rely on landmarks to jump straight to navigation.
- Get the mobile toggle right
- The menu button needs aria-expanded and aria-controls, and the menu should close on Escape and on route change. Watching the route in the component is an easy way to handle the latter.
- Account for sticky headers
- A sticky or fixed header covers anchor targets. Add scroll-padding-top to the html element (scroll-pt-16 in Tailwind) so in-page links land below it.
- Keep the link list short
- Five to seven top-level items is plenty. Move the rest into a dropdown or the footer rather than letting the bar wrap onto two lines at medium widths.
FAQ
Questions
Do these navbars work with Vue Router?
Yes. Links are regular props, and you can render them with RouterLink or NuxtLink by swapping the link element in the component source.
Do the navbars support dark mode?
Yes. Every component uses Tailwind CSS 4 dark: variants with class-based dark mode, so it follows a dark class on a parent element.