Dropdown Menu 🍔

Hey Menu Maestro! 👨‍🍳

The dropdown-menu module is your recipe for creating fantastic, accessible dropdown menus (sometimes called "hamburger menus" or "context menus"). It builds upon @ryvora/react-menu and @ryvora/react-popper to give you a fully-featured dropdown experience.

It's like a bento box 🍱 for your actions and links – neat, organized, and delightful!

What's Cooking?

• ✅ Fully accessible (ARIA, keyboard navigation).
• 📐 Positioned smartly using Popper.
• 🧩 Composable: DropdownMenu.Trigger, DropdownMenu.Portal, DropdownMenu.Content, DropdownMenu.Item, DropdownMenu.CheckboxItem, DropdownMenu.RadioGroup, DropdownMenu.RadioItem, DropdownMenu.Label, DropdownMenu.Separator, DropdownMenu.Sub (for nested menus!).
• 💅 Styleable and customizable.

A Taste of Usage

import * as DropdownMenu from '@ryvora/react-dropdown-menu';

function MyAwesomeMenu() {
  return (
    <DropdownMenu.Root>
      <DropdownMenu.Trigger asChild>
        <button>Options</button>
      </DropdownMenu.Trigger>

      <DropdownMenu.Portal>
        <DropdownMenu.Content sideOffset={5}>
          <DropdownMenu.Label>My Menu</DropdownMenu.Label>
          <DropdownMenu.Item onSelect={() => console.log('Cut')}>Cut</DropdownMenu.Item>
          <DropdownMenu.Item onSelect={() => console.log('Copy')}>Copy</DropdownMenu.Item>
          <DropdownMenu.Item onSelect={() => console.log('Paste')} disabled>
            Paste (Disabled)
          </DropdownMenu.Item>
          <DropdownMenu.Arrow />
        </DropdownMenu.Content>
      </DropdownMenu.Portal>
    </DropdownMenu.Root>
  );
}

Bon appétit! 🍽️ Serve up some slick menus!