npm install @radix-ui/react-dropdown-menu

import { DropdownMenu } from "radix-ui";

export default () => (
	<DropdownMenu.Root>
		<DropdownMenu.Trigger />

		<DropdownMenu.Portal>
			<DropdownMenu.Content>
				<DropdownMenu.Label />
				<DropdownMenu.Item />

				<DropdownMenu.Group>
					<DropdownMenu.Item />
				</DropdownMenu.Group>

				<DropdownMenu.CheckboxItem>
					<DropdownMenu.ItemIndicator />
				</DropdownMenu.CheckboxItem>

				<DropdownMenu.RadioGroup>
					<DropdownMenu.RadioItem>
						<DropdownMenu.ItemIndicator />
					</DropdownMenu.RadioItem>
				</DropdownMenu.RadioGroup>

				<DropdownMenu.Sub>
					<DropdownMenu.SubTrigger />
					<DropdownMenu.Portal>
						<DropdownMenu.SubContent />
					</DropdownMenu.Portal>
				</DropdownMenu.Sub>

				<DropdownMenu.Separator />
				<DropdownMenu.Arrow />
			</DropdownMenu.Content>
		</DropdownMenu.Portal>
	</DropdownMenu.Root>
);

				Read our <a href="../guides/composition">Composition</a> guide for
				more details.
			</>
		),
	},
]}

				Read our <a href="../guides/composition">Composition</a> guide for
				more details.
			</>
		),
	},
	{
		name: "loop",
		required: false,
		type: "boolean",
		default: "false",
		description: (
			<span>
				When <Code>true</Code>, keyboard navigation will loop from last item
				to first, and vice versa.
			</span>
		),
	},
	{
		name: "onCloseAutoFocus",
		type: "(event: Event) => void",
		typeSimple: "function",
		description: (
			<span>
				Event handler called when focus moves to the trigger after closing. It
				can be prevented by calling <Code>event.preventDefault</Code>.
			</span>
		),
	},
	{
		name: "onEscapeKeyDown",
		type: "(event: KeyboardEvent) => void",
		typeSimple: "function",
		description: (
			<span>
				Event handler called when the escape key is down. It can be prevented
				by calling <Code>event.preventDefault</Code>
			</span>
		),
	},
	{
		name: "onPointerDownOutside",
		type: "(event: PointerDownOutsideEvent) => void",
		typeSimple: "function",
		description: (
			<span>
				Event handler called when a pointer event occurs outside the bounds of
				the component. It can be prevented by calling{" "}
				<Code>event.preventDefault</Code>.
			</span>
		),
	},
	{
		name: "onFocusOutside",
		type: "(event: FocusOutsideEvent) => void",
		typeSimple: "function",
		description: (
			<span>
				Event handler called when focus moves outside the bounds of the
				component. It can be prevented by calling{" "}
				<Code>event.preventDefault</Code>.
			</span>
		),
	},
	{
		name: "onInteractOutside",
		type: "(event: PointerDownOutsideEvent | FocusOutsideEvent) => void",
		typeSimple: "function",
		description: (
			<span>
				Event handler called when an interaction (pointer or focus event)
				happens outside the bounds of the component. It can be prevented by
				calling <Code>event.preventDefault</Code>.
			</span>
		),
	},
	{
		name: "forceMount",
		type: "boolean",
		description: (
			<span>
				Used to force mounting when more control is needed. Useful when
				controlling animation with React animation libraries. It inherits from{" "}
				<Code>DropdownMenu.Portal</Code>.
			</span>
		),
	},
	{
		name: "side",
		type: '"top" | "right" | "bottom" | "left"',
		typeSimple: "enum",
		default: '"bottom"',
		description: (
			<span>
				The preferred side of the trigger to render against when open. Will be
				reversed when collisions occur and <Code>avoidCollisions</Code> is
				enabled.
			</span>
		),
	},
	{
		name: "sideOffset",
		type: "number",
		default: "0",
		description: <span>The distance in pixels from the trigger.</span>,
	},
	{
		name: "align",
		type: '"start" | "center" | "end"',
		typeSimple: "enum",
		default: '"center"',
		description: (
			<span>
				The preferred alignment against the trigger. May change when
				collisions occur.
			</span>
		),
	},
	{
		name: "alignOffset",
		type: "number",
		default: "0",
		description: (
			<span>
				An offset in pixels from the <Code>"start"</Code> or{" "}
				<Code>"end"</Code> alignment options.
			</span>
		),
	},
	{
		name: "avoidCollisions",
		type: "boolean",
		default: "true",
		description: (
			<span>
				When <Code>true</Code>, overrides the <Code>side</Code> and
				<Code>align</Code> preferences to prevent collisions with boundary
				edges.
			</span>
		),
	},
	{
		name: "collisionBoundary",
		type: "Element | null | Array<Element | null>",
		typeSimple: "Boundary",
		default: "[]",
		description: (
			<span>
				The element used as the collision boundary. By default this is the
				viewport, though you can provide additional element(s) to be included
				in this check.
			</span>
		),
	},
	{
		name: "collisionPadding",
		type: "number | Partial<Record<Side, number>>",
		typeSimple: "number | Padding",
		default: "0",
		description: (
			<span>
				The distance in pixels from the boundary edges where collision
				detection should occur. Accepts a number (same for all sides), or a
				partial padding object, for example:{" "}
				<Code>{`{ top: 20, left: 20 }`}</Code>.
			</span>
		),
	},
	{
		name: "arrowPadding",
		type: "number",
		default: "0",
		description: (
			<span>
				The padding between the arrow and the edges of the content. If your
				content has <Code>border-radius</Code>, this will prevent it from
				overflowing the corners.
			</span>
		),
	},
	{
		name: "sticky",
		type: '"partial" | "always"',
		typeSimple: "enum",
		default: '"partial"',
		description: (
			<span>
				The sticky behavior on the align axis. <Code>"partial"</Code> will
				keep the content in the boundary as long as the trigger is at least
				partially in the boundary whilst <Code>"always"</Code> will keep the
				content in the boundary regardless.
			</span>
		),
	},
	{
		name: "hideWhenDetached",
		type: "boolean",
		default: "false",
		description: (
			<span>
				Whether to hide the content when the trigger becomes fully occluded.
			</span>
		),
	},
]}

				Read our <a href="../guides/composition">Composition</a> guide for
				more details.
			</>
		),
	},
	{
		name: "width",
		type: "number",
		default: 10,
		description: <span>The width of the arrow in pixels.</span>,
	},
	{
		name: "height",
		type: "number",
		default: 5,
		description: <span>The height of the arrow in pixels.</span>,
	},
]}

				Read our <a href="../guides/composition">Composition</a> guide for
				more details.
			</>
		),
	},
	{
		name: "disabled",
		type: "boolean",
		description: (
			<span>
				When <Code>true</Code>, prevents the user from interacting with the
				item.
			</span>
		),
	},
	{
		name: "onSelect",
		type: "(event: Event) => void",
		typeSimple: "function",
		description: (
			<span>
				Event handler called when the user selects an item (via mouse or
				keyboard). Calling <Code>event.preventDefault</Code> in this handler
				will prevent the dropdown menu from closing when selecting that item.
			</span>
		),
	},
	{
		name: "textValue",
		type: "string",
		description: (
			<span>
				Optional text used for typeahead purposes. By default the typeahead
				behavior will use the <Code>.textContent</Code> of the item. Use this
				when the content is complex, or you have non-textual content inside.
			</span>
		),
	},
]}

				Read our <a href="../guides/composition">Composition</a> guide for
				more details.
			</>
		),
	},
]}

				Read our <a href="../guides/composition">Composition</a> guide for
				more details.
			</>
		),
	},
]}

				Read our <a href="../guides/composition">Composition</a> guide for
				more details.
			</>
		),
	},
	{
		name: "checked",
		type: `boolean | 'indeterminate'`,
		description: (
			<span>
				The controlled checked state of the item. Must be used in conjunction
				with <Code>onCheckedChange</Code>.
			</span>
		),
	},
	{
		name: "onCheckedChange",
		type: `(checked: boolean) => void`,
		typeSimple: "function",
		description: (
			<span>Event handler called when the checked state changes.</span>
		),
	},
	{
		name: "disabled",
		type: "boolean",
		description: (
			<span>
				When <Code>true</Code>, prevents the user from interacting with the
				item.
			</span>
		),
	},
	{
		name: "onSelect",
		type: "(event: Event) => void",
		typeSimple: "function",
		description: (
			<span>
				Event handler called when the user selects an item (via mouse or
				keyboard). Calling <Code>event.preventDefault</Code> in this handler
				will prevent the dropdown menu from closing when selecting that item.
			</span>
		),
	},
	{
		name: "textValue",
		type: "string",
		description: (
			<span>
				Optional text used for typeahead purposes. By default the typeahead
				behavior will use the <Code>.textContent</Code> of the item. Use this
				when the content is complex, or you have non-textual content inside.
			</span>
		),
	},
]}

				Read our <a href="../guides/composition">Composition</a> guide for
				more details.
			</>
		),
	},
	{
		name: "value",
		type: "string",
		description: "The value of the selected item in the group.",
	},
	{
		name: "onValueChange",
		type: "(value: string) => void",
		typeSimple: "function",
		description: "Event handler called when the value changes.",
	},
]}

				Read our <a href="../guides/composition">Composition</a> guide for
				more details.
			</>
		),
	},
	{
		name: "value",
		type: "string",
		required: true,
		description: "The unique value of the item.",
	},
	{
		name: "disabled",
		type: "boolean",
		description: (
			<span>
				When <Code>true</Code>, prevents the user from interacting with the
				item.
			</span>
		),
	},
	{
		name: "onSelect",
		type: "(event: Event) => void",
		typeSimple: "function",
		description: (
			<span>
				Event handler called when the user selects an item (via mouse or
				keyboard). Calling <Code>event.preventDefault</Code> in this handler
				will prevent the dropdown menu from closing when selecting that item.
			</span>
		),
	},
	{
		name: "textValue",
		type: "string",
		description: (
			<span>
				Optional text used for typeahead purposes. By default the typeahead
				behavior will use the <Code>.textContent</Code> of the item. Use this
				when the content is complex, or you have non-textual content inside.
			</span>
		),
	},
]}

				Read our <a href="../guides/composition">Composition</a> guide for
				more details.
			</>
		),
	},
	{
		name: "forceMount",
		type: "boolean",
		description: (
			<span>
				Used to force mounting when more control is needed. Useful when
				controlling animation with React animation libraries.
			</span>
		),
	},
]}

				Read our <a href="../guides/composition">Composition</a> guide for
				more details.
			</>
		),
	},
]}

				Read our <a href="../guides/composition">Composition</a> guide for
				more details.
			</>
		),
	},
	{
		name: "disabled",
		type: "boolean",
		description: (
			<span>
				When <Code>true</Code>, prevents the user from interacting with the
				item.
			</span>
		),
	},
	{
		name: "textValue",
		type: "string",
		description: (
			<span>
				Optional text used for typeahead purposes. By default the typeahead
				behavior will use the <Code>.textContent</Code> of the item. Use this
				when the content is complex, or you have non-textual content inside.
			</span>
		),
	},
]}

				Read our <a href="../guides/composition">Composition</a> guide for
				more details.
			</>
		),
	},
	{
		name: "loop",
		required: false,
		type: "boolean",
		default: "false",
		description: (
			<span>
				When <Code>true</Code>, keyboard navigation will loop from last item
				to first, and vice versa.
			</span>
		),
	},
	{
		name: "onEscapeKeyDown",
		type: "(event: KeyboardEvent) => void",
		typeSimple: "function",
		description: (
			<span>
				Event handler called when the escape key is down. It can be prevented
				by calling <Code>event.preventDefault</Code>
			</span>
		),
	},
	{
		name: "onPointerDownOutside",
		type: "(event: PointerDownOutsideEvent) => void",
		typeSimple: "function",
		description: (
			<span>
				Event handler called when a pointer event occurs outside the bounds of
				the component. It can be prevented by calling{" "}
				<Code>event.preventDefault</Code>.
			</span>
		),
	},
	{
		name: "onFocusOutside",
		type: "(event: FocusOutsideEvent) => void",
		typeSimple: "function",
		description: (
			<span>
				Event handler called when focus moves outside the bounds of the
				component. It can be prevented by calling{" "}
				<Code>event.preventDefault</Code>.
			</span>
		),
	},
	{
		name: "onInteractOutside",
		type: "(event: PointerDownOutsideEvent | FocusOutsideEvent) => void",
		typeSimple: "function",
		description: (
			<span>
				Event handler called when an interaction (pointer or focus event)
				happens outside the bounds of the component. It can be prevented by
				calling <Code>event.preventDefault</Code>.
			</span>
		),
	},
	{
		name: "forceMount",
		type: "boolean",
		description: (
			<span>
				Used to force mounting when more control is needed. Useful when
				controlling animation with React animation libraries. It inherits from{" "}
				<Code>DropdownMenu.Portal</Code>.
			</span>
		),
	},
	{
		name: "sideOffset",
		type: "number",
		default: "0",
		description: <span>The distance in pixels from the trigger.</span>,
	},
	{
		name: "alignOffset",
		type: "number",
		default: "0",
		description: (
			<span>
				An offset in pixels from the <Code>"start"</Code> or{" "}
				<Code>"end"</Code> alignment options.
			</span>
		),
	},
	{
		name: "avoidCollisions",
		type: "boolean",
		default: "true",
		description: (
			<span>
				When <Code>true</Code>, overrides the <Code>side</Code> and
				<Code>align</Code> preferences to prevent collisions with boundary
				edges.
			</span>
		),
	},
	{
		name: "collisionBoundary",
		type: "Element | null | Array<Element | null>",
		typeSimple: "Boundary",
		default: "[]",
		description: (
			<span>
				The element used as the collision boundary. By default this is the
				viewport, though you can provide additional element(s) to be included
				in this check.
			</span>
		),
	},
	{
		name: "collisionPadding",
		type: "number | Partial<Record<Side, number>>",
		typeSimple: "number | Padding",
		default: "0",
		description: (
			<span>
				The distance in pixels from the boundary edges where collision
				detection should occur. Accepts a number (same for all sides), or a
				partial padding object, for example:{" "}
				<Code>{`{ top: 20, left: 20 }`}</Code>.
			</span>
		),
	},
	{
		name: "arrowPadding",
		type: "number",
		default: "0",
		description: (
			<span>
				The padding between the arrow and the edges of the content. If your
				content has <Code>border-radius</Code>, this will prevent it from
				overflowing the corners.
			</span>
		),
	},
	{
		name: "sticky",
		type: '"partial" | "always"',
		typeSimple: "enum",
		default: '"partial"',
		description: (
			<span>
				The sticky behavior on the align axis. <Code>"partial"</Code> will
				keep the content in the boundary as long as the trigger is at least
				partially in the boundary whilst <Code>"always"</Code> will keep the
				content in the boundary regardless.
			</span>
		),
	},
	{
		name: "hideWhenDetached",
		type: "boolean",
		default: "false",
		description: (
			<span>
				Whether to hide the content when the trigger becomes fully occluded.
			</span>
		),
	},
]}

