dropdowns.mdx

import { graphql } from 'gatsby';

import ARIA from '../../components/AriaAbbr'; import ComponentApi from '../../components/ComponentApi'; import ReactPlayground from '../../components/ReactPlayground'; import DropdownBasic from '../../examples/Dropdown/Basic'; import DropdownBasicButton from '../../examples/Dropdown/BasicButton'; import DropdownButtonCustom from '../../examples/Dropdown/ButtonCustom'; import DropdownButtonCustomMenu from '../../examples/Dropdown/ButtonCustomMenu'; import DropdownButtonSizes from '../../examples/Dropdown/ButtonSizes'; import DropDirections from '../../examples/Dropdown/DropDirections'; import DropdownItemTags from '../../examples/Dropdown/DropdownItemTags'; import MenuAlignRight from '../../examples/Dropdown/MenuAlignRight'; import MenuDividers from '../../examples/Dropdown/MenuDividers'; import MenuHeaders from '../../examples/Dropdown/MenuHeaders'; import SplitBasic from '../../examples/Dropdown/SplitBasic'; import SplitVariants from '../../examples/Dropdown/SplitVariants'; import DropdownVariants from '../../examples/Dropdown/Variants';

import styles from '../../css/examples.module.scss';

Dropdowns

Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin

Overview

Dropdowns are toggleable, contextual overlays for displaying lists of links and more. Like overlays, Dropdowns are built using a third-party library Popper.js, which provides dynamic positioning and viewport detection.

Accessibility

The WAI standard defines a role="menu" widget, but it's very specific to a certain kind a menu. menus, must only contain role="menuitem", role="menuitemcheckbox", or role="menuitemradio".

On the other hand, Bootstrap's dropdowns are designed to more generic and application in a variety of situations. For this reason we don't automatically add the menu roles to the markup. We do implement some basic keyboard navigation, and if you do provide the "menu" role, react-bootstrap will do its best to ensure the focus management is compliant with the authoring guidelines for menus.

Examples

Single button dropdowns

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.

Since the above is such a common configuration react-bootstrap provides the <DropdownButton> component to help reduce typing. Provide a title prop and some <DropdownItem>s and you're ready to go.

DropdownButton will forward Button props to the underlying Toggle component

Split button dropdowns

Similarly, You create a split dropdown by combining the Dropdown components with another Button and a ButtonGroup.

As with DropdownButton, SplitButton is provided as convenience component.

Sizing

Dropdowns work with buttons of all sizes.

Drop directions

Trigger dropdown menus above, below, left, or to the right of their toggle elements, with the drop prop.

Dropdown 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 <Dropdown.ItemText>. Feel free to style further with custom CSS or text utilities.

Menu alignment

By default, a dropdown menu is aligned to the left, but you can switch it by passing the alignRight prop.

Menu headers

Add a header to label sections of actions.

Menu dividers

Separate groups of related menu items with a divider.

Customization

If the default handling of the dropdown menu and toggle components aren't to your liking, you can customize them, by using the more basic <Dropdown> Component to explicitly specify the Toggle and Menu components

Custom Dropdown Components

For those that want to customize everything, you can forgo the included Toggle and Menu components, and create your own. By providing custom components to the as prop, you can control how each component behaves. Custom toggle and menu components must be able to accept refs.

API

export const query = graphqlquery DropdownMDXQuery { DropdownButton: componentMetadata(displayName: { eq: "DropdownButton" }) { displayName ...ComponentApi_metadata } SplitButton: componentMetadata(displayName: { eq: "SplitButton" }) { displayName ...ComponentApi_metadata } Dropdown: componentMetadata(displayName: { eq: "Dropdown" }) { displayName ...ComponentApi_metadata } DropdownToggle: componentMetadata(displayName: { eq: "DropdownToggle" }) { displayName ...ComponentApi_metadata } DropdownMenu: componentMetadata(displayName: { eq: "DropdownMenu" }) { displayName ...ComponentApi_metadata } DropdownItem: componentMetadata(displayName: { eq: "DropdownItem" }) { displayName ...ComponentApi_metadata } DropdownHeader: componentMetadata(displayName: { eq: "DropdownHeader" }) { displayName ...ComponentApi_metadata } DropdownDivider: componentMetadata(displayName: { eq: "DropdownDivider" }) { displayName ...ComponentApi_metadata } };