Predefined button styles: Supports built-in styles such as primary, success, warning, info, and error for visual consistency and emphasis.
Smart positioning: Automatically detects screen boundaries and adjusts the pop-up menu using flip-and-fit logic to prevent overflow.
Effortless customization: Easily configure pop-up menu items to suit specific design and functionality needs.

4.5 / 5

(600+ Reviews)

Trusted by the world’s leading companies

React dropdown button

Overview

The React Dropdown Button is a graphical user interface component designed to present a list of items or actions. It supports built-in icons with customizable positioning, three size options, separators for grouping related actions, right-to-left (RTL) layout, and extensive UI customization.

Get started with the React Dropdown Button using a few simple lines of TSX code as demonstrated below. Also, explore our React Dropdown Button example that shows how to render and configure the React Dropdown Button.

import { DropDownButton } from '@syncfusion/react-splitbuttons';
import { UserIcon, EditIcon, FlagsIcon, TrashIcon, FilterIcon } from '@syncfusion/react-icons';

export default function App() {
  const items = [
    { text: 'Edit', icon: <EditIcon width={16} height={16} />, },
    { text: 'Flagged', icon: <FlagsIcon width={16} height={16} />, },
    { text: 'Remove', icon: <TrashIcon width={16} height={16} />, }
  ];
  return (
    <div className='dropdown-center'>
      <DropDownButton items={items} >Default</DropDownButton>
    </div>
  );
}

Supports three size options, small, medium, and large, to accommodate various interface layouts and design requirements.

Dropdown button size documentation

React Dropdown sizes

React Dropdown icons

The React Dropdown Button component enhances visual presentation by allowing the inclusion of icons alongside menu item text. Icons can be positioned to the left or above the text, or used as standalone icon-only options displayed without accompanying text.

Dropdown button with icons demo

The pop-up menu is a toggleable container that holds a list of action items or custom content that will open or close when the button is clicked. All the items in the pop-up menu are customizable.

Pop-up menu demo

React Dropdown pop-up menu with a list of action items containing text and icons

React Dropdown Menu separator grouping similar action items

Divider and separator

Use a horizontal line separator to represent similar action items as a group within the list of available items.

Dropdown Menu items with divider documentation

The React Dropdown Button can be configured to display a pop-up menu without showing the arrow icon, offering a cleaner design.

Dropdown Button without arrow documentation

React Dropdown button without arrow

UI customization

The React Dropdown Button component offers extensive customization options, including control over size, appearance, and interaction behavior. The pop-up menu element is fully customizable, allowing developers to tailor its layout, styling, and content to meet specific design requirements.

Dropdown Menu pop-up customization demo

Web accessibility

Fully supports WAI-ARIA accessibility to work with screen readers and assistive devices.
Follows WAI-ARIA best practices for implementing keyboard interaction.
Follows WCAG 2.0 standards in the design of UI visual elements such as foreground color, background color, line spacing, text, and images.
Supports right-to-left (RTL) text direction for users working in right-to-left languages like Hebrew, Arabic, or Persian.

Developer-friendly APIs

The Dropdown Button provides control over all the UI elements and their behaviors. It offers the best user experience through a rich set of developer-friendly APIs.

Dropdown Button API reference

Not sure how to create your first React Dropdown Button? Our documentation can help.

I’d love to read it now

Developed using React’s core principles, this library employs functional components and hooks without any external dependencies.

GRIDS

Data Grid

DATA VISUALIZATION

Charts

NAVIGATION

BUTTONS

INPUTS

LAYOUT

NOTIFICATIONS

Frequently Asked Questions

✅ Why should you choose the Syncfusion^® React Dropdown Menu?

Built-in support for primary, success, warning, info, and error button styles.
Automatic collision detection and handling with pop-up menu flip-and-fit.
Quick configuration for pop-up menu item customization.
One of the best React Dropdown Buttons on the market.
Simple configuration and APIs.
Supports all modern browsers.
Touch-friendly and responsive.
Expansive learning demos help you learn quickly and get started fast.

✅ Where can I find the Syncfusion React Dropdown Menu demo?

You can find our React Dropdown Menu demo here.

✅ Can I download and utilize the Syncfusion React Dropdown Menu for free?

No, this is a commercial product and requires a paid license. However, a free Community License is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue, five or fewer developers, and 10 or fewer employees.