<DropdownMenu.Root>
	<DropdownMenu.Trigger>…</DropdownMenu.Trigger>
	<DropdownMenu.Portal>
		<DropdownMenu.Content>
			<DropdownMenu.Item>…</DropdownMenu.Item>
			<DropdownMenu.Item>…</DropdownMenu.Item>
			<DropdownMenu.Separator />
			<DropdownMenu.Sub>
				<DropdownMenu.SubTrigger>Sub menu →</DropdownMenu.SubTrigger>
				<DropdownMenu.Portal>
					<DropdownMenu.SubContent>
						<DropdownMenu.Item>Sub menu item</DropdownMenu.Item>
						<DropdownMenu.Item>Sub menu item</DropdownMenu.Item>
						<DropdownMenu.Arrow />
					</DropdownMenu.SubContent>
				</DropdownMenu.Portal>
			</DropdownMenu.Sub>
			<DropdownMenu.Separator />
			<DropdownMenu.Item>…</DropdownMenu.Item>
		</DropdownMenu.Content>
	</DropdownMenu.Portal>
</DropdownMenu.Root>

// index.jsx
import { DropdownMenu } from "radix-ui";
import "./styles.css";

export default () => (
	<DropdownMenu.Root>
		<DropdownMenu.Trigger>…</DropdownMenu.Trigger>
		<DropdownMenu.Portal>
			<DropdownMenu.Content>
				<DropdownMenu.Item __className__="DropdownMenuItem" __disabled__>
					…
				</DropdownMenu.Item>
				<DropdownMenu.Item className="DropdownMenuItem">…</DropdownMenu.Item>
			</DropdownMenu.Content>
		</DropdownMenu.Portal>
	</DropdownMenu.Root>
);

