Dropdowns

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

Basic

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.

<Dropdown>
<Dropdown.Toggle variant="secondary" id="dropdown-basic">
Dropdown Button
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item href="#">Action</Dropdown.Item>
<Dropdown.Item href="#">Another action</Dropdown.Item>
<Dropdown.Item href="#">Something else</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>

Split Button

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

<Dropdown as={ButtonGroup}>
<Button variant="secondary">Split Button</Button>
<Dropdown.Toggle split variant="secondary" id="dropdown-split-basic" />
<Dropdown.Menu>
<Dropdown.Item href="#">Action</Dropdown.Item>
<Dropdown.Item href="#">Another action</Dropdown.Item>
<Dropdown.Item href="#">Something else</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>

Options

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

{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
(variant) => (
<DropdownButton
as={ButtonGroup}
key={variant}
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase()}
title={variant}
className="me-1 mb-2 mb-lg-0 "
>
<Dropdown.Item eventKey="1">Action</Dropdown.Item>
<Dropdown.Item eventKey="2">Another action</Dropdown.Item>
<Dropdown.Item eventKey="3"> Something else</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
</DropdownButton>
),
)}

Sizing

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

{[DropdownButton, SplitButton].map((DropdownType, idx) => (
<DropdownType
as={ButtonGroup}
key={idx}
id={`dropdown-button-drop-${idx}`}
size="lg"
variant="secondary"
title={idx===0 ? "Large button" : "Large split button"}
className="me-1 mb-2 mb-lg-0 "
>
<Dropdown.Item eventKey="1">Action</Dropdown.Item>
<Dropdown.Item eventKey="2">Another action</Dropdown.Item>
<Dropdown.Item eventKey="3">Something else here</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
</DropdownType>
))}
{[DropdownButton, SplitButton].map((DropdownType, idx) => (
<DropdownType
as={ButtonGroup}
key={idx}
id={`dropdown-button-drop-${idx}`}
size="sm"
variant="secondary"
title={idx===0 ? "Small button" : "Small split button"}
className="me-1"
>
<Dropdown.Item eventKey="1">Action</Dropdown.Item>
<Dropdown.Item eventKey="2">Another action</Dropdown.Item>
<Dropdown.Item eventKey="3">Something else here</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
</DropdownType>
))}

Directions

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

<div className="mb-2">
{['up', 'down', 'left', 'right'].map((direction) => (
<DropdownButton
as={ButtonGroup}
key={direction}
id={`dropdown-button-drop-${direction}`}
drop={direction}
variant="secondary"
title={` Drop ${direction} `}
className="me-1 mb-2 mb-lg-0"
>
<Dropdown.Item eventKey="1">Action</Dropdown.Item>
<Dropdown.Item eventKey="2">Another action</Dropdown.Item>
<Dropdown.Item eventKey="3">Something else here</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
</DropdownButton>
))}
</div>
<div>
{['up', 'down', 'left', 'right'].map((direction) => (
<SplitButton
key={direction}
id={`dropdown-button-drop-${direction}`}
drop={direction}
variant="secondary"
title={`Drop ${direction}`}
className="me-1 mb-2 mb-lg-0"
>
<Dropdown.Item eventKey="1">Action</Dropdown.Item>
<Dropdown.Item eventKey="2">Another action</Dropdown.Item>
<Dropdown.Item eventKey="3">Something else here</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
</SplitButton>
))}
</div>

Menu Alignment

By default, a dropdown menu is aligned to the left, but you can switch it by passing align="end" to a <Dropdown>, <DropdownButton>, or <SplitButton>.

