$9Component · Navigation
Command Palette
A ⌘K / Ctrl+K command palette for Vue 3 with fuzzy search, grouped results, recent items and full keyboard navigation. Tailwind CSS, dark mode.
by Vueplay
Vue navigation components (sidebars, menus, pagination, command palettes)
Beyond the top navbar, apps need ways to move around: sidebars, dropdown menus, breadcrumbs, pagination and command palettes. These Vue 3 components cover those patterns with keyboard support and Tailwind CSS 4 styling.
Items are passed as typed props so they work with Vue Router, Nuxt or plain links. Each component supports class-based dark mode, has no dependencies besides vue and can be remixed in the Vueplay Studio.
$9
FreeComponent · Navigation
Dropdown Menu
Accessible Vue 3 dropdown menu button with icons, separators, headings, disabled items, arrow-key navigation and click-outside close. Tailwind CSS.
by Vueplay
FreeComponent · Navigation
Pagination Bar
Vue 3 pagination bar with v-model:page, smart ellipsis, prev/next, a page-size picker, compact mobile view and a “Showing X–Y of Z” summary. Tailwind CSS.
by Vueplay
FreeComponent · Navigation
Sidebar Nav
Vue 3 app sidebar with sections, icons, badges, collapsible groups, an icon-only collapsed mode and a mobile off-canvas drawer. Tailwind CSS.
by Vueplay
FreeComponent · Navigation
Link
A flexible link component that can act as a router-link for internal navigation or an href for external URLs. Can be used on its own or inside a Navigator.
FreeComponent · Navigation
Toolbox
A versatile toolbox component that supports up to eight fixed positions on the screen: top-left, top-center, top-right, middle-left, middle-right, and bottom zones. Each toolbox can be freely moved using drag-and-drop with mouse or touch gestures, while preventing overlap with existing toolboxes. Inside each toolbox, items can be reordered or moved between toolboxes, with positions and order saved for persistence. Perfect for customizable dashboards, design tools, or any interface requiring dynamic tool organization.
Good to know
Building navigation that hold up
- Use the right pattern for menus
- Site navigation links in a dropdown are a disclosure: a button with aria-expanded and a list of links. Reserve role="menu" for application-style action menus with arrow-key navigation.
- Mark the current location
- Set aria-current="page" on the active sidebar or breadcrumb link and style it with the aria-[current=page]: variant in Tailwind, so styling and semantics come from one attribute.
- Make command palettes fully keyboard driven
- Open on Cmd/Ctrl+K, keep focus in the search input, move the highlight with arrow keys and use aria-activedescendant to tell screen readers which result is active.
- Make pagination links, not just buttons
- When pages have their own URLs, render pagination as links with ?page=n. Users can share and bookmark them, and crawlers can follow them.
FAQ
Questions
Do these navigation components work with Vue Router?
Yes. Items are plain data, and links can be rendered with RouterLink or NuxtLink. Active state can come from the current route.
Can the sidebar collapse on mobile?
Yes. The sidebars collapse into an off-canvas drawer on small screens, with the open state bound through v-model.