Components
Loading preview...
Displays a menu to the user — such as a set of actions or functions — triggered by a button.
npx shadcn@latest add https://21st.dev/r/jshguo/interfaces-dropdown-menu"use client"
import * as React from "react"
import {
DropdownMenu,
DropdownMenuCheckboxItem,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuSub,
DropdownMenuSubContent,
DropdownMenuSubTrigger,
DropdownMenuTrigger,
} from "@/components/ui/interfaces-dropdown-menu"
function DemoMenu({ side, align }: { side: "top" | "bottom"; align: "start" | "center" | "end" }) {
const [showBookmarks, setShowBookmarks] = React.useState(true)
const [showSidebar, setShowSidebar] = React.useState(false)
const [density, setDensity] = React.useState("comfortable")
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<button className="inline-flex h-9 items-center justify-center rounded-md border bg-background px-4 text-sm font-medium shadow-xs transition-colors hover:bg-accent hover:text-accent-foreground" type="button">
Open
</button>
</DropdownMenuTrigger>
<DropdownMenuContent side={side} align={align} className="w-64">
<DropdownMenuLabel>Workspace</DropdownMenuLabel>
<DropdownMenuGroup>
<DropdownMenuItem>
New file
<DropdownMenuShortcut>⌘N</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuItem>
Share
<DropdownMenuShortcut>⇧⌘S</DropdownMenuShortcut>
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuCheckboxItem checked={showBookmarks} onCheckedChange={(value) => setShowBookmarks(Boolean(value))}>
Show bookmarks bar
</DropdownMenuCheckboxItem>
<DropdownMenuCheckboxItem checked={showSidebar} onCheckedChange={(value) => setShowSidebar(Boolean(value))}>
Show sidebar
</DropdownMenuCheckboxItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuRadioGroup value={density} onValueChange={setDensity}>
<DropdownMenuRadioItem value="compact">Compact</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="comfortable">Comfortable</DropdownMenuRadioItem>
</DropdownMenuRadioGroup>
<DropdownMenuSeparator />
<DropdownMenuSub>
<DropdownMenuSubTrigger>More tools</DropdownMenuSubTrigger>
<DropdownMenuSubContent>
<DropdownMenuItem inset>Activity</DropdownMenuItem>
<DropdownMenuItem inset>Analytics</DropdownMenuItem>
<DropdownMenuItem inset variant="destructive">Delete project</DropdownMenuItem>
</DropdownMenuSubContent>
</DropdownMenuSub>
</DropdownMenuContent>
</DropdownMenu>
)
}
export default function TopCenterDropdownMenuDemo() {
return (
<div className="flex min-h-screen w-full items-center justify-center overflow-hidden bg-background p-8">
<DemoMenu side="top" align="center" />
</div>
)
}