Dropdown Menu

A menu component that displays a list of actions or options when triggered.

Installation

npm install fuyukaki-ui

Usage

import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
} from 'fuyukaki-ui'

function App() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger>Open Menu</DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuItem>Profile</DropdownMenuItem>
        <DropdownMenuItem>Settings</DropdownMenuItem>
        <DropdownMenuItem>Logout</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

Basic Example

With Icons and Shortcuts

Props

Component	Prop	Type
DropdownMenu	open	boolean
DropdownMenu	onOpenChange	(open: boolean) => void
DropdownMenuContent	align	'start' \| 'center' \| 'end'
DropdownMenuContent	side	'top' \| 'bottom' \| 'left' \| 'right'
DropdownMenuItem	variant	'default' \| 'danger'
DropdownMenuItem	icon	ReactNode
DropdownMenuItem	shortcut	string