Dropdown

See React Bootstrap/Dropdowns for full documentation and props.

Dropdowns in react-bootstrap provide some level of accessibility but in most cases roles or ids will need to be specifically associated with the menu elements themselves.

Dropdowns can be created with a the Dropdown.Toggle component or a DropdownButton component.

Result

Loading...

Live Editor

<Dropdown> <Dropdown.Toggle>Toggle</Dropdown.Toggle> <Dropdown.Menu role="menu"> <Dropdown.Item>Apple</Dropdown.Item> <Dropdown.Item>Banana</Dropdown.Item> <Dropdown.Item>Cantaloupe</Dropdown.Item> </Dropdown.Menu> </Dropdown>

<Dropdown>
    <Dropdown.Toggle>Toggle</Dropdown.Toggle>

    <Dropdown.Menu role="menu">
        <Dropdown.Item>Apple</Dropdown.Item>
        <Dropdown.Item>Banana</Dropdown.Item>
        <Dropdown.Item>Cantaloupe</Dropdown.Item>
    </Dropdown.Menu>
</Dropdown>

With DropdownButton

The DropdownButton can be used to shorten the JSX required to create a dropdown with a toggle button.

Result

Loading...

Live Editor

<DropdownButton title="Button" menuRole="menu"> <Dropdown.Item>Apple</Dropdown.Item> <Dropdown.Item>Banana</Dropdown.Item> <Dropdown.Item>Cantaloupe</Dropdown.Item> </DropdownButton>

<DropdownButton title="Button" menuRole="menu">
    <Dropdown.Item>Apple</Dropdown.Item>
    <Dropdown.Item>Banana</Dropdown.Item>
    <Dropdown.Item>Cantaloupe</Dropdown.Item>
</DropdownButton>

With headers and dividers

Result

Loading...

Live Editor

<Dropdown.Menu show className="position-relative"> <Dropdown.Header>Fruit</Dropdown.Header> <Dropdown.Item>Apple</Dropdown.Item> <Dropdown.Item>Banana</Dropdown.Item> <Dropdown.Item>Cantaloupe</Dropdown.Item> <Dropdown.Divider /> <Dropdown.Header>Vegetables</Dropdown.Header> <Dropdown.Item>Asparagus</Dropdown.Item> <Dropdown.Item>Broccoli</Dropdown.Item> <Dropdown.Item>Carrot</Dropdown.Item> </Dropdown.Menu>

<Dropdown.Menu show className="position-relative">
    <Dropdown.Header>Fruit</Dropdown.Header>
    <Dropdown.Item>Apple</Dropdown.Item>
    <Dropdown.Item>Banana</Dropdown.Item>
    <Dropdown.Item>Cantaloupe</Dropdown.Item>
    <Dropdown.Divider />
    <Dropdown.Header>Vegetables</Dropdown.Header>
    <Dropdown.Item>Asparagus</Dropdown.Item>
    <Dropdown.Item>Broccoli</Dropdown.Item>
    <Dropdown.Item>Carrot</Dropdown.Item>
</Dropdown.Menu>

With multiple columns

Columns can be created with layout options (flex, grid, etc.).

Result

Loading...

Live Editor

<Dropdown> <Dropdown.Toggle>Toggle</Dropdown.Toggle> <Dropdown.Menu role="menu"> <div className="d-flex align-items-stretch"> <div> <Dropdown.Header>Fruit</Dropdown.Header> <Dropdown.Item>Apple</Dropdown.Item> <Dropdown.Item>Banana</Dropdown.Item> <Dropdown.Item>Cantaloupe</Dropdown.Item> </div> <div> <Dropdown.Header>Vegetables</Dropdown.Header> <Dropdown.Item>Asparagus</Dropdown.Item> <Dropdown.Item>Broccoli</Dropdown.Item> <Dropdown.Item>Carrot</Dropdown.Item> </div> </div> </Dropdown.Menu> </Dropdown>

<Dropdown>
    <Dropdown.Toggle>Toggle</Dropdown.Toggle>

    <Dropdown.Menu role="menu">
        <div className="d-flex align-items-stretch">
            <div>
                <Dropdown.Header>Fruit</Dropdown.Header>
                <Dropdown.Item>Apple</Dropdown.Item>
                <Dropdown.Item>Banana</Dropdown.Item>
                <Dropdown.Item>Cantaloupe</Dropdown.Item>
            </div>
            <div>
                <Dropdown.Header>Vegetables</Dropdown.Header>
                <Dropdown.Item>Asparagus</Dropdown.Item>
                <Dropdown.Item>Broccoli</Dropdown.Item>
                <Dropdown.Item>Carrot</Dropdown.Item>
            </div>
        </div>
    </Dropdown.Menu>
</Dropdown>

With non-interactive items

The Dropdown.ItemText component can be used to create non-interactive items.

Result

Loading...

Live Editor

<Dropdown> <Dropdown.Toggle>Toggle</Dropdown.Toggle> <Dropdown.Menu role="menu"> <Dropdown.Item>Apple</Dropdown.Item> <Dropdown.Item>Banana</Dropdown.Item> <Dropdown.Item>Cantaloupe</Dropdown.Item> <Dropdown.ItemText>There are no more fruit to see here.</Dropdown.ItemText> </Dropdown.Menu> </Dropdown>

