React DropDownButton

  • This UX staple provides options for enabling or disabling its content, displaying icons, and binding it to data. With built-in keyboard navigation support.
  • Part of the KendoReact library along with 100+ professional UI components built with React for React, from the ground up.
  • Get started quickly with our award-winning support, detailed documentation, interactive demos and instructor-led training.
  • The React DropDownButton displays a popup list with action items and provides options for enabling or disabling its content, displaying icons, and binding it to data.

    See React DropDownButton Overview demo

    React DropDownButton - Overview,  KendoReact UI Library
  • Disabled DropDownButton

    By default, the KendoReact DropDownButton is enabled. But when requirements call for the component to be disabled until certain requirements are met, the React DropDownButton can be disabled with a single configuration option.

    See React DropDownButton Disabled demo

    React DropDownButton - Disabled,  KendoReact UI Library
  • Icon DropDownButton

    The KendoReact DropDownButton can be displayed as just an icon, or with a mix of text and icons as a part of its main content. These icons can be imported from third-party font icon libraries like FontAwesome, as custom images, or be pulled from the internal KendoReact Icons.

    See React DropDownButton Icon demo

    React DropDownButton - Icon,  KendoReact UI Library
  • Data Binding

    Beyond being declaratively built, the KendoReact DropDownButton component can be data bound to an array of strings or an array of objects.

    See React DropDownButton Data Binding demo

  • Custom Rendering

    The KendoReact DropDownButton can be customized by providing custom renderers for the React DropDownButton popup or by overriding the item rendering for each of the items displayed in the drop down.

    See React DropDownButton Custom Rendering demo

    React DropDownButton - Custom Rendering,  KendoReact UI Library
  • Keyboard Navigation

    With its built-in keyboard navigation support, the KendoReact DropDownButton has several keyboard shortcuts to help interact with and select items within the component.

    See React DropDownButton Keyboard Navigation demo

  • Accessibility

    The KendoReact DropDownButton is WCAG 2.0 AAA rated, and is compliant with WAI-ARIA and Section 508 accessibility standards.

    See React DropDownButton Accessibility demo

    React Accessibility - KendoReact

All KendoReact Components

waves bg

Next Steps

Visit Our Demos

See KendoReact in action and check out how much it can do out-of-the-box.

See Pricing

Buy an individual license for KendoReact, or treat yourself to Kendo UI, our complete JavaScript bundle.

Start Free Trial

Try KendoReact with dedicated technical support.