indevuiDropdownMenu

Component 4

About

Here is modern component of indevuiDropDown menu

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds indevuiDropdownMenu to your project and fits it to your theme.

Code

How indevuiDropdownMenu is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

// demo.tsx
'use client';

import * as React from 'react';
import {
   Cloud,
   CreditCard,
   Github,
   Keyboard,
   LifeBuoy,
   LogOut,
   Mail,
   MessageSquare,
   Plus,
   PlusCircle,
   Settings,
   User,
   UserPlus,
   Users,
} from 'lucide-react';

import DropdownMenu, {
   DropdownMenuContent,
   DropdownMenuGroup,
   DropdownMenuItem,
   DropdownMenuLabel,
   DropdownMenuPortal,
   DropdownMenuRadioGroup,
   DropdownMenuRadioItem,
   DropdownMenuSeparator,
   DropdownMenuShortcut,
   DropdownMenuSub,
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
   DropdownMenuCheckboxItem,
} from '@/components/ui/indevui-dropdown-menu';

function DropdownMenuDemo() {
   const [showStatusBar, setShowStatusBar] = React.useState(true);
   const [showActivityBar, setShowActivityBar] = React.useState(false);
   const [position, setPosition] = React.useState('bottom');

   return (
      <DropdownMenu>
         <DropdownMenuTrigger asChild>
            <button className="inline-flex h-10 items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50">
               Open Menu
            </button>
         </DropdownMenuTrigger>
         <DropdownMenuContent className="w-56">
            <DropdownMenuLabel>My Account</DropdownMenuLabel>
            <DropdownMenuSeparator />
            <DropdownMenuGroup>
               <DropdownMenuItem>
                  <User className="mr-2" />
                  <span>Profile</span>
                  <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
               </DropdownMenuItem>
               <DropdownMenuItem>
                  <CreditCard className="mr-2" />
                  <span>Billing</span>
                  <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
               </DropdownMenuItem>
               <DropdownMenuItem>
                  <Settings className="mr-2" />
                  <span>Settings</span>
                  <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
               </DropdownMenuItem>
               <DropdownMenuItem>
                  <Keyboard className="mr-2" />
                  <span>Keyboard shortcuts</span>
                  <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
               </DropdownMenuItem>
            </DropdownMenuGroup>
            <DropdownMenuSeparator />
            <DropdownMenuGroup>
               <DropdownMenuItem>
                  <Users className="mr-2" />
                  <span>Team</span>
               </DropdownMenuItem>
               <DropdownMenuSub>
                  <DropdownMenuSubTrigger>
                     <UserPlus className="mr-2" />
                     <span>Invite users</span>
                  </DropdownMenuSubTrigger>
                  <DropdownMenuPortal>
                     <DropdownMenuSubContent>
                        <DropdownMenuItem>
                           <Mail className="mr-2" />
                           <span>Email</span>
                        </DropdownMenuItem>
                        <DropdownMenuItem>
                           <MessageSquare className="mr-2" />
                           <span>Message</span>
                        </DropdownMenuItem>
                        <DropdownMenuSeparator />
                        <DropdownMenuItem>
                           <PlusCircle className="mr-2" />
                           <span>More...</span>
                        </DropdownMenuItem>
                     </DropdownMenuSubContent>
                  </DropdownMenuPortal>
               </DropdownMenuSub>
               <DropdownMenuItem>
                  <Plus className="mr-2" />
                  <span>New Team</span>
                  <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
               </DropdownMenuItem>
            </DropdownMenuGroup>
            <DropdownMenuSeparator />
            <DropdownMenuCheckboxItem checked={showStatusBar} onCheckedChange={setShowStatusBar}>
               Status Bar
            </DropdownMenuCheckboxItem>
            <DropdownMenuCheckboxItem
               checked={showActivityBar}
               onCheckedChange={setShowActivityBar}
               disabled
            >
               Activity Bar
            </DropdownMenuCheckboxItem>
            <DropdownMenuSeparator />
            <DropdownMenuRadioGroup value={position} onValueChange={setPosition}>
               <DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
               <DropdownMenuRadioItem value="bottom">Bottom</DropdownMenuRadioItem>
               <DropdownMenuRadioItem value="right">Right</DropdownMenuRadioItem>
            </DropdownMenuRadioGroup>
            <DropdownMenuSeparator />
            <DropdownMenuItem>
               <Github className="mr-2" />
               <span>GitHub</span>
            </DropdownMenuItem>
            <DropdownMenuItem>
               <LifeBuoy className="mr-2" />
               <span>Support</span>
            </DropdownMenuItem>
            <DropdownMenuItem disabled>
               <Cloud className="mr-2" />
               <span>API</span>
            </DropdownMenuItem>
            <DropdownMenuSeparator />
            <DropdownMenuItem variant="destructive">
               <LogOut className="mr-2" />
               <span>Log out</span>
               <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
            </DropdownMenuItem>
         </DropdownMenuContent>
      </DropdownMenu>
   );
}

export { DropdownMenuDemo as DemoOne };