Dropdowns
Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin
Example
Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.
'use client';
import { Dropdown } from 'react-bootstrap';
<Dropdown>
<Dropdown.Toggle variant="secondary">Dropdown Button</Dropdown.Toggle>
<Dropdown.Menu>
<div className="dropdown-content">
<ul className="link-list link-list-hover-bg-primary link-list-md">
<li>
<Dropdown.Item href="/">
<Icon icon="eye" className="icon" />Quick Preview
</Dropdown.Item>
</li>
<li>
<Dropdown.Item href="/">
<Icon icon="edit" className="icon" />Rename
</Dropdown.Item>
</li>
<li>
<Dropdown.Item href="/">
<Icon icon="trash" className="icon" />Discard Draft
</Dropdown.Item>
<Dropdown.Divider />
</li>
<li>
<Dropdown.Item href="/">
<Icon icon="eye" className="icon" />Explore More
</Dropdown.Item>
</li>
</ul>
</div>
</Dropdown.Menu>
</Dropdown>
Split button
Similarly, You create a split dropdown by combining the Dropdown components with another Button and a ButtonGroup.
'use client';
import {Button} from 'react-bootstrap';
import {ButtonGroup} from 'react-bootstrap';
import {Dropdown} from 'react-bootstrap';
export default function Example() {
return (
<Dropdown as={ButtonGroup}>
<Button variant="success">Split Button</Button>
<Dropdown.Toggle split variant="success" id="dropdown-split-basic" />
<Dropdown.Menu>
<Dropdown.Item href="#/action-1">Action</Dropdown.Item>
<Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
<Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
);
}
Drop directions
Trigger dropdown menus above, below, left, or to the right of their toggle elements, with the drop prop.
'use client';
import {Dropdown} from 'react-bootstrap';
import {DropdownButton} from 'react-bootstrap';
export default function Example() {
return (
{['up', 'up-centered', 'down', 'down-centered', 'start', 'end'].map(
direction => (
<DropdownButton
as={ButtonGroup}
key={direction}
drop={direction}
variant="secondary"
>
<div className="dropdown-content">
<ul className="link-list link-list-hover-bg-primary link-list-md">
<li>
<Dropdown.Item href="/">
<Icon icon="eye" className="icon" />
Quick Preview
</Dropdown.Item>
</li>
<li>
<Dropdown.Item href="/">
<Icon icon="edit" className="icon" />
Rename
</Dropdown.Item>
</li>
<li>
<Dropdown.Item href="/">
<Icon icon="trash" className="icon" />
Discard Draft
</Dropdown.Item>
<Dropdown.Divider />
</li>
<li>
<Dropdown.Item href="/">
<Icon icon="eye" className="icon" />
Explore More
</Dropdown.Item>
</li>
</ul>
</div>
</DropdownButton>
),
)}
)
}