Foundations
Icons
Actions
Buttons
Form Controls
Input
Text Area
Select Dropdown
Filter Dropdown
Checkbox
Radio Button
Switch
File Uploader
Color Picker
Multi Select
Search Input
Slider
OTP Input
Date Picker
Time Picker
Date Range Picker
Data Display
Table
Pagination
Progress Bar
Stat Card
Circular Progress
Navigation
Side Menu
Menu Bar
Tabs
Breadcrumb
Ellipsis
Content & Layout
Card
Divider
Banner
Carousel
Accordion
Timeline
Stepper
List
Overlays
Modal
Drawer
Popover
Command Palette
Dropdown Menu
Context Menu
Indicators
Tags
Chips
Badge
Avatar
Avatar Group
Tooltip
Skeleton
Spinner
Feedback
Snackbar
Alert
Callout
State
Dropdown Menu
ReactNodeElement that opens the menu.
—IDropdownMenuItem[]Entries as { label, icon?, onClick?, disabled?, destructive? }, or { isDivider: true } for a separator.
—DROPDOWN_PLACEMENTCorner of the trigger the menu lines up with.
DROPDOWN_PLACEMENT.BOTTOM_LEFTstringExtra classes on the wrapper.
""import {
DropdownMenu,
Button,
ChevDownSVG,
EditSVG,
CopySVG,
LinkSVG,
CrossSVG,
} from "gwan-design-system";
const items = [
{ label: "Edit", icon: <EditSVG />, onClick: () => {} },
{ label: "Duplicate", icon: <CopySVG />, onClick: () => {} },
{
label: "Copy link",
icon: <LinkSVG />,
onClick: () => {},
disabled: true,
},
{ isDivider: true },
{
label: "Delete",
icon: <CrossSVG />,
onClick: () => {},
destructive: true,
},
];
<DropdownMenu
trigger={<Button label="Actions" rightIcon={<ChevDownSVG />} variant="secondary" onClick={() => {}} />}
items={items}
/>