/* styles.css */
.DropdownMenuItem[__data-disabled__] {
	color: gainsboro;
}

<DropdownMenu.Root>
	<DropdownMenu.Trigger>…</DropdownMenu.Trigger>
	<DropdownMenu.Portal>
		<DropdownMenu.Content>
			<DropdownMenu.Item>…</DropdownMenu.Item>
			<DropdownMenu.Separator />
			<DropdownMenu.Item>…</DropdownMenu.Item>
			<DropdownMenu.Separator />
			<DropdownMenu.Item>…</DropdownMenu.Item>
		</DropdownMenu.Content>
	</DropdownMenu.Portal>
</DropdownMenu.Root>

<DropdownMenu.Root>
	<DropdownMenu.Trigger>…</DropdownMenu.Trigger>
	<DropdownMenu.Portal>
		<DropdownMenu.Content>
			<DropdownMenu.Label>Label</DropdownMenu.Label>
			<DropdownMenu.Item>…</DropdownMenu.Item>
			<DropdownMenu.Item>…</DropdownMenu.Item>
			<DropdownMenu.Item>…</DropdownMenu.Item>
		</DropdownMenu.Content>
	</DropdownMenu.Portal>
</DropdownMenu.Root>

import * as React from "react";
import { CheckIcon } from "@radix-ui/react-icons";
import { DropdownMenu } from "radix-ui";

