Docs
Dropdown Menu
Dropdown Menu
Displays a menu to the user — such as a set of actions or functions — triggered by a button.
import type { DropdownMenuSubTriggerProps } from "@kobalte/core/dropdown-menu";
import { Button } from "@repo/tailwindcss/default/button";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuGroupLabel,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuSub,
DropdownMenuSubContent,
DropdownMenuSubTrigger,
DropdownMenuTrigger,
} from "@repo/tailwindcss/default/dropdown-menu";
const DropdownMenuDemo = () => {
return (
<DropdownMenu placement="bottom">
<DropdownMenuTrigger
as={(props: DropdownMenuSubTriggerProps) => (
<Button variant="outline" {...props}>
Open
</Button>
)}
/>
<DropdownMenuContent class="w-56">
<DropdownMenuGroup>
<DropdownMenuGroupLabel>My Account</DropdownMenuGroupLabel>
<DropdownMenuSeparator />
<DropdownMenuItem>
<i class="i-lucide:user mr-2" />
<span>Profile</span>
<DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuItem>
<i class="i-lucide:credit-card mr-2" />
<span>Billing</span>
<DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuItem>
<i class="i-lucide:settings mr-2" />
<span>Settings</span>
<DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuItem>
<i class="i-lucide:keyboard mr-2" />
<span>Keyboard shortcuts</span>
<DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem>
<i class="i-lucide:user mr-2" />
<span>Team</span>
</DropdownMenuItem>
<DropdownMenuSub>
<DropdownMenuSubTrigger>
<i class="i-lucide:user-plus mr-2" />
<span>Invite users</span>
</DropdownMenuSubTrigger>
<DropdownMenuSubContent>
<DropdownMenuItem>
<i class="i-lucide:mail mr-2" />
<span>Email</span>
</DropdownMenuItem>
<DropdownMenuItem>
<i class="i-lucide:message-square mr-2" />
<span>Message</span>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem>
<i class="ilucide:plus-circle mr-2" />
<span>More...</span>
</DropdownMenuItem>
</DropdownMenuSubContent>
</DropdownMenuSub>
<DropdownMenuItem>
<i class="i-lucide:plus mr-2" />
<span>New Team</span>
<DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuItem>
<i class="i-lucide:github mr-2" />
<span>GitHub</span>
</DropdownMenuItem>
<DropdownMenuItem>
<i class="i-lucide:life-buoy mr-2" />
<span>Support</span>
</DropdownMenuItem>
<DropdownMenuItem disabled>
<i class="i-lucide:cloud mr-2" />
<span>API</span>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem>
<i class="i-lucide:log-out mr-2" />
<span>Log out</span>
<DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);
};
export default DropdownMenuDemo;import type { DropdownMenuSubTriggerProps } from "@kobalte/core/dropdown-menu";
import { Button } from "@repo/tailwindcss/solid/button";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuGroupLabel,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuSub,
DropdownMenuSubContent,
DropdownMenuSubTrigger,
DropdownMenuTrigger,
} from "@repo/tailwindcss/solid/dropdown-menu";
const DropdownMenuDemo = () => {
return (
<DropdownMenu placement="bottom">
<DropdownMenuTrigger
as={(props: DropdownMenuSubTriggerProps) => (
<Button variant="outline" {...props}>
Open
</Button>
)}
/>
<DropdownMenuContent class="w-56">
<DropdownMenuGroup>
<DropdownMenuGroupLabel>My Account</DropdownMenuGroupLabel>
<DropdownMenuSeparator />
<DropdownMenuItem>
<i class="i-lucide:user mr-2" />
<span>Profile</span>
<DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuItem>
<i class="i-lucide:credit-card mr-2" />
<span>Billing</span>
<DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuItem>
<i class="i-lucide:settings mr-2" />
<span>Settings</span>
<DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuItem>
<i class="i-lucide:keyboard mr-2" />
<span>Keyboard shortcuts</span>
<DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem>
<i class="i-lucide:user mr-2" />
<span>Team</span>
</DropdownMenuItem>
<DropdownMenuSub>
<DropdownMenuSubTrigger>
<i class="i-lucide:user-plus mr-2" />
<span>Invite users</span>
</DropdownMenuSubTrigger>
<DropdownMenuSubContent>
<DropdownMenuItem>
<i class="i-lucide:mail mr-2" />
<span>Email</span>
</DropdownMenuItem>
<DropdownMenuItem>
<i class="i-lucide:message-square mr-2" />
<span>Message</span>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem>
<i class="ilucide:plus-circle mr-2" />
<span>More...</span>
</DropdownMenuItem>
</DropdownMenuSubContent>
</DropdownMenuSub>
<DropdownMenuItem>
<i class="i-lucide:plus mr-2" />
<span>New Team</span>
<DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuItem>
<i class="i-lucide:github mr-2" />
<span>GitHub</span>
</DropdownMenuItem>
<DropdownMenuItem>
<i class="i-lucide:life-buoy mr-2" />
<span>Support</span>
</DropdownMenuItem>
<DropdownMenuItem disabled>
<i class="i-lucide:cloud mr-2" />
<span>API</span>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem>
<i class="i-lucide:log-out mr-2" />
<span>Log out</span>
<DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);
};
export default DropdownMenuDemo;Installation
npx shadcn-solid@latest add dropdown-menuInstall the following dependencies:
npm install @kobalte/coreCopy and paste the following code into your project:
Install the following dependencies:
npm install @kobalte/coreCopy and paste the following code into your project:
Usage
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuItemLabel,
DropdownMenuSeparator,
DropdownMenuTrigger
} from "@/components/ui/dropdown-menu";<DropdownMenu>
<DropdownMenuTrigger>Open</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItemLabel>My Account</DropdownMenuItemLabel>
<DropdownMenuSeparator />
<DropdownMenuItem>Profile</DropdownMenuItem>
<DropdownMenuItem>Billing</DropdownMenuItem>
<DropdownMenuItem>Team</DropdownMenuItem>
<DropdownMenuItem>Subscription</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>Examples
Checkboxes
import type { DropdownMenuSubTriggerProps } from "@kobalte/core/dropdown-menu";
import { Button } from "@repo/tailwindcss/default/button";
import {
DropdownMenu,
DropdownMenuCheckboxItem,
DropdownMenuContent,
DropdownMenuTrigger,
} from "@repo/tailwindcss/default/dropdown-menu";
import { createSignal } from "solid-js";
const DropdownMenuCheckboxes = () => {
const [showStatusBar, setShowStatusBar] = createSignal<boolean>(true);
const [showActivityBar, setShowActivityBar] = createSignal<boolean>(false);
const [showPanel, setShowPanel] = createSignal<boolean>(false);
return (
<DropdownMenu placement="bottom">
<DropdownMenuTrigger
as={(props: DropdownMenuSubTriggerProps) => (
<Button variant="outline" {...props}>
Open
</Button>
)}
/>
<DropdownMenuContent class="w-56">
<DropdownMenuCheckboxItem
checked={showStatusBar()}
onChange={setShowStatusBar}
>
Status Bar
</DropdownMenuCheckboxItem>
<DropdownMenuCheckboxItem
checked={showActivityBar()}
onChange={setShowActivityBar}
disabled
>
Activity Bar
</DropdownMenuCheckboxItem>
<DropdownMenuCheckboxItem checked={showPanel()} onChange={setShowPanel}>
Panel
</DropdownMenuCheckboxItem>
</DropdownMenuContent>
</DropdownMenu>
);
};
export default DropdownMenuCheckboxes;import type { DropdownMenuSubTriggerProps } from "@kobalte/core/dropdown-menu";
import { Button } from "@repo/tailwindcss/solid/button";
import {
DropdownMenu,
DropdownMenuCheckboxItem,
DropdownMenuContent,
DropdownMenuTrigger,
} from "@repo/tailwindcss/solid/dropdown-menu";
import { createSignal } from "solid-js";
const DropdownMenuCheckboxes = () => {
const [showStatusBar, setShowStatusBar] = createSignal<boolean>(true);
const [showActivityBar, setShowActivityBar] = createSignal<boolean>(false);
const [showPanel, setShowPanel] = createSignal<boolean>(false);
return (
<DropdownMenu placement="bottom">
<DropdownMenuTrigger
as={(props: DropdownMenuSubTriggerProps) => (
<Button variant="outline" {...props}>
Open
</Button>
)}
/>
<DropdownMenuContent class="w-56">
<DropdownMenuCheckboxItem
checked={showStatusBar()}
onChange={setShowStatusBar}
>
Status Bar
</DropdownMenuCheckboxItem>
<DropdownMenuCheckboxItem
checked={showActivityBar()}
onChange={setShowActivityBar}
disabled
>
Activity Bar
</DropdownMenuCheckboxItem>
<DropdownMenuCheckboxItem checked={showPanel()} onChange={setShowPanel}>
Panel
</DropdownMenuCheckboxItem>
</DropdownMenuContent>
</DropdownMenu>
);
};
export default DropdownMenuCheckboxes;Radio Group
import type { DropdownMenuSubTriggerProps } from "@kobalte/core/dropdown-menu";
import { Button } from "@repo/tailwindcss/default/button";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuGroupLabel,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@repo/tailwindcss/default/dropdown-menu";
import { createSignal } from "solid-js";
const DropdownMenuRadioGroupDemo = () => {
const [position, setPosition] = createSignal("bottom");
return (
<DropdownMenu placement="bottom">
<DropdownMenuTrigger
as={(props: DropdownMenuSubTriggerProps) => (
<Button variant="outline" {...props}>
Open
</Button>
)}
/>
<DropdownMenuContent class="w-56">
<DropdownMenuGroup>
<DropdownMenuGroupLabel>Panel Position</DropdownMenuGroupLabel>
<DropdownMenuSeparator />
<DropdownMenuRadioGroup value={position()} onChange={setPosition}>
<DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="bottom">Bottom</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="right">Right</DropdownMenuRadioItem>
</DropdownMenuRadioGroup>
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>
);
};
export default DropdownMenuRadioGroupDemo;import type { DropdownMenuSubTriggerProps } from "@kobalte/core/dropdown-menu";
import { Button } from "@repo/tailwindcss/solid/button";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuGroupLabel,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@repo/tailwindcss/solid/dropdown-menu";
import { createSignal } from "solid-js";
const DropdownMenuRadioGroupDemo = () => {
const [position, setPosition] = createSignal("bottom");
return (
<DropdownMenu placement="bottom">
<DropdownMenuTrigger
as={(props: DropdownMenuSubTriggerProps) => (
<Button variant="outline" {...props}>
Open
</Button>
)}
/>
<DropdownMenuContent class="w-56">
<DropdownMenuGroup>
<DropdownMenuGroupLabel>Panel Position</DropdownMenuGroupLabel>
<DropdownMenuSeparator />
<DropdownMenuRadioGroup value={position()} onChange={setPosition}>
<DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="bottom">Bottom</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="right">Right</DropdownMenuRadioItem>
</DropdownMenuRadioGroup>
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>
);
};
export default DropdownMenuRadioGroupDemo;