Docs
Dropdown Menu

Dropdown Menu

Dropdown Menu component displays a menu to the user, presenting a set of actions or functions triggered by a button. It provides a space-efficient and visually appealing way to organize and present options, enhancing the user experience by offering a context-specific menu. The Dropdown Menu component is commonly used for navigation, settings, or any scenario where a list of actions needs to be easily accessible without cluttering the main interface.

Radix UINPM

Installation

yarn add @camped-ui/dropdown-menu

Usage

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@camped-ui/dropdown-menu";
<DropdownMenu>
  <DropdownMenuTrigger>Open</DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>My Account</DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Profile</DropdownMenuItem>
    <DropdownMenuItem>Billing</DropdownMenuItem>
    <DropdownMenuItem>Team</DropdownMenuItem>
    <DropdownMenuItem>Subscription</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Examples

Checkboxes

Radio Group

DrawerFile Upload