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

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

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

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

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

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

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

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

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

Live Editor

<Dropdown>
    <Dropdown.Toggle>Toggle</Dropdown.Toggle>
    <Dropdown.Menu role="menu">
        <Dropdown.Item>
            <DropdownItemContent
                renderTitle={() => 'Menu Item'}
                renderSuffix={() => (
                    <a className="fs-xxs ms-2" href="/">
                        Link
                    </a>
                )}
            />
        </Dropdown.Item>
        <Dropdown.Item>
            <DropdownItemContent
                renderTitle={() => 'Menu Item'}
                renderSuffix={() => (
                    <a className="fs-xxs ms-2" href="/">
                        Link
                    </a>
                )}
            />
        </Dropdown.Item>
    </Dropdown.Menu>
</Dropdown>

<Dropdown>
    <Dropdown.Toggle>Toggle</Dropdown.Toggle>
    <Dropdown.Menu role="menu">
        <Dropdown.Item>
            <DropdownItemContent
                renderTitle={() => 'Menu Item'}
                renderSuffix={() => (
                    <a className="fs-xxs ms-2" href="/">
                        Link
                    </a>
                )}
            />
        </Dropdown.Item>
        <Dropdown.Item>
            <DropdownItemContent
                renderTitle={() => 'Menu Item'}
                renderSuffix={() => (
                    <a className="fs-xxs ms-2" href="/">
                        Link
                    </a>
                )}
            />
        </Dropdown.Item>
    </Dropdown.Menu>
</Dropdown>

With helper text

Result

Live Editor

<Dropdown>
    <Dropdown.Toggle>Toggle</Dropdown.Toggle>
    <Dropdown.Menu role="menu">
        <Dropdown.Item>
            <DropdownItemContent renderTitle={() => 'Menu Item'} renderHelper={() => '⌘C'} />
        </Dropdown.Item>
        <Dropdown.Item>
            <DropdownItemContent renderTitle={() => 'Menu Item'} renderHelper={() => '⌘C'} />
        </Dropdown.Item>
        <Dropdown.Item>
            <DropdownItemContent
                renderTitle={() => 'Menu Item'}
                renderHelper={() => '⌘C'}
                renderBadgeRight={(badgeProps) => <Badge {...badgeProps}>1</Badge>}
            />
        </Dropdown.Item>
        <Dropdown.Item>
            <DropdownItemContent
                renderTitle={() => 'Menu Item'}
                renderHelper={() => '⌘C'}
                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 renderTitle={() => 'Menu Item'} renderHelper={() => '⌘C'} />
        </Dropdown.Item>
        <Dropdown.Item>
            <DropdownItemContent renderTitle={() => 'Menu Item'} renderHelper={() => '⌘C'} />
        </Dropdown.Item>
        <Dropdown.Item>
            <DropdownItemContent
                renderTitle={() => 'Menu Item'}
                renderHelper={() => '⌘C'}
                renderBadgeRight={(badgeProps) => <Badge {...badgeProps}>1</Badge>}
            />
        </Dropdown.Item>
        <Dropdown.Item>
            <DropdownItemContent
                renderTitle={() => 'Menu Item'}
                renderHelper={() => '⌘C'}
                renderBadgeRight={(badgeProps) => <Badge {...badgeProps}>1</Badge>}
                showChevron
            />
        </Dropdown.Item>
    </Dropdown.Menu>
</Dropdown>

With nested items

Result

Live Editor

function NestedItems() {
    const menu = {
        header: 'Very Awesome Column',
        options: [
            {
                label: 'Option 1',
                value: 'option1',
                header: 'Awesome Sub-Column 1',
                options: [
                    {
                        label: 'Option 1-1',
                        value: 'option1-1',
                    },
                    {
                        label: 'Option 1-2',
                        value: 'option1-2',
                    },
                ],
            },
            {
                label: 'Option 2',
                value: 'option2',
                header: 'Awesome Sub-Column 2',
                options: [
                    {
                        label: 'Option 2-1',
                        value: 'option2-1',
                    },
                ],
            },
            {
                label: 'Option 3',
                value: 'option3',
                header: 'Awesome Sub-Column 3',
                options: [
                    {
                        label: 'Option 3-1',
                        value: 'option3-1',
                    },
                    {
                        label: 'Option 3-2',
                        value: 'option3-2',
                    },
                    {
                        label: 'Option 3-3',
                        value: 'option3-3',
                    },
                    {
                        label: 'Option 4-3',
                        value: 'option4-3',
                    },
                ],
            },
            {
                label: 'Option 4',
                value: 'option4',
            },
        ],
    };

    const [activeOption, setActiveOption] = useState(null);
    const activeColumn = menu.options.find((column) => column.value === activeOption);

    return (
        <Dropdown onToggle={() => setActiveOption(null)}>
            <Dropdown.Toggle>Nested Dropdown</Dropdown.Toggle>
            <Dropdown.Menu role="menu">
                <div className="d-flex align-items-stretch">
                    <div>
                        <Dropdown.Header>{menu.header}</Dropdown.Header>
                        {menu.options.map((column, index) => (
                            <Dropdown.Item
                                key={index}
                                active={activeOption === column.value}
                                onClick={(e) => {
                                    e.stopPropagation();
                                    setActiveOption(column.value);
                                }}
                            >
                                <DropdownItemContent renderTitle={() => column.label} showChevron />
                            </Dropdown.Item>
                        ))}
                    </div>
                    {activeColumn && activeColumn.options && (
                        <div className="border-start">
                            <Dropdown.Header>{activeColumn.header}</Dropdown.Header>
                            {activeColumn.options.map((option, index) => (
                                <Dropdown.Item key={index}>{option.label}</Dropdown.Item>
                            ))}
                        </div>
                    )}
                </div>
            </Dropdown.Menu>
        </Dropdown>
    );
}

