Dropdown Menu · juxt.ui

Installation #

With the Nuxt module, every component is auto-imported — there is nothing to add. In a plain Vue project, import what you use:

import { JDropdownMenu, JDropdownMenuItem, JDropdownMenuSeparator, JDropdownMenuLabel, JDropdownMenuSub } from '@juxtui/ui'

Usage #

<JDropdownMenu>
  <template #trigger>
    <JButton variant="outline">Options</JButton>
  </template>
  <JDropdownMenuItem shortcut="⌘E" @select="edit">Edit</JDropdownMenuItem>
  <JDropdownMenuItem @select="duplicate">Duplicate</JDropdownMenuItem>
  <JDropdownMenuSeparator />
  <JDropdownMenuItem destructive @select="remove">Delete</JDropdownMenuItem>
</JDropdownMenu>

The trigger slot takes your own element — attributes and listeners are merged onto it, no wrapper element is added.

Items close the menu when selected. Call event.preventDefault() in @select to keep it open.

Variants & examples #

Submenus#

Hover with a short intent delay, or use → and ←.

<script setup lang="ts">
import { Ellipsis, Link, Mail, MessageSquare, Share2, UserPlus } from '@lucide/vue'
</script>

<template>
  <JDropdownMenu>
    <template #trigger>
      <JButton variant="outline" icon aria-label="More actions"><Ellipsis /></JButton>
    </template>
    <JDropdownMenuLabel>Project</JDropdownMenuLabel>
    <JDropdownMenuItem @select="toast('Invite sent')">
      <template #leading><UserPlus /></template>
      Invite people
    </JDropdownMenuItem>
    <JDropdownMenuSub label="Share">
      <template #leading><Share2 /></template>
      <JDropdownMenuItem @select="toast.success('Link copied')">
        <template #leading><Link /></template>
        Copy link
      </JDropdownMenuItem>
      <JDropdownMenuItem @select="toast('Opening mail')">
        <template #leading><Mail /></template>
        Email
      </JDropdownMenuItem>
      <JDropdownMenuItem @select="toast('Posted')">
        <template #leading><MessageSquare /></template>
        Post to channel
      </JDropdownMenuItem>
    </JDropdownMenuSub>
    <JDropdownMenuSeparator />
    <JDropdownMenuItem @select="toast('Settings')">Settings</JDropdownMenuItem>
  </JDropdownMenu>
</template>

Render items as links with as.

<script setup lang="ts">
import { NuxtLink } from '#components'
import { BookOpen, LayoutGrid, LifeBuoy } from '@lucide/vue'
</script>

<template>
  <JDropdownMenu placement="bottom-end">
    <template #trigger>
      <JButton variant="ghost">Resources</JButton>
    </template>
    <JDropdownMenuItem :as="NuxtLink" to="/docs/getting-started">
      <template #leading><BookOpen /></template>
      Documentation
    </JDropdownMenuItem>
    <JDropdownMenuItem :as="NuxtLink" to="/components/command-palette">
      <template #leading><LayoutGrid /></template>
      Command palette
    </JDropdownMenuItem>
    <JDropdownMenuItem :as="NuxtLink" to="/docs/accessibility">
      <template #leading><LifeBuoy /></template>
      Accessibility
    </JDropdownMenuItem>
  </JDropdownMenu>
</template>

API #

JDropdownMenu

Prop	Type	Default	Description
open	`boolean`	`false`	Optionally bound with `v-model:open`.
placement	`Placement`	`'bottom-start'`	Preferred side and alignment. Flips when there isn’t room.
offset	`number`	`6`	Distance from the trigger in px.
disabled	`boolean`	`false`	Prevent opening.

Slots

Slot	Props	Description
trigger	`{ open }`	The element that opens the menu.
default	—	Items, labels, separators and submenus.

JDropdownMenuItem

Prop	Type	Default	Description
disabled	`boolean`	`false`	Skipped by keyboard navigation and not selectable.
destructive	`boolean`	`false`	Styles a dangerous action.
shortcut	`string`	—	Shortcut hint shown on the right. Display only.
as	`string \| Component`	`'div'`	Render as a link or router link.
checked	`boolean`	—	Turns the item into one choice of a set (`menuitemradio`). `true` shows a check at the end of the row.

Events

Event	Payload	Description
select	`Event`	The item was chosen. Cancelable.

Slots

Slot	Props	Description
default	—	Label.
leading	—	Icon.

JDropdownMenuSub

Prop	Type	Default	Description
label	`string`	—	Label of the item that opens the submenu.
disabled	`boolean`	`false`	Prevent opening.

Slots

Slot	Props	Description
default	—	Items of the submenu.
leading	—	Icon.

JDropdownMenuLabel · JDropdownMenuSeparator

Slots

Slot	Props	Description
default	—	Label text (label only).

Accessibility #

Follows the WAI-ARIA menu button pattern: the trigger gets aria-haspopup, aria-expanded and aria-controls.
Hovering moves real focus to the item, so the pointer and the keyboard always agree on a single highlighted item.
Submenu triggers expose aria-haspopup="menu" and aria-expanded.
When the menu closes after a selection or Escape, focus returns to the trigger.

Keyboard #

Key	Action
`Enter`	On the trigger: open and focus the first item. On an item: select it.
`Space`	Same as Enter.
`↓↑`	Move between items, wrapping around. On the trigger, opens on the first or last item.
`HomeEnd`	First or last item.
`→`	Open a submenu and focus its first item.
`←`	Close a submenu and return to its parent item.
`A–Z`	Typeahead to the next matching item.
`Esc`	Close the current menu and return focus.
`Tab`	Close the menu.

Installation #

Usage #

Variants & examples #

Submenus#

Navigation items#

API #

JDropdownMenu

JDropdownMenuItem

JDropdownMenuSub

JDropdownMenuLabel · JDropdownMenuSeparator

Accessibility #

Keyboard #