Dropdowns
Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.. See official bootstrap document
Basic example
The basic Dropdown is composed of a wrapping Dropdown and inner <DropdownMenu>, and <DropdownToggle>. By default the <DropdownToggle> will render a Button component and accepts all the same props.
Split button
Similarly, You create a split dropdown by combining the Dropdown components with another Button and a ButtonGroup.
Sizing
Dropdowns work with buttons of all sizes.
Dropdown directions
Trigger dropdown menus above, below, left, or to the right of their toggle elements, with the drop prop.
Dropdown animation
Use data attribute data-dropdown-animation with data-bs-toggle="dropdown" to animate dropdown.
Menu content
Create menu items with button or anchor tags. You can also add non-interactive dropdown items or add a header to label sections or separate groups with a divider.
Header styles and icon
Create menu items with button or anchor tags. You can also add non-interactive dropdown items or add a header to label sections or separate groups with a divider.
Header styles 2
Add .header-wth-bg class with <Dropdown.Header>.
Center align text
add class.text-center with <Dropdown.Menu>.
With button
add class.text-center with dropdown-menu class
Adding text
Place any freeform text within a dropdown menu with text and use spacing utilities or simply use.dropdown-item-text class.
With avatar
Place avatar in dropdown item.
With Images
Place any icon or image inside.dropdown-item-text class.
Dropdown with icons and border + No shadow
Add an icon using dropdown-menu .dropdown-bordered
Menu forms
Put a form within a dropdown menu, or make it into a dropdown menu, and use margin or padding utilities to give it the negative space you require.
Linked Field
Put a form within a dropdown menu, or make it into a dropdown menu, and use margin or padding utilities to give it the negative space you require.
Dropdown inverse
Opt into darker dropdowns to match a dark navbar or custom style by adding variant="dark" onto an existing DropdownMenu. Alternatively, use menuVariant="dark" when using the DropdownButton component.
Dropdown with checkbox
Checkout the example of dropdown with checkbox.
Morgan Freeman
Huma Therman
Charlie Chaplin
Winston Churchil
Office Board
Boss Baby
Jaquiline Joker
Dropdown with radio
Checkout the example of dropdown with radio.