Responsive Menu

AppResponsiveMenu

A responsive menu component that shows a dropdown on desktop and a bottom drawer on mobile. Uses Tailwind breakpoints to detect viewport size.

Preview

Desktop: Click shows dropdown menu. Mobile: Click opens bottom drawer.

Props

items

MenuItem[][] | MenuItem[] required

Menu items array. Can be flat or grouped (nested arrays create separators).

title

string

Title displayed in the mobile drawer header.

MenuItem Interface

label

string required

Display text for the menu item.

icon

string

Icon name (e.g., 'i-lucide-user').

click

() => void

Click handler function.

Examples

Basic Usage

<AppResponsiveMenu
  :items="menuItems"
  title="Actions"
>
  <UButton>Open Menu</UButton>
</AppResponsiveMenu>

Items Structure

const menuItems = [
  [
    { label: 'Edit', icon: 'i-lucide-pencil', click: () => edit() },
    { label: 'Duplicate', icon: 'i-lucide-copy' },
  ],
  [
    { label: 'Delete', icon: 'i-lucide-trash' },
  ],
]