Basic Dropdown
A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list
<div className="basic-dropdown">
<Dropdown>
<Dropdown.Toggle variant="primary">
Dropdown button
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item >Link 1</Dropdown.Item>
<Dropdown.Item >Link 2</Dropdown.Item>
<Dropdown.Item >Link 3</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</div>
Dropdown Divider
The .dropdown-divider class is used to separate links inside the dropdown menu with a thin horizontal border
<div className="basic-dropdown">
<Dropdown>
<Dropdown.Toggle variant="primary">
Dropdown button
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item >Link 1</Dropdown.Item>
<Dropdown.Item >Link 2</Dropdown.Item>
<Dropdown.Item >Link 3</Dropdown.Item>
<div className="dropdown-divider"></div>
<Dropdown.Item >Another link</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</div>
Dropdown Header
The .dropdown-header class is used to add headers inside the dropdown menu
<div className="basic-dropdown">
<Dropdown>
<Dropdown.Toggle variant="primary">
Dropdown button
</Dropdown.Toggle>
<Dropdown.Menu>
<h5 className="dropdown-header">Dropdown header</h5>
<Dropdown.Item >Link 1</Dropdown.Item>
<Dropdown.Item >Link 2</Dropdown.Item>
<Dropdown.Item >Link 3</Dropdown.Item>
<h5 className="dropdown-header">Dropdown header</h5>
<Dropdown.Item >Another link</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</div>
Disable and Active items
The .dropdown-header class is used to add headers inside the dropdown menu
<div className="basic-dropdown">
<Dropdown>
<Dropdown.Toggle variant="primary">
Dropdown button
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item >Normal</Dropdown.Item>
<Link to={"#"} className="dropdown-item active">
Active
</Link>
<Link to={"#"} className="dropdown-item disabled">
Disabled
</Link>
</Dropdown.Menu>
</Dropdown>
</div>
Align Right
To right-align the dropdown, add the .dropdown-menu-end class to the element with .dropdown-menu
<div className="basic-dropdown">
<Dropdown>
<Dropdown.Toggle variant="primary">
Dropdown button
</Dropdown.Toggle>
<Dropdown.Menu className="dropdown-menu-right">
<Dropdown.Item >Link 1</Dropdown.Item>
<Dropdown.Item >Link 2</Dropdown.Item>
<Dropdown.Item >Link 3</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</div>
Dropup
The .dropup class makes the dropdown menu expand upwards instead of downwards
<div className="basic-dropdown">
<DropdownButton
as={ButtonGroup}
id="dropdown-button-drop-up"
drop="up"
variant="primary"
title="Dropup"
className="me-1 mt-1"
>
<Dropdown.Item >Link 1</Dropdown.Item>
<Dropdown.Item >Link 2</Dropdown.Item>
<Dropdown.Item >Link 3</Dropdown.Item>
</DropdownButton>
<SplitButton
as={ButtonGroup}
variant="primary"
id="dropdown-button-drop-up"
className="mt-1"
drop="up"
title="Split dropup"
>
<Dropdown.Item >Link 1</Dropdown.Item>
<Dropdown.Item >Link 2</Dropdown.Item>
<Dropdown.Item >Link 3</Dropdown.Item>
</SplitButton>
</div>
Dropright
Trigger dropdown menus at the right of the elements by adding .dropend to the parent element
<div className="basic-dropdown">
<div className="btn-group dropright ">
<DropdownButton
as={ButtonGroup}
id="dropdown-button-drop-right"
drop="right"
variant="primary"
title=" Dropright"
className="me-1 mb-1"
>
<Dropdown.Item >Link 1</Dropdown.Item>
<Dropdown.Item >Link 2</Dropdown.Item>
<Dropdown.Item >Link 3</Dropdown.Item>
</DropdownButton>
</div>
<div className="btn-group dropright ">
<SplitButton
as={ButtonGroup}
variant="primary"
id="dropdown-button-drop-right"
className="mb-1 me-1"
drop="right"
title="Split dropright"
>
<Dropdown.Item >Link 1</Dropdown.Item>
<Dropdown.Item >Link 2</Dropdown.Item>
<Dropdown.Item >Link 3</Dropdown.Item>
</SplitButton>
</div>
</div>
Dropstart
Trigger dropdown menus at the right of the elements by adding .dropstart to the parent element
<div className="basic-dropdown">
<DropdownButton
as={ButtonGroup}
id="dropdown-button-drop-start"
drop="start"
variant="primary"
className="dropstart me-1 mt-1"
title="dropstart"
>
<Dropdown.Item >Link 1</Dropdown.Item>
<Dropdown.Item >Link 2</Dropdown.Item>
<Dropdown.Item >Link 3</Dropdown.Item>
</DropdownButton>
<div className="btn-group ">
<SplitButton
as={ButtonGroup}
variant="primary"
id="dropdown-button-drop-start"
className="dropstart mt-1"
drop="start"
title="Split dropstart"
>
<Dropdown.Item >Link 1</Dropdown.Item>
<Dropdown.Item >Link 2</Dropdown.Item>
<Dropdown.Item >Link 3</Dropdown.Item>
</SplitButton>
</div>
</div>
Button Dropdowns
<div className="button-dropdown">
{[
"Primary",
"Secondary",
"Success",
"Info",
"Warning",
"Danger",
].map((variant) => (
<SplitButton
key={variant}
as={ButtonGroup}
variant={variant.toLowerCase()}
id="dropdown-button-drop-dwon"
className="mt-1 me-1"
drop="down"
title={` ${variant}`}
>
<Dropdown.Item >Link 1</Dropdown.Item>
<Dropdown.Item >Link 2</Dropdown.Item>
<Dropdown.Item >Link 3</Dropdown.Item>
</SplitButton>
))}
</div>
Sizing
Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.
<div className="dropdown-size">
<DropdownButton
as={ButtonGroup}
id="dropdown-button-drop-down"
drop="down"
variant="primary"
size="lg"
title=" Large button"
className="me-1 mb-1"
>
<Dropdown.Item >Action</Dropdown.Item>
<Dropdown.Item >Another action</Dropdown.Item>
<Dropdown.Item >Something else here</Dropdown.Item>
<div className="dropdown-divider"></div>
<Dropdown.Item >Separated link</Dropdown.Item>
</DropdownButton>
<SplitButton
as={ButtonGroup}
id="dropdown-button-drop-down"
drop="down"
variant="primary"
size="lg"
title=" Large split button"
className="me-1"
>
<Dropdown.Item >Action</Dropdown.Item>
<Dropdown.Item >Another action</Dropdown.Item>
<Dropdown.Item >Something else here</Dropdown.Item>
<div className="dropdown-divider"></div>
<Dropdown.Item >Separated link</Dropdown.Item>
</SplitButton>
<DropdownButton
as={ButtonGroup}
id="dropdown-button-drop-down"
drop="down"
variant="primary"
size="sm"
className="mt-1 me-1"
title=" Large button"
>
<Dropdown.Item >Action</Dropdown.Item>
<Dropdown.Item >Another action</Dropdown.Item>
<Dropdown.Item >Something else here</Dropdown.Item>
<div className="dropdown-divider"></div>
<Dropdown.Item >Separated link</Dropdown.Item>
</DropdownButton>
<SplitButton
as={ButtonGroup}
id="dropdown-button-drop-down"
drop="down"
variant="primary"
size="sm"
title=" Large split button"
className="mt-1 me-1"
>
<Dropdown.Item >Action</Dropdown.Item>
<Dropdown.Item >Another action</Dropdown.Item>
<Dropdown.Item >Something else here</Dropdown.Item>
<div className="dropdown-divider"></div>
<Dropdown.Item >Separated link</Dropdown.Item>
</SplitButton>
</div>
Custom style
Use .custom-dropdown this class for this style
<Row>
<Col xl={3}>
<Dropdown>
<Dropdown.Toggle variant="" className="ps-0 mt-1 mb-2">
Last 7 days
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item >Last 1 Month</Dropdown.Item>
<Dropdown.Item >Last 6 Month</Dropdown.Item>
<Dropdown.Item >Last 10 Month</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</Col>
<Col xl={3}>
<Dropdown>
<Dropdown.Toggle
variant="outline-primary"
size="sm"
className="mt-1 mb-2"
>
Last 7 days
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item >Last 1 Month</Dropdown.Item>
<Dropdown.Item >Last 6 Month</Dropdown.Item>
<Dropdown.Item >Last 10 Month</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</Col>
<Col xl={3}>
<Dropdown>
<Dropdown.Toggle
variant="outline-primary"
size="sm"
className="mt-1 mb-2"
>
Last 1 Hour
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item >Last 1 hour</Dropdown.Item>
<Dropdown.Item >Last 2 hour</Dropdown.Item>
<Dropdown.Item >Last 3 hour</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</Col>
<Col xl={3}>
<Dropdown>
<Dropdown.Toggle
variant="primary"
size="sm"
className="mt-1 mb-2"
>
Last 1 Hour
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item >Last 1 hour</Dropdown.Item>
<Dropdown.Item >Last 2 hour</Dropdown.Item>
<Dropdown.Item >Last 3 hour</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</Col>
<Col xl={3}>
<Dropdown>
<Dropdown.Toggle
variant="primary"
className="btn btn-sm btn-primary mt-1 mb-2"
data-toggle="dropdown"
>
<i className="ti-search m-r-5" /> 3 AM
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item >6 AM</Dropdown.Item>
<Dropdown.Item >9 AM</Dropdown.Item>
<Dropdown.Item >12 AM</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</Col>
<Col xl={3}>
<Dropdown>
<Dropdown.Toggle
variant="primary"
size="sm"
id="whiteSpace"
className="mt-1 mb-2"
>
<i className="ti-calendar m-r-5" /> March 20, 2018
To April 20, 2018
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item >
May 20, 2018 To June 20, 2018
</Dropdown.Item>
<Dropdown.Item >
July 20, 2018 To August 20, 2018
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</Col>
<Col xl={3}>
<Dropdown>
<Dropdown.Toggle
as="button"
variant=""
className="btn sharp btn-primary tp-btn mt-1"
id="tp-btn"
>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
width="18px"
height="18px"
viewBox="0 0 24 24"
version="1.1"
>
<g
stroke="none"
strokeWidth="1"
fill="none"
fillRule="evenodd"
>
<rect x="0" y="0" width="24" height="24" />
<circle fill="#000000" cx="12" cy="5" r="2" />
<circle fill="#000000" cx="12" cy="12" r="2" />
<circle fill="#000000" cx="12" cy="19" r="2" />
</g>
</svg>
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item >Option 1</Dropdown.Item>
<Dropdown.Item >Option 2</Dropdown.Item>
<Dropdown.Item >Option 3</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</Col>
<Col xl={3}>
<Dropdown>
<Dropdown.Toggle
as="button"
variant=""
className="btn sharp btn-primary tp-btn mt-1"
id="tp-btn"
>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
width="18px"
height="18px"
viewBox="0 0 24 24"
version="1.1"
>
<g
stroke="none"
strokeWidth="1"
fill="none"
fillRule="evenodd"
>
<rect x="0" y="0" width="24" height="24" />
<circle fill="#000000" cx="12" cy="5" r="2" />
<circle fill="#000000" cx="12" cy="12" r="2" />
<circle fill="#000000" cx="12" cy="19" r="2" />
</g>
</svg>
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item >Option 1</Dropdown.Item>
<Dropdown.Item >Option 2</Dropdown.Item>
<Dropdown.Item >Option 3</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</Col>
</Row>