<Dropdown>
    <Dropdown.Toggle>Toggle</Dropdown.Toggle>

    <Dropdown.Menu role="menu">
        <Dropdown.Item>Apple</Dropdown.Item>
        <Dropdown.Item>Banana</Dropdown.Item>
        <Dropdown.Item>Cantaloupe</Dropdown.Item>
        <Dropdown.ItemText>There are no more fruit to see here.</Dropdown.ItemText>
    </Dropdown.Menu>
</Dropdown>

With form inputs

Result

Loading...

Live Editor

<Dropdown> <Dropdown.Toggle>Toggle</Dropdown.Toggle> <Dropdown.Menu role="menu"> <Dropdown.Item> <Radio label="Radio" /> </Dropdown.Item> <Dropdown.Item> <Checkbox label="Checkbox" /> </Dropdown.Item> <Dropdown.Item> <Switch label="Switch" /> </Dropdown.Item> </Dropdown.Menu> </Dropdown>

<Dropdown>
    <Dropdown.Toggle>Toggle</Dropdown.Toggle>
    <Dropdown.Menu role="menu">
        <Dropdown.Item>
            <Radio label="Radio" />
        </Dropdown.Item>
        <Dropdown.Item>
            <Checkbox label="Checkbox" />
        </Dropdown.Item>
        <Dropdown.Item>
            <Switch label="Switch" />
        </Dropdown.Item>
    </Dropdown.Menu>
</Dropdown>

With icons

Result

Loading...

Live Editor

<Dropdown> <Dropdown.Toggle>Toggle</Dropdown.Toggle> <Dropdown.Menu role="menu"> <Dropdown.Item> <DropdownItemContent renderPrefix={() => <span className="icon-trash-01 me-2" />} renderTitle={() => 'Menu Item'} /> </Dropdown.Item> <Dropdown.Item> <DropdownItemContent renderSuffix={() => <span className="icon-trash-01 me-2" />} renderTitle={() => 'Menu Item'} /> </Dropdown.Item> <Dropdown.Item> <DropdownItemContent renderTitle={() => 'Menu Item'} renderSuffix={() => <span className="icon-trash-01 ms-2" />} showChevron /> </Dropdown.Item> </Dropdown.Menu> </Dropdown>

<Dropdown>
    <Dropdown.Toggle>Toggle</Dropdown.Toggle>
    <Dropdown.Menu role="menu">
        <Dropdown.Item>
            <DropdownItemContent
                renderPrefix={() => <span className="icon-trash-01 me-2" />}
                renderTitle={() => 'Menu Item'}
            />
        </Dropdown.Item>
        <Dropdown.Item>
            <DropdownItemContent
                renderSuffix={() => <span className="icon-trash-01 me-2" />}
                renderTitle={() => 'Menu Item'}
            />
        </Dropdown.Item>
        <Dropdown.Item>
            <DropdownItemContent
                renderTitle={() => 'Menu Item'}
                renderSuffix={() => <span className="icon-trash-01 ms-2" />}
                showChevron
            />
        </Dropdown.Item>
    </Dropdown.Menu>
</Dropdown>

With badges

Result

Loading...

Live Editor

<Dropdown> <Dropdown.Toggle>Toggle</Dropdown.Toggle> <Dropdown.Menu role="menu"> <Dropdown.Item> <DropdownItemContent renderBadgeLeft={(badgeProps) => <Badge {...badgeProps}>1</Badge>} renderTitle={() => 'Menu Item'} /> </Dropdown.Item> <Dropdown.Item> <DropdownItemContent renderTitle={() => 'Menu Item'} renderBadgeRight={(badgeProps) => <Badge {...badgeProps}>1</Badge>} /> </Dropdown.Item> <Dropdown.Item> <DropdownItemContent renderTitle={() => 'Menu Item'} renderBadgeRight={(badgeProps) => <Badge {...badgeProps}>1</Badge>} showChevron /> </Dropdown.Item> </Dropdown.Menu> </Dropdown>

<Dropdown>
    <Dropdown.Toggle>Toggle</Dropdown.Toggle>
    <Dropdown.Menu role="menu">
        <Dropdown.Item>
            <DropdownItemContent
                renderBadgeLeft={(badgeProps) => <Badge {...badgeProps}>1</Badge>}
                renderTitle={() => 'Menu Item'}
            />
        </Dropdown.Item>
        <Dropdown.Item>
            <DropdownItemContent
                renderTitle={() => 'Menu Item'}
                renderBadgeRight={(badgeProps) => <Badge {...badgeProps}>1</Badge>}
            />
        </Dropdown.Item>
        <Dropdown.Item>
            <DropdownItemContent
                renderTitle={() => 'Menu Item'}
                renderBadgeRight={(badgeProps) => <Badge {...badgeProps}>1</Badge>}
                showChevron
            />
        </Dropdown.Item>
    </Dropdown.Menu>
</Dropdown>

With links

Result

Loading...

Live Editor