React Bootstrap Dropdown Component
Dropdown with Bootstrap Styling
Bootstrap 5 components designed for React.js
This component is part of the CoreUI for React.js UI components library, which offers all Bootstrap components designed to work seamlessly with React.js.
If you want to use Bootstrap 5 in a React.js environment while also needing advanced components that Bootstrap does not offer and dedicated developer support, then this library is the best solution for you.
Learn how to use the React Bootstrap Dropdown component from CoreUI to create toggleable, contextual overlays with links, buttons, forms, and more, styled the Bootstrap way.
Overview of React Bootstrap Dropdown component#
The React Bootstrap Dropdown component provides toggleable, contextual overlays for displaying lists, links, forms, and more. It’s powered by Popper.js for positioning, although navbar dropdowns don’t require dynamic placement.
React Bootstrap Dropdown examples#
Single button dropdowns#
You can trigger dropdowns using <button> elements:
Or with <a> elements:
It works with all button variants:
Split button dropdowns#
Use the split prop to create a split button dropdown. This adds a dropdown toggle next to the main button.
Sizing#
React Bootstrap Dropdowns support all button sizes:
Dark variant#
Use the dark prop to style the dropdown with a dark theme.
Directions#
RTL
Directions are mirrored in RTL layouts. For example, .dropstart appears on the right.
Centered dropdown#
Dropup#
Dropup centered#
Dropend#
Dropstart#
Dropdown menu items#
React Bootstrap Dropdowns can include <a> or <button> elements:
Use <CDropdownItemPlain> for non-interactive items:
Active and disabled items#
To mark an item as active:
To mark an item as disabled:
Menu alignment#
Right-align the dropdown using the alignment="end" prop:
Heads up! Dropdowns use Popper.js for positioning.
Responsive alignment#
Right-align from a specific breakpoint with alignment="sm:end" and similar values:
Left-align from a breakpoint with alignment="md:start":
Dropdown menu content#
Headers#
Dividers#
Text#
Forms#
API reference#
Refer to the API below for full details on available components and props in the React Bootstrap Dropdown: