React Dropdown Component

Overview#

Dropdowns are toggleable, contextual overlays for displaying lists of links and more.

Dropdowns are built on a third party library, Popper.js, which provides dynamic positioning and viewport detection. Popper.js isn't used to position dropdowns in navbars though as dynamic positioning isn't required.

Examples#

Bind the dropdown's toggle and the dropdown menu inside <CDropdown>, or different element that declares position: relative;. Dropdowns can be triggered from <a> or <button> elements to better fit your possible requirements.

Single button#

Here's how you can put them to work with either <button> elements:

And with <a> elements:

The best part is you can do this with any button variant, too:

Split button#

Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of boolean prop split for proper spacing around the dropdown caret.

We use this extra class to reduce the horizontal padding on either side of the caret by 25% and remove the margin-left that's attached for normal button dropdowns. Those additional changes hold the caret centered in the split button and implement a more properly sized hit area next to the main button.

Sizing#

Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.

Dark dropdowns#

Opt into darker dropdowns to match a dark navbar or custom style by set dark property. No changes are required to the dropdown items.

And putting it to use in a navbar:

Directions#

Centered#

Make the dropdown menu centered below the toggle by adding direction="center" to the <CDropdown> component.

Dropup#

Trigger dropdown menus above elements by adding direction="dropup" to the <CDropdown> component.

Dropup centered#

Make the dropup menu centered above the toggle by adding direction="dropup-center" to the <CDropdown> component.

Dropend#

Trigger dropdown menus at the right of the elements by adding direction="dropend" to the <CDropdown> component.

Dropstart#

Trigger dropdown menus at the left of the elements by adding direction="dropstart" to the <CDropdown> component.

Menu items#

Historically dropdown menu contents had to be links, but that's no longer the case with v4. Now you can optionally use <button> elements in your dropdowns instead of just <a>s.

You can also create non-interactive dropdown items with <CDropdownItemPlain>.

Active#

Set boolean property active to style item as active.

In the following example we use div instead of <CDropdownMenu> to show <CDropdownMenu> content.

Disabled#

Add disabled boolean property to items in the dropdown to style them as disabled.

In the following example we use div instead of <CDropdownMenu> to show <CDropdownMenu> content.

Menu alignment#

By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add aligment="end" to right align the dropdown menu.

Responsive alignment#

If you use responsive alignment, dynamic positioning is disabled.

To align right the dropdown menu with the given breakpoint or larger, add aligment="xs|sm|md|lg|xl|xxl: end".

To align left the dropdown menu with the given breakpoint or larger, add aligment="xs|sm|md|lg|xl|xxl: start".

Menu content#

Headers#

Add a header to label sections of actions in any dropdown menu.

In the following example we use div instead of <CDropdownMenu> to show <CDropdownMenu> content.

Dividers#

Separate groups of related menu items with a divider.

In the following example we use div instead of <CDropdownMenu> to show <CDropdownMenu> content.

Text#

Place any freeform text within a dropdown menu with text. Note that you'll likely need additional sizing styles to constrain the menu width.

Forms#

Put a form within a dropdown menu, or make it into a dropdown menu.

API#

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

• <CDropdown />
• <CDropdownDivider />
• <CDropdownHeader />
• <CDropdownItem />
• <CDropdownItemPlain />
• <CDropdownMenu />
• <CDropdownToggle />