export default () => {
	const [checked, setChecked] = React.useState(true);

	return (
		<DropdownMenu.Root>
			<DropdownMenu.Trigger>…</DropdownMenu.Trigger>
			<DropdownMenu.Portal>
				<DropdownMenu.Content>
					<DropdownMenu.Item>…</DropdownMenu.Item>
					<DropdownMenu.Item>…</DropdownMenu.Item>
					<DropdownMenu.Separator />
					<DropdownMenu.CheckboxItem
						checked={checked}
						onCheckedChange={setChecked}
					>
						<DropdownMenu.ItemIndicator>
							<CheckIcon />
						</DropdownMenu.ItemIndicator>
						Checkbox item
					</DropdownMenu.CheckboxItem>
				</DropdownMenu.Content>
			</DropdownMenu.Portal>
		</DropdownMenu.Root>
	);
};

import * as React from "react";
import { CheckIcon } from "@radix-ui/react-icons";
import { DropdownMenu } from "radix-ui";

export default () => {
	const [color, setColor] = React.useState("blue");

	return (
		<DropdownMenu.Root>
			<DropdownMenu.Trigger>…</DropdownMenu.Trigger>
			<DropdownMenu.Portal>
				<DropdownMenu.Content>
					<DropdownMenu.RadioGroup value={color} onValueChange={setColor}>
						<DropdownMenu.RadioItem value="red">
							<DropdownMenu.ItemIndicator>
								<CheckIcon />
							</DropdownMenu.ItemIndicator>
							Red
						</DropdownMenu.RadioItem>
						<DropdownMenu.RadioItem value="blue">
							<DropdownMenu.ItemIndicator>
								<CheckIcon />
							</DropdownMenu.ItemIndicator>
							Blue
						</DropdownMenu.RadioItem>
						<DropdownMenu.RadioItem value="green">
							<DropdownMenu.ItemIndicator>
								<CheckIcon />
							</DropdownMenu.ItemIndicator>
							Green
						</DropdownMenu.RadioItem>
					</DropdownMenu.RadioGroup>
				</DropdownMenu.Content>
			</DropdownMenu.Portal>
		</DropdownMenu.Root>
	);
};