<ButtonGroup aria-label="Basic example">
<DropdownButton
align="start"
title="Left aligned dropdown "
id="dropdown-menu-align-start"
className="me-1 mb-2 mb-lg-0"
>
<Dropdown.Item eventKey="1">Action</Dropdown.Item>
<Dropdown.Item eventKey="2">
Another action
</Dropdown.Item>
<Dropdown.Item eventKey="3">
Something else here
</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey="4">
Separated link
</Dropdown.Item>
</DropdownButton>
</ButtonGroup>
<ButtonGroup aria-label="Basic example">
<DropdownButton
align="end"
title="Right aligned dropdown "
id="dropdown-menu-align-end"
>
<Dropdown.Item eventKey="1">Action</Dropdown.Item>
<Dropdown.Item eventKey="2">
Another action
</Dropdown.Item>
<Dropdown.Item eventKey="3">
Something else here
</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey="4">
Separated link
</Dropdown.Item>
</DropdownButton>
</ButtonGroup>

Responsive Menu Alignment

If you want to use responsive menu alignment, pass an object containing a breakpoint to the align prop on the <DropdownMenu>, <DropdownButton>, or <SplitButton>. You can specify start or end for the various breakpoints.

<ButtonGroup aria-label="Basic example">
<DropdownButton
align={ {lg : "right"} }
title="Left-aligned but right aligned when large screen"
id="dropdown-menu-align-left"
className="me-1"
>
<Dropdown.Item eventKey="1">Action</Dropdown.Item>
<Dropdown.Item eventKey="2">Another action</Dropdown.Item>
<Dropdown.Item eventKey="3">Something else here</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
</DropdownButton>
</ButtonGroup>
<ButtonGroup aria-label="Basic example">
<DropdownButton
align={ {lg : "left"} }
title="Right aligned but left aligned when large screen"
id="dropdown-menu-align-right"
className="me-1"
>
<Dropdown.Item eventKey="1">Action</Dropdown.Item>
<Dropdown.Item eventKey="2">Another action</Dropdown.Item>
<Dropdown.Item eventKey="3">Something else here</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
</DropdownButton>
</ButtonGroup>

<Dropdown.Menu show className="position-static" >
<Dropdown.Header>Dropdown header</Dropdown.Header>
<Dropdown.Item eventKey="2">Another action</Dropdown.Item>
<Dropdown.Item eventKey="3">Something else here</Dropdown.Item>
</Dropdown.Menu>

Dividers

Separate groups of related menu items with a divider.

<Dropdown.Menu show className="position-static">
<Dropdown.Item eventKey="1">Action</Dropdown.Item>
<Dropdown.Item eventKey="2">Another action</Dropdown.Item>
<Dropdown.Item eventKey="3">Something else here</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
</Dropdown.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.

<Dropdown.Menu show className="position-static">
<Form className="dropdown-form p-4">
<Form.Group className="mb-3" controlId="formBasicEmail">
<Form.Label>Email address</Form.Label>
<Form.Control type="email" placeholder="Enter email" />
<Form.Text className="text-muted">We'll never share your email with anyone else.</Form.Text>
</Form.Group>
<Form.Group className="mb-3" controlId="formBasicPassword">
<Form.Label>Password</Form.Label>
<Form.Control type="password" placeholder="Password" />
</Form.Group>
<Form.Group className="mb-3" controlId="formBasicCheckbox">
<Form.Check type="checkbox" label="Remember me" />
</Form.Group>
<Button variant="primary" type="submit">Sign in</Button>
</Form>
<Dropdown.Divider />
<Dropdown.Item >New around here? Sign up</Dropdown.Item>
<Dropdown.Item >Forgot password?</Dropdown.Item>
</Dropdown.Menu>

<Dropdown.Menu show className="position-static">
<Form className="dropdown-form p-4">
<Form.Group className="mb-3" controlId="formBasicEmail">
<Form.Label>Email address</Form.Label>
<Form.Control type="email" placeholder="Enter email" />
<Form.Text className="text-muted"> We'll never share your email with anyone else. </Form.Text>
</Form.Group>
<Form.Group className="mb-3" controlId="formBasicPassword">
<Form.Label>Password</Form.Label>
<Form.Control type="password" placeholder="Password" />
</Form.Group>
<Form.Group className="mb-3" controlId="formBasicCheckbox">
<Form.Check type="checkbox" label="Remember me" />
</Form.Group>
<Button variant="primary" type="submit">Sign in </Button>
</Form>
</Dropdown.Menu>