@dinefy/react-dropdown

Dropdown (Menu) component for Dinefy Design System, built with Ark UI.

Installation

npm install @dinefy/react-dropdown

Usage

Basic Dropdown

import { Dropdown } from '@dinefy/react-dropdown';
import { Button } from '@dinefy/react-button';
import { ChevronDown } from 'lucide-react';

function App() {
  return (
    <Dropdown.Root>
      <Dropdown.Trigger asChild>
        <Button.Root>
          <Button.Value>Menu</Button.Value>
          <Button.Icon icon={ChevronDown} size={16} />
        </Button.Root>
      </Dropdown.Trigger>
      <Dropdown.Portal>
        <Dropdown.Positioner>
          <Dropdown.Content>
            <Dropdown.Item value="edit">
              <Dropdown.ItemText>Edit</Dropdown.ItemText>
            </Dropdown.Item>
            <Dropdown.Item value="duplicate">
              <Dropdown.ItemText>Duplicate</Dropdown.ItemText>
            </Dropdown.Item>
            <Dropdown.Item value="delete">
              <Dropdown.ItemText>Delete</Dropdown.ItemText>
            </Dropdown.Item>
          </Dropdown.Content>
        </Dropdown.Positioner>
      </Dropdown.Portal>
    </Dropdown.Root>
  );
}

With Icons and Separators

<Dropdown.Root>
  <Dropdown.Trigger asChild>
    <Button.Root>
      <Button.Icon icon={User} size={16} />
      <Button.Value>Account</Button.Value>
    </Button.Root>
  </Dropdown.Trigger>
  <Dropdown.Portal>
    <Dropdown.Positioner>
      <Dropdown.Content>
        <Dropdown.Item value="profile">
          <User size={16} />
          <Dropdown.ItemText>Profile</Dropdown.ItemText>
        </Dropdown.Item>
        <Dropdown.Item value="settings">
          <Settings size={16} />
          <Dropdown.ItemText>Settings</Dropdown.ItemText>
        </Dropdown.Item>
        <Dropdown.Separator />
        <Dropdown.Item value="logout">
          <LogOut size={16} />
          <Dropdown.ItemText>Logout</Dropdown.ItemText>
        </Dropdown.Item>
      </Dropdown.Content>
    </Dropdown.Positioner>
  </Dropdown.Portal>
</Dropdown.Root>

With Groups

<Dropdown.Root>
  <Dropdown.Trigger asChild>
    <Button.Root>
      <Button.Value>Options</Button.Value>
    </Button.Root>
  </Dropdown.Trigger>
  <Dropdown.Portal>
    <Dropdown.Positioner>
      <Dropdown.Content>
        <Dropdown.ItemGroup>
          <Dropdown.ItemGroupLabel>Account</Dropdown.ItemGroupLabel>
          <Dropdown.Item value="profile">
            <Dropdown.ItemText>Profile</Dropdown.ItemText>
          </Dropdown.Item>
          <Dropdown.Item value="settings">
            <Dropdown.ItemText>Settings</Dropdown.ItemText>
          </Dropdown.Item>
        </Dropdown.ItemGroup>
        <Dropdown.Separator />
        <Dropdown.ItemGroup>
          <Dropdown.ItemGroupLabel>Support</Dropdown.ItemGroupLabel>
          <Dropdown.Item value="help">
            <Dropdown.ItemText>Help Center</Dropdown.ItemText>
          </Dropdown.Item>
        </Dropdown.ItemGroup>
      </Dropdown.Content>
    </Dropdown.Positioner>
  </Dropdown.Portal>
</Dropdown.Root>

Props

Extends all HTML div element props.