Dropdown Menu

lunar add dropdown-menu

import {
DropdownMenu,
DropdownMenuTrigger,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuGroup,
DropdownMenuSub,
DropdownMenuSubContent,
} from '@/components/ui/dropdown-menu';
import { Button } from '@/components/ui/button';

<DropdownMenu>
<DropdownMenuTrigger asChild>
  <Button>Open Menu</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
  <DropdownMenuLabel>My Account</DropdownMenuLabel>
  <DropdownMenuSeparator />
  <DropdownMenuItem onPress={() => {}}>Profile</DropdownMenuItem>
  <DropdownMenuItem onPress={() => {}}>Billing</DropdownMenuItem>
  <DropdownMenuItem onPress={() => {}}>Team</DropdownMenuItem>
  <DropdownMenuItem onPress={() => {}}>Subscription</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>

import { User, CreditCard, Settings, LogOut } from 'lucide-react-native';
 
<DropdownMenu>
<DropdownMenuTrigger asChild>
  <Button variant="outline">User Options</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-56">
  <DropdownMenuLabel>My Account</DropdownMenuLabel>
  <DropdownMenuSeparator />
  <DropdownMenuGroup>
    <DropdownMenuItem leftIcon={<User size={16} />}>
      Profile
    </DropdownMenuItem>
    <DropdownMenuItem leftIcon={<CreditCard size={16} />}>
      Billing
    </DropdownMenuItem>
    <DropdownMenuItem leftIcon={<Settings size={16} />}>
      Settings
    </DropdownMenuItem>
  </DropdownMenuGroup>
  <DropdownMenuSeparator />
  <DropdownMenuItem leftIcon={<LogOut size={16} />} destructive>
    Log out
  </DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>

<DropdownMenu>
<DropdownMenuTrigger asChild>
  <Button variant="outline">Options</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
  <DropdownMenuItem>Profile</DropdownMenuItem>
  <DropdownMenuSub trigger="More Options">
    <DropdownMenuSubContent>
      <DropdownMenuItem>Rename</DropdownMenuItem>
      <DropdownMenuItem>Duplicate</DropdownMenuItem>
    </DropdownMenuSubContent>
  </DropdownMenuSub>
</DropdownMenuContent>
</DropdownMenu>