Dropdown

A compact menu that appears when triggered, offering a list of selectable options or actions.

Installation

npx shadcn@latest add https://display-ui.vercel.app/r/Dropdown

Usage

import { Dropdown } from "@/components/display-ui/Dropdown"

<DropdownMenu.Main>
  <DropdownMenu.Trigger>Profile</DropdownMenu.Trigger>
  <DropdownMenu.Content>
    <DropdownMenu.Item
      className="flex justify-start items-center gap-4"
      onClick={() => alert("View Profile")}
      icon={<House className="w-4 h-4" />}
    >
      <span>My Profile</span>
    </DropdownMenu.Item>
 
    <DropdownMenu.Item
      className="flex justify-start items-center gap-4"
      onClick={() => alert("View Profile")}
      icon={<Receipt className="w-4 h-4" />}
    >
      <span>Billings</span>
    </DropdownMenu.Item>
 
    <DropdownMenu.Item
      className="flex justify-start items-center gap-4"
      onClick={() => alert("View Profile")}
      icon={<Settings className="w-4 h-4" />}
    >
      <span>Settings</span>
    </DropdownMenu.Item>
 
    <DropdownMenu.Item
      className="flex justify-start items-center gap-4"
      onClick={() => alert("Settings")}
      icon={<LogIn className="w-4 h-4" />}
    >
      <span>Login</span>
    </DropdownMenu.Item>
 
    <DropdownMenu.Item
      className="flex justify-start items-center gap-4"
      onClick={() => alert("Logout")}
      icon={<LogOut className="w-4 h-4" />}
    >
      <span>Logout</span>
    </DropdownMenu.Item>
 
    <DropdownMenu.Item
      className="flex justify-start items-center gap-4"
      onClick={() => alert("Logout")}
      icon={<Truck className="w-4 h-4" />}
    >
      <span>Support</span>
    </DropdownMenu.Item>
  </DropdownMenu.Content>
</DropdownMenu.Main>

API

For DropdownMenu Main

Attribute	Type	Description	Default
children	`ReactNode \| ReactNode[]`	Root container for the dropdown menu. Must wrap Trigger and Content components.	-
defaultOpen	`boolean`	Controls whether the dropdown is open by default on initial render.	false
className	`string`	Additional CSS classes to customize the dropdown container styling.	-

For DropdownMenu Trigger

Attribute	Type	Description	Default
children	`ReactNode`	Content displayed inside the trigger button that toggles the dropdown.	-
className	`string`	Additional CSS classes to customize the trigger button styling.	-

For DropdownMenu Content

Attribute	Type	Description	Default
children	`ReactNode \| ReactNode[]`	Container for dropdown menu items. Rendered only when the dropdown is open.	-
className	`string`	Additional CSS classes to customize the dropdown content styling.	-

For DropdownMenu Item

Attribute	Type	Description	Default
children	`ReactNode`	Label or content displayed inside the dropdown item.	-
icon	`ReactNode`	Optional icon displayed before the item label.	-
onClick	`(event: React.MouseEvent<HTMLButtonElement>) => void`	Callback fired when the item is clicked. The dropdown closes automatically after execution.	-
className	`string`	Additional CSS classes to customize the dropdown item styling.	-

Credits

This component is inspired by Rehman Kalawant Design Shared On Github.

Installation

Usage

API

Dropdown Props

Credits

On this page