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/shadcn/dropdown-menuimport { Button } from "@/components/ui/button";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
Dots,
Download,
Folder,
FolderPlus,
Move,
Share,
Trash,
} from "@mynaui/icons-react";
function FolderDropdown() {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" className="w-56 justify-between">
<span className="flex items-center gap-2">
<Folder className="size-5" />
Folder Name
</span>
<Dots className="-mr-2 ml-2 size-7" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-56">
<DropdownMenuItem>
<FolderPlus className="mr-2 size-4" />
New Folder
<DropdownMenuShortcut>N</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuItem>
<Share className="mr-2 size-4" />
<span>Share</span>
<DropdownMenuShortcut>S</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuItem>
<Move className="mr-2 size-4" />
<span>Move Folder</span>
<DropdownMenuShortcut>M</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuItem>
<Download className="mr-2 size-4" />
<span>Download</span>
<DropdownMenuShortcut>D</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem>
<Trash className="mr-2 size-4" />
<span>Remove</span>
<DropdownMenuShortcut>R</DropdownMenuShortcut>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);
}
export { FolderDropdown }