@manhphi1309/menu

A highly versatile Dropdown Menu component that natively bridges desktop Radix UI interactions with native iOS/Android <select> menus for mobile users.

Subcomponents

• Menu
• MenuTrigger
• MenuContent
• MenuPortal
• MenuGroup
• MenuItem
• MenuCheckboxItem
• MenuRadioGroup
• MenuRadioItem
• MenuLabel
• MenuSeparator
• MenuSub
• MenuSubTrigger
• MenuSubContent
• MenuShortcut

Dependencies

• @manhphi1309/hooks
• @manhphi1309/utils
• lucide-react
• radix-ui

Installation

npm install @manhphi1309/menu

Usage

Basic Example

import {
  Menu,
  MenuContent,
  MenuItem,
  MenuLabel,
  MenuSeparator,
  MenuTrigger,
} from "@manhphi1309/menu"

export default function App() {
  return (
    <Menu>
      <MenuTrigger className="px-4 py-2 border rounded-md">
        Open Menu
      </MenuTrigger>
      <MenuContent>
        <MenuLabel>My Account</MenuLabel>
        <MenuSeparator />
        <MenuItem>Profile</MenuItem>
        <MenuItem>Billing</MenuItem>
        <MenuItem>Team</MenuItem>
        <MenuItem>Subscription</MenuItem>
      </MenuContent>
    </Menu>
  )
}

Advanced Example (Sub-menus, Portals, and Shortcuts)

import { ChevronRight, File, Folder } from "lucide-react"

import {
  Menu,
  MenuContent,
  MenuItem,
  MenuLabel,
  MenuPortal,
  MenuSeparator,
  MenuShortcut,
  MenuSub,
  MenuSubContent,
  MenuSubTrigger,
  MenuTrigger,
} from "@manhphi1309/menu"

export default function AdvancedMenu() {
  return (
    <Menu>
      <MenuTrigger className="px-4 py-2 border rounded-md">Options</MenuTrigger>
      <MenuContent className="w-56">
        <MenuLabel>Actions</MenuLabel>
        <MenuSeparator />

        <MenuItem>
          <File className="mr-2 h-4 w-4" />
          <span>New File</span>
          <MenuShortcut>⌘N</MenuShortcut>
        </MenuItem>

        <MenuSub>
          <MenuSubTrigger>
            <Folder className="mr-2 h-4 w-4" />
            <span>Open Recent</span>
          </MenuSubTrigger>
          <MenuPortal>
            <MenuSubContent>
              <MenuItem>Project Alpha</MenuItem>
              <MenuItem>Project Beta</MenuItem>
              <MenuSeparator />
              <MenuItem>Clear Recent</MenuItem>
            </MenuSubContent>
          </MenuPortal>
        </MenuSub>

        <MenuSeparator />

        <MenuItem variant="destructive">
          <Trash className="mr-2 h-4 w-4" />
          <span>Delete Workspace</span>
          <MenuShortcut>⌘⌫</MenuShortcut>
        </MenuItem>
      </MenuContent>
    </Menu>
  )
}