Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.
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>
<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>
The best part is you can do this with any button variant, too:
{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map((variant) => (<DropdownButtonas={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>),)}
Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.
{[DropdownButton, SplitButton].map((DropdownType, idx) => (<DropdownTypeas={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) => (<DropdownTypeas={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>))}
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) => (<DropdownButtonas={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) => (<SplitButtonkey={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>
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"><DropdownButtonalign="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"><DropdownButtonalign="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>
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"><DropdownButtonalign={ {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"><DropdownButtonalign={ {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>
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>
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>
Made by Codescandy
Destributed by ThemeWagon