@radix-ui/react-dropdown-menu

What is @radix-ui/react-dropdown-menu?

The @radix-ui/react-dropdown-menu package is a set of low-level, unstyled UI primitives for building accessible dropdown and context menus in React applications. It provides the core functionality for dropdown menus without enforcing specific styling, allowing developers to customize the appearance as needed.

What are @radix-ui/react-dropdown-menu's main functionalities?

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}"}

Other packages similar to @radix-ui/react-dropdown-menu

react-select

react-select is a flexible and feature-rich select input control for React. It provides a powerful set of features for single and multi-value selection with search and filter capabilities. It differs from @radix-ui/react-dropdown-menu in that it is more focused on selection rather than general-purpose dropdown functionality.

downshift

downshift is a set of primitives to build simple, flexible, WAI-ARIA compliant enhanced input React components. Its main use case is for autocomplete and dropdown components. It is similar to @radix-ui/react-dropdown-menu but provides more built-in functionality for handling input and selection logic.

react-dropdown

react-dropdown is a simple dropdown component for React, similar to @radix-ui/react-dropdown-menu. It provides a straightforward API for creating dropdowns with options. However, it is less customizable and does not offer the same level of accessibility features as @radix-ui/react-dropdown-menu.

README

react-dropdown-menu

View docs here.