import { DropdownMenu } from "radix-ui";

export default () => (
	<DropdownMenu.Root>
		<DropdownMenu.Trigger>…</DropdownMenu.Trigger>
		<DropdownMenu.Portal>
			<DropdownMenu.Content>
				<DropdownMenu.Item>
					
					Adolfo Hess
				</DropdownMenu.Item>
				<DropdownMenu.Item>
					
					Miyah Myles
				</DropdownMenu.Item>
			</DropdownMenu.Content>
		</DropdownMenu.Portal>
	</DropdownMenu.Root>
);

// index.jsx
import { DropdownMenu } from "radix-ui";
import "./styles.css";

export default () => (
	<DropdownMenu.Root>
		<DropdownMenu.Trigger>…</DropdownMenu.Trigger>
		<DropdownMenu.Portal>
			<DropdownMenu.Content __className__="DropdownMenuContent" sideOffset={5}>
				…
			</DropdownMenu.Content>
		</DropdownMenu.Portal>
	</DropdownMenu.Root>
);

/* styles.css */
.DropdownMenuContent {
	width: var(__--radix-dropdown-menu-trigger-width__);
	max-height: var(__--radix-dropdown-menu-content-available-height__);
}

// index.jsx
import { DropdownMenu } from "radix-ui";
import "./styles.css";

