Components
Compound components for any menu composition: a Trigger that passes required attributes to your component, an overlaying Content with menu items based on MenuItem, item Sections, and nested SubMenus with automatic focus trapping. Supports Popover positioning with viewport-aware fallbacks.
npx @21st-dev/cli add reshaped/reshaped-dropdown-menuLoading preview...
import { Button, Reshaped } from "reshaped/bundle";
import DropdownMenu from "@/components/ui/reshaped-dropdown-menu";
export default function Demo() {
return (
<Reshaped theme="slate">
<div style={{ margin: "0 auto", padding: 24, display: "flex", justifyContent: "center" }}>
<DropdownMenu position="top-end" onClose={() => console.log("Closed")}>
<DropdownMenu.Trigger>
{(attributes) => <Button attributes={attributes}>Open</Button>}
</DropdownMenu.Trigger>
<DropdownMenu.Content>
<DropdownMenu.Item>Action 1</DropdownMenu.Item>
<DropdownMenu.Item>Action 2</DropdownMenu.Item>
</DropdownMenu.Content>
</DropdownMenu>
</div>
</Reshaped>
);
}
Loading preview...
Loading preview...
Loading preview...