@radix-ui/react-dropdown-menu

Triggering a Dropdown Menu

This code sample shows how to create a basic dropdown menu with a trigger and several items. The `DropdownMenu.Root` component wraps the entire menu, `DropdownMenu.Trigger` is used to open the menu, and `DropdownMenu.Content` contains the menu items.

{"import * as DropdownMenu from '@radix-ui/react-dropdown-menu';\n\nexport default function Example() {\n  return (\n    <DropdownMenu.Root>\n      <DropdownMenu.Trigger>Actions</DropdownMenu.Trigger>\n      <DropdownMenu.Content>\n        <DropdownMenu.Item>Item 1</DropdownMenu.Item>\n        <DropdownMenu.Item>Item 2</DropdownMenu.Item>\n        <DropdownMenu.Item>Item 3</DropdownMenu.Item>\n      </DropdownMenu.Content>\n    </DropdownMenu.Root>\n  );\n}"}

Creating Submenus

This code demonstrates how to create a submenu within a dropdown menu. The `DropdownMenu.Sub` component is used to wrap the submenu, with `DropdownMenu.SubTrigger` to open the submenu and `DropdownMenu.SubContent` to contain the submenu items.

{"import * as DropdownMenu from '@radix-ui/react-dropdown-menu';\n\nexport default function Example() {\n  return (\n    <DropdownMenu.Root>\n      <DropdownMenu.Trigger>Actions</DropdownMenu.Trigger>\n      <DropdownMenu.Content>\n        <DropdownMenu.Item>Item 1</DropdownMenu.Item>\n        <DropdownMenu.Sub>\n          <DropdownMenu.SubTrigger>More Options</DropdownMenu.SubTrigger>\n          <DropdownMenu.SubContent>\n            <DropdownMenu.Item>Sub Item 1</DropdownMenu.Item>\n          </DropdownMenu.SubContent>\n        </DropdownMenu.Sub>\n      </DropdownMenu.Content>\n    </DropdownMenu.Root>\n  );\n}"}

Customizing Menu Items

This code snippet illustrates how to customize the appearance of dropdown menu items using CSS-in-JS with the `styled` function from a library like `@stitches/react`. The `StyledItem` component is a styled version of `DropdownMenu.Item` with custom padding, border radius, and focus styles.

{"import * as DropdownMenu from '@radix-ui/react-dropdown-menu';\nimport { styled } from '@stitches/react';\n\nconst StyledItem = styled(DropdownMenu.Item, {\n  padding: '10px 20px',\n  borderRadius: '3px',\n  '&:focus': {\n    backgroundColor: 'blue',\n    color: 'white'\n  }\n});\n\nexport default function Example() {\n  return (\n    <DropdownMenu.Root>\n      <DropdownMenu.Trigger>Actions</DropdownMenu.Trigger>\n      <DropdownMenu.Content>\n        <StyledItem>Custom Item 1</StyledItem>\n        <StyledItem>Custom Item 2</StyledItem>\n      </DropdownMenu.Content>\n    </DropdownMenu.Root>\n  );\n}"}