export default () => (
	<DropdownMenu.Root>
		<DropdownMenu.Trigger>…</DropdownMenu.Trigger>
		<DropdownMenu.Portal>
			<DropdownMenu.Content __className__="DropdownMenuContent">
				…
			</DropdownMenu.Content>
		</DropdownMenu.Portal>
	</DropdownMenu.Root>
);

/* styles.css */
.DropdownMenuContent {
	transform-origin: var(__--radix-dropdown-menu-content-transform-origin__);
	animation: scaleIn 0.5s ease-out;
}

@keyframes scaleIn {
	from {
		opacity: 0;
		transform: scale(0);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

// index.jsx
import { DropdownMenu } from "radix-ui";
import "./styles.css";

export default () => (
	<DropdownMenu.Root>
		<DropdownMenu.Trigger>…</DropdownMenu.Trigger>
		<DropdownMenu.Portal>
			<DropdownMenu.Content __className__="DropdownMenuContent">
				…
			</DropdownMenu.Content>
		</DropdownMenu.Portal>
	</DropdownMenu.Root>
);

/* styles.css */
.DropdownMenuContent {
	animation-duration: 0.6s;
	animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.DropdownMenuContent[__data-side="top"__] {
	animation-name: slideUp;
}
.DropdownMenuContent[__data-side="bottom"__] {
	animation-name: slideDown;
}

@keyframes slideUp {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes slideDown {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

				When focus is on an item, activates the focused item.
			</span>
		),
	},
	{
		keys: ["Enter"],
		description: (
			<span>
				When focus is on <Code>DropdownMenu.Trigger</Code>, opens the dropdown
				menu and focuses the first item.
				

				When focus is on an item, activates the focused item.
			</span>
		),
	},
	{
		keys: ["ArrowDown"],
		description: (
			<span>
				When focus is on <Code>DropdownMenu.Trigger</Code>, opens the dropdown
				menu.
				

				When focus is on an item, moves focus to the next item.
			</span>
		),
	},
	{
		keys: ["ArrowUp"],
		description: (
			<span>When focus is on an item, moves focus to the previous item.</span>
		),
	},
	{
		keys: ["ArrowRight", "ArrowLeft"],
		description: (
			<span>
				When focus is on <Code>DropdownMenu.SubTrigger</Code>, opens or closes
				the submenu depending on reading direction.
			</span>
		),
	},
	{
		keys: ["Esc"],
		description: (
			<span>
				Closes the dropdown menu and moves focus to{" "}
				<Code>DropdownMenu.Trigger</Code>.
			</span>
		),
	},
]}

import {
	DropdownMenu,
	DropdownMenuTrigger,
	DropdownMenuContent,
	DropdownMenuLabel,
	DropdownMenuItem,
	DropdownMenuGroup,
	DropdownMenuCheckboxItem,
	DropdownMenuRadioGroup,
	DropdownMenuRadioItem,
	DropdownMenuSeparator,
} from "./your-dropdown-menu";

export default () => (
	<DropdownMenu>
		<DropdownMenuTrigger>DropdownMenu trigger</DropdownMenuTrigger>
		<DropdownMenuContent>
			<DropdownMenuItem>Item</DropdownMenuItem>
			<DropdownMenuLabel>Label</DropdownMenuLabel>
			<DropdownMenuGroup>Group</DropdownMenuGroup>
			<DropdownMenuCheckboxItem>CheckboxItem</DropdownMenuCheckboxItem>
			<DropdownMenuSeparator>Separator</DropdownMenuSeparator>
			<DropdownMenuRadioGroup>
				<DropdownMenuRadioItem>RadioItem</DropdownMenuRadioItem>
				<DropdownMenuRadioItem>RadioItem</DropdownMenuRadioItem>
			</DropdownMenuRadioGroup>
		</DropdownMenuContent>
	</DropdownMenu>
);

// your-dropdown-menu.jsx
import * as React from "react";
import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
import { CheckIcon, DividerHorizontalIcon } from "@radix-ui/react-icons";

export const DropdownMenu = DropdownMenuPrimitive.Root;
export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;

export const DropdownMenuContent = React.forwardRef(
	({ children, ...props }, forwardedRef) => {
		return (
			<DropdownMenuPrimitive.Portal>
				<DropdownMenuPrimitive.Content {...props} ref={forwardedRef}>
					{children}
					<DropdownMenuPrimitive.Arrow />
				</DropdownMenuPrimitive.Content>
			</DropdownMenuPrimitive.Portal>
		);
	},
);

export const DropdownMenuLabel = DropdownMenuPrimitive.Label;
export const DropdownMenuItem = DropdownMenuPrimitive.Item;
export const DropdownMenuGroup = DropdownMenuPrimitive.Group;

export const DropdownMenuCheckboxItem = React.forwardRef(
	({ children, ...props }, forwardedRef) => {
		return (
			<DropdownMenuPrimitive.CheckboxItem {...props} ref={forwardedRef}>
				{children}
				<DropdownMenuPrimitive.ItemIndicator>
					{props.checked === "indeterminate" && <DividerHorizontalIcon />}
					{props.checked === true && <CheckIcon />}
				</DropdownMenuPrimitive.ItemIndicator>
			</DropdownMenuPrimitive.CheckboxItem>
		);
	},
);

export const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;

export const DropdownMenuRadioItem = React.forwardRef(
	({ children, ...props }, forwardedRef) => {
		return (
			<DropdownMenuPrimitive.RadioItem {...props} ref={forwardedRef}>
				{children}
				<DropdownMenuPrimitive.ItemIndicator>
					<CheckIcon />
				</DropdownMenuPrimitive.ItemIndicator>
			</DropdownMenuPrimitive.RadioItem>
		);
	},
);

export const DropdownMenuSeparator = DropdownMenuPrimitive.Separator;