{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "dropdown-menu",
"type": "registry:ui",
"title": "Dropdown Menu",
"description": "Click-triggered action menu with items, submenus, checkboxes, radio groups, and shortcuts.",
"dependencies": [
"@radix-ui/react-dropdown-menu",
"@saasflare/ui",
"motion"
],
"files": [
{
"path": "components/ui/dropdown-menu.tsx",
"type": "registry:ui",
"content": "// @toreview\n\"use client\"\n\n/**\n * @fileoverview DropdownMenu — premium animated dropdown menu with Motion spring transitions, sub-menus, checkbox/radio items, and keyboard navigation.\n * @module packages/ui/components/ui/dropdown-menu\n * @layer core\n *\n * @component\n * @example\n * import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '@saasflare/ui';\n *\n * \n * Open\n * \n * Profile\n * Settings\n * \n * \n */\n\nimport * as React from \"react\"\nimport { m } from \"motion/react\"\nimport { CheckIcon, CaretRightIcon, CircleIcon } from \"@saasflare/ui\"\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\"\nimport { cn } from \"@saasflare/ui\"\nimport { useSaasflareProps, type SaasflareComponentProps } from \"@saasflare/ui\"\nimport { useSaasflareMotion, springBouncy } from \"@saasflare/ui\"\n\n/**\n * Dropdown menu root. Manages open state and wires {@link DropdownMenuTrigger}\n * and {@link DropdownMenuContent} together, with spring-animated content,\n * nested sub-menus, checkbox/radio items, and full keyboard navigation.\n *\n * @component\n * @layer core\n */\nfunction DropdownMenu({ ...props }: React.ComponentProps) {\n return \n}\n/**\n * Portals menu content into the document body. Rarely needed directly —\n * {@link DropdownMenuContent} renders its own portal.\n *\n * @component\n * @layer core\n */\nfunction DropdownMenuPortal({ ...props }: React.ComponentProps) {\n return \n}\n/**\n * Button that toggles the dropdown menu open and closed.\n *\n * @component\n * @layer core\n */\nfunction DropdownMenuTrigger({ className, ...props }: React.ComponentProps) {\n return \n}\n/**\n * Groups related menu items for semantics and accessible structure.\n *\n * @component\n * @layer core\n */\nfunction DropdownMenuGroup({ ...props }: React.ComponentProps) {\n return \n}\n/**\n * Root for a nested sub-menu. Wraps {@link DropdownMenuSubTrigger} and\n * {@link DropdownMenuSubContent}.\n *\n * @component\n * @layer core\n */\nfunction DropdownMenuSub({ ...props }: React.ComponentProps) {\n return \n}\n/**\n * Single-select group for {@link DropdownMenuRadioItem} children, controlled\n * via `value` / `onValueChange`.\n *\n * @component\n * @layer core\n */\nfunction DropdownMenuRadioGroup({ ...props }: React.ComponentProps) {\n return \n}\n\n/**\n * Props for {@link DropdownMenuContent}.\n *\n * Extends the Radix Content props with {@link SaasflareComponentProps}, so\n * `surface`, `radius`, `animated`, and `iconWeight` can be supplied\n * per-instance or inherited from .\n */\ninterface DropdownMenuContentProps\n extends Omit, keyof SaasflareComponentProps>,\n SaasflareComponentProps {}\n\n/**\n * Floating menu panel with a spring scale/fade entrance. Portals itself —\n * no {@link DropdownMenuPortal} wrapper required.\n *\n * @component\n * @layer core\n */\nfunction DropdownMenuContent({\n className,\n sideOffset = 4,\n surface,\n radius,\n animated,\n iconWeight,\n ...props\n}: DropdownMenuContentProps) {\n const sf = useSaasflareProps({ surface, radius, animated, iconWeight })\n const motion = useSaasflareMotion(sf.animated, springBouncy)\n\n return (\n \n \n \n \n \n )\n}\n\ninterface DropdownMenuItemExtraProps {\n /** Indent the item to align with sibling items that have a leading icon or indicator. */\n inset?: boolean\n /** Visual intent of the item. `\"destructive\"` tints the label and focus state with the destructive token. */\n variant?: \"default\" | \"destructive\"\n}\n\n/**\n * Selectable menu entry. `inset` aligns it with icon-bearing siblings;\n * `variant=\"destructive\"` tints label and focus state with the destructive token.\n *\n * @component\n * @layer core\n */\nfunction DropdownMenuItem({ className, inset, variant = \"default\", ...props }: React.ComponentProps & DropdownMenuItemExtraProps) {\n return (\n \n )\n}\n\n/**\n * Menu item with a toggleable checked state, rendering a check indicator in\n * the leading slot.\n *\n * @component\n * @layer core\n */\nfunction DropdownMenuCheckboxItem({ className, children, checked, ...props }: React.ComponentProps) {\n const sf = useSaasflareProps()\n return (\n \n \n \n \n \n \n {children}\n \n )\n}\n\n/**\n * Single-select menu item for use inside {@link DropdownMenuRadioGroup},\n * rendering a dot indicator when active.\n *\n * @component\n * @layer core\n */\nfunction DropdownMenuRadioItem({ className, children, ...props }: React.ComponentProps) {\n const sf = useSaasflareProps()\n return (\n \n \n \n \n \n \n {children}\n \n )\n}\n\n/**\n * Non-interactive heading for a group of menu items.\n *\n * @component\n * @layer core\n */\nfunction DropdownMenuLabel({ className, inset, ...props }: React.ComponentProps & { inset?: boolean }) {\n return (\n \n )\n}\n\n/**\n * Thin horizontal rule between menu groups.\n *\n * @component\n * @layer core\n */\nfunction DropdownMenuSeparator({ className, ...props }: React.ComponentProps) {\n return (\n \n )\n}\n\n/**\n * Right-aligned keyboard-shortcut hint inside a menu item. Purely visual —\n * does not register the key binding.\n *\n * @component\n * @layer core\n */\nfunction DropdownMenuShortcut({ className, ...props }: React.ComponentProps<\"span\">) {\n return (\n \n )\n}\n\n/**\n * Menu item that opens a nested sub-menu, with a trailing caret indicator.\n *\n * @component\n * @layer core\n */\nfunction DropdownMenuSubTrigger({ className, inset, children, ...props }: React.ComponentProps & { inset?: boolean }) {\n const sf = useSaasflareProps()\n return (\n \n {children}\n \n \n )\n}\n\n/**\n * Floating panel for a nested sub-menu, animated via CSS data-state transitions.\n *\n * @component\n * @layer core\n */\nfunction DropdownMenuSubContent({ className, ...props }: React.ComponentProps) {\n return (\n \n )\n}\n\nexport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuPortal,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuSub,\n DropdownMenuSubContent,\n DropdownMenuSubTrigger,\n DropdownMenuTrigger,\n type DropdownMenuContentProps,\n}\n",
"target": "components/ui/dropdown-menu.tsx"
}
],
"$meta": {
"source": "https://ui.saasflare.io/r/dropdown-menu.json"
}
}