react ~8 KB 0 deps v0.1.0 ↗ GitHub ↗

@mshafiqyajid/react-dropdown-menu

Headless dropdown menu hook and styled component. Items with icons and dividers, four placements, full keyboard navigation, portal positioning, ARIA-compliant.

Playground #

Props
TSX
import { DropdownMenuStyled } from "@mshafiqyajid/react-dropdown-menu/styled";
import "@mshafiqyajid/react-dropdown-menu/styles.css";

<DropdownMenuStyled
  items={items}
/>

Install # 

npm install @mshafiqyajid/react-dropdown-menu

Quick start # 

import { DropdownMenuStyled } from "@mshafiqyajid/react-dropdown-menu/styled";
import "@mshafiqyajid/react-dropdown-menu/styles.css";

<DropdownMenuStyled
  trigger={<button>Actions ▾</button>}
  items={[
    { label: "Edit",    onClick: () => handleEdit() },
    { label: "Copy",    onClick: () => handleCopy() },
    { label: "", divider: true },
    { label: "Delete",  onClick: () => handleDelete() },
  ]}
/>

API #

PropTypeDefaultDescription
triggerReactNode—The trigger element
itemsDropdownMenuItem[]—Array of { label, onClick?, icon?, disabled?, divider? }
placement"bottom-start" | "bottom-end" | "top-start" | "top-end""bottom-start"Menu position
size"sm" | "md" | "lg""md"Item size
Edit this page on GitHub