function NestedItems() {
    const menu = {
        header: 'Very Awesome Column',
        options: [
            {
                label: 'Option 1',
                value: 'option1',
                header: 'Awesome Sub-Column 1',
                options: [
                    {
                        label: 'Option 1-1',
                        value: 'option1-1',
                    },
                    {
                        label: 'Option 1-2',
                        value: 'option1-2',
                    },
                ],
            },
            {
                label: 'Option 2',
                value: 'option2',
                header: 'Awesome Sub-Column 2',
                options: [
                    {
                        label: 'Option 2-1',
                        value: 'option2-1',
                    },
                ],
            },
            {
                label: 'Option 3',
                value: 'option3',
                header: 'Awesome Sub-Column 3',
                options: [
                    {
                        label: 'Option 3-1',
                        value: 'option3-1',
                    },
                    {
                        label: 'Option 3-2',
                        value: 'option3-2',
                    },
                    {
                        label: 'Option 3-3',
                        value: 'option3-3',
                    },
                    {
                        label: 'Option 4-3',
                        value: 'option4-3',
                    },
                ],
            },
            {
                label: 'Option 4',
                value: 'option4',
            },
        ],
    };

    const [activeOption, setActiveOption] = useState(null);
    const activeColumn = menu.options.find((column) => column.value === activeOption);

    return (
        <Dropdown onToggle={() => setActiveOption(null)}>
            <Dropdown.Toggle>Nested Dropdown</Dropdown.Toggle>
            <Dropdown.Menu role="menu">
                <div className="d-flex align-items-stretch">
                    <div>
                        <Dropdown.Header>{menu.header}</Dropdown.Header>
                        {menu.options.map((column, index) => (
                            <Dropdown.Item
                                key={index}
                                active={activeOption === column.value}
                                onClick={(e) => {
                                    e.stopPropagation();
                                    setActiveOption(column.value);
                                }}
                            >
                                <DropdownItemContent renderTitle={() => column.label} showChevron />
                            </Dropdown.Item>
                        ))}
                    </div>
                    {activeColumn && activeColumn.options && (
                        <div className="border-start">
                            <Dropdown.Header>{activeColumn.header}</Dropdown.Header>
                            {activeColumn.options.map((option, index) => (
                                <Dropdown.Item key={index}>{option.label}</Dropdown.Item>
                            ))}
                        </div>
                    )}
                </div>
            </Dropdown.Menu>
        </Dropdown>
    );
}

MultiLineDropdownItem

Result

Live Editor

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

    <Dropdown.Menu role="menu">
        <MultiLineDropdownItem title="Fruit">Apple</MultiLineDropdownItem>
        <MultiLineDropdownItem title="Fruit">Banana</MultiLineDropdownItem>
        <MultiLineDropdownItem title="Fruit">Cantaloupe</MultiLineDropdownItem>
    </Dropdown.Menu>
</Dropdown>

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

    <Dropdown.Menu role="menu">
        <MultiLineDropdownItem title="Fruit">Apple</MultiLineDropdownItem>
        <MultiLineDropdownItem title="Fruit">Banana</MultiLineDropdownItem>
        <MultiLineDropdownItem title="Fruit">Cantaloupe</MultiLineDropdownItem>
    </Dropdown.Menu>
</Dropdown>

Analytics

The DropdownItem component is trackable through Kyber Analytics. This is the default analytics config.

export default {
	value: 'DropdownItem',
	actions: {
		onClick: { type: 'DROPDOWNITEM_CLICK', payload: 'Click' },
	},
};

Props

DropdownItem

DropdownItemContent

MultiLineDropdownItem

The MultiLineDropdownItem component is trackable through Kyber Analytics. This is the default analytics config.

export default {
	value: 'MultiLineDropdownItem',
	actions: {
		onClick: { type: 'DROPDOWNITEM_CLICK', payload: 'Click' },
	},
};

With DropdownButton​

With headers and dividers​

With multiple columns​

With non-interactive items​

With form inputs​

With icons​

With badges​

With links​

With helper text​

With nested items​

MultiLineDropdownItem​

Analytics​

Props​

Dropdown​

DropdownItem​

DropdownItemContent​

MultiLineDropdownItem​

With DropdownButton

With headers and dividers

With multiple columns

With non-interactive items

With form inputs

With icons

With badges

With links

With helper text

With nested items

MultiLineDropdownItem

Analytics

Props

Dropdown

DropdownItem

DropdownItemContent

MultiLineDropdownItem