Dropdowns
Single button dropdowns
Any single .btn can be turned into Link dropdown toggle with some markup changes.The best part is you can do this with any button variant, too
<div className="text-wrap">
<p>Any single <code className="highlighter-rouge">.btn</code> can be turned into Link dropdown toggle with some markup changes.The best part is you can do this with any button variant, too</p>
<div className="example">
<ButtonGroup className="mt-2 mb-2 me-1">
<Dropdown>
<Dropdown.Toggle variant="default" id="dropdown-basic">
Action
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Header>
Dropdown
</Dropdown.Header>
<Dropdown.Divider />
<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>
</Dropdown.Menu>
</Dropdown>
</ButtonGroup>
<ButtonGroup className="mt-2 mb-2 me-1">
<Dropdown>
<Dropdown.Toggle variant="primary" id="dropdown-basic">
Action
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Header>
Dropdown
</Dropdown.Header>
<Dropdown.Divider className="bg-primary" />
<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>
</Dropdown.Menu>
</Dropdown>
</ButtonGroup>
<ButtonGroup className="mt-2 mb-2 me-1">
<Dropdown>
<Dropdown.Toggle variant="success" id="dropdown-basic">
Action
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Header>
Dropdown
</Dropdown.Header>
<Dropdown.Divider className="bg-success" />
<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>
</Dropdown.Menu>
</Dropdown>
</ButtonGroup>
<ButtonGroup className="mt-2 mb-2 me-1">
<Dropdown>
<Dropdown.Toggle variant="info" id="dropdown-basic">
Action
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Header>
Dropdown
</Dropdown.Header>
<Dropdown.Divider className="bg-info" />
<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>
</Dropdown.Menu>
</Dropdown>
</ButtonGroup>
<ButtonGroup className="mt-2 mb-2 me-1">
<Dropdown>
<Dropdown.Toggle variant="warning" id="dropdown-basic">
Action
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Header>
Dropdown
</Dropdown.Header>
<Dropdown.Divider className="bg-warning" />
<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>
</Dropdown.Menu>
</Dropdown>
</ButtonGroup>
<ButtonGroup className="mt-2 mb-2 me-1">
<Dropdown>
<Dropdown.Toggle variant="danger" id="dropdown-basic">
Action
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Header>
Dropdown
</Dropdown.Header>
<Dropdown.Divider className="bg-danger" />
<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>
</Dropdown.Menu>
</Dropdown>
</ButtonGroup>
</div>
</div>
Single Square outline button dropdowns
Any single .btn can be turned into Link dropdown toggle with some markup changes.The best part is you can do this with any button variant, too
<div className="text-wrap">
<p>Any single <code className="highlighter-rouge">.btn</code> can be turned into Link dropdown toggle with some markup changes.The best part is you can do this with any button variant, too</p>
<div className="example">
<ButtonGroup className="mt-2 mb-2 me-1">
<Dropdown>
<Dropdown.Toggle variant="outline-primary" id="dropdown-basic">
Action
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Header>
Dropdown
</Dropdown.Header>
<Dropdown.Divider className="bg-primary" />
<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>
</Dropdown.Menu>
</Dropdown>
</ButtonGroup>
<ButtonGroup className="mt-2 mb-2 me-1">
<Dropdown>
<Dropdown.Toggle variant="outline-success" id="dropdown-basic">
Action
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Header>
Dropdown
</Dropdown.Header>
<Dropdown.Divider className="bg-success" />
<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>
</Dropdown.Menu>
</Dropdown>
</ButtonGroup>
<ButtonGroup className="mt-2 mb-2 me-1">
<Dropdown>
<Dropdown.Toggle variant="outline-info" id="dropdown-basic">
Action
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Header>
Dropdown
</Dropdown.Header>
<Dropdown.Divider className="bg-info" />
<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>
</Dropdown.Menu>
</Dropdown>
</ButtonGroup>
<ButtonGroup className="mt-2 mb-2 me-1">
<Dropdown>
<Dropdown.Toggle variant="outline-warning" id="dropdown-basic">
Action
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Header>
Dropdown
</Dropdown.Header>
<Dropdown.Divider className="bg-warning" />
<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>
</Dropdown.Menu>
</Dropdown>
</ButtonGroup>
<ButtonGroup className="mt-2 mb-2 me-1">
<Dropdown>
<Dropdown.Toggle variant="outline-danger" id="dropdown-basic">
Action
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Header>
Dropdown
</Dropdown.Header>
<Dropdown.Divider className="bg-danger" />
<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>
</Dropdown.Menu>
</Dropdown>
</ButtonGroup>
</div>
</div>
Single Light button dropdowns
Any single .btn can be turned into Link dropdown toggle with some markup changes.The best part is you can do this with any button variant, too
<div className="text-wrap">
<p>Any single <code className="highlighter-rouge">.btn</code> can be turned into Link dropdown toggle with some markup changes.The best part is you can do this with any button variant, too</p>
<div className="example">
<ButtonGroup className="mt-2 mb-2 me-1">
<Dropdown>
<Dropdown.Toggle variant="default-light" id="dropdown-basic">
Action
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Header>
Dropdown
</Dropdown.Header>
<Dropdown.Divider />
<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>
</Dropdown.Menu>
</Dropdown>
</ButtonGroup>
<ButtonGroup className="mt-2 mb-2 me-1">
<Dropdown>
<Dropdown.Toggle variant="primary-light" id="dropdown-basic">
Action
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Header>
Dropdown
</Dropdown.Header>
<Dropdown.Divider />
<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>
</Dropdown.Menu>
</Dropdown>
</ButtonGroup>
<ButtonGroup className="mt-2 mb-2 me-1">
<Dropdown>
<Dropdown.Toggle variant="success-light" id="dropdown-basic">
Action
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Header>
Dropdown
</Dropdown.Header>
<Dropdown.Divider />
<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>
</Dropdown.Menu>
</Dropdown>
</ButtonGroup>
<ButtonGroup className="mt-2 mb-2 me-1">
<Dropdown>
<Dropdown.Toggle variant="info-light" id="dropdown-basic">
Action
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Header>
Dropdown
</Dropdown.Header>
<Dropdown.Divider />
<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>
</Dropdown.Menu>
</Dropdown>
</ButtonGroup>
<ButtonGroup className="mt-2 mb-2 me-1">
<Dropdown>
<Dropdown.Toggle variant="warning-light" id="dropdown-basic">
Action
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Header>
Dropdown
</Dropdown.Header>
<Dropdown.Divider />
<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>
</Dropdown.Menu>
</Dropdown>
</ButtonGroup>
<ButtonGroup className="mt-2 mb-2 me-1">
<Dropdown>
<Dropdown.Toggle variant="danger-light" id="dropdown-basic">
Action
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Header>
Dropdown
</Dropdown.Header>
<Dropdown.Divider />
<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>
</Dropdown.Menu>
</Dropdown>
</ButtonGroup>
</div>
</div>Rounded Light button dropdowns
Any single .btn can be turned into Link dropdown toggle with some markup changes.The best part is you can do this with any button variant, too
<div className="text-wrap">
<p>Any single <code className="highlighter-rouge">.btn</code> can be turned into Link dropdown toggle with some markup changes.The best part is you can do this with any button variant, too</p>
<div className="example">
<ButtonGroup className="mt-2 mb-2 me-1">
<Dropdown>
<Dropdown.Toggle className='btn-pill' variant="default-light" id="dropdown-basic">
Action
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Header>
Dropdown
</Dropdown.Header>
<Dropdown.Divider />
<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>
</Dropdown.Menu>
</Dropdown>
</ButtonGroup>
<ButtonGroup className="mt-2 mb-2 me-1">
<Dropdown>
<Dropdown.Toggle className='btn-pill' variant="primary-light" id="dropdown-basic">
Action
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Header>
Dropdown
</Dropdown.Header>
<Dropdown.Divider />
<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>
</Dropdown.Menu>
</Dropdown>
</ButtonGroup>
<ButtonGroup className="mt-2 mb-2 me-1">
<Dropdown>
<Dropdown.Toggle className='btn-pill' variant="success-light" id="dropdown-basic">
Action
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Header>
Dropdown
</Dropdown.Header>
<Dropdown.Divider />
<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>
</Dropdown.Menu>
</Dropdown>
</ButtonGroup>
<ButtonGroup className="mt-2 mb-2 me-1">
<Dropdown>
<Dropdown.Toggle className='btn-pill' variant="info-light" id="dropdown-basic">
Action
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Header>
Dropdown
</Dropdown.Header>
<Dropdown.Divider />
<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>
</Dropdown.Menu>
</Dropdown>
</ButtonGroup>
<ButtonGroup className="mt-2 mb-2 me-1">
<Dropdown>
<Dropdown.Toggle className='btn-pill' variant="warning-light" id="dropdown-basic">
Action
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Header>
Dropdown
</Dropdown.Header>
<Dropdown.Divider />
<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>
</Dropdown.Menu>
</Dropdown>
</ButtonGroup>
<ButtonGroup className="mt-2 mb-2 me-1">
<Dropdown>
<Dropdown.Toggle className='btn-pill' variant="danger-light" id="dropdown-basic">
Action
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Header>
Dropdown
</Dropdown.Header>
<Dropdown.Divider />
<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>
</Dropdown.Menu>
</Dropdown>
</ButtonGroup>
</div>
</div>
Rounded button dropdowns
Any single .btn can be turned into Link dropdown toggle with some markup changes.The best part is you can do this with any button variant, too
<div className="text-wrap">
<p>Any single <code className="highlighter-rouge">.btn</code> can be turned into Link dropdown toggle with some markup changes.The best part is you can do this with any button variant, too</p>
<div className="example">
<ButtonGroup className="mt-2 mb-2 me-1">
<Dropdown>
<Dropdown.Toggle className='btn-pill' variant="default" id="dropdown-basic">
Action
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Header>
Dropdown
</Dropdown.Header>
<Dropdown.Divider className='bg-default' />
<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>
</Dropdown.Menu>
</Dropdown>
</ButtonGroup>
<ButtonGroup className="mt-2 mb-2 me-1">
<Dropdown>
<Dropdown.Toggle className='btn-pill' variant="primary" id="dropdown-basic">
Action
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Header>
Dropdown
</Dropdown.Header>
<Dropdown.Divider className='bg-primary' />
<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>
</Dropdown.Menu>
</Dropdown>
</ButtonGroup>
<ButtonGroup className="mt-2 mb-2 me-1">
<Dropdown>
<Dropdown.Toggle className='btn-pill' variant="success" id="dropdown-basic">
Action
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Header>
Dropdown
</Dropdown.Header>
<Dropdown.Divider className='bg-success' />
<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>
</Dropdown.Menu>
</Dropdown>
</ButtonGroup>
<ButtonGroup className="mt-2 mb-2 me-1">
<Dropdown>
<Dropdown.Toggle className='btn-pill' variant="info" id="dropdown-basic">
Action
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Header>
Dropdown
</Dropdown.Header>
<Dropdown.Divider className='bg-info' />
<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>
</Dropdown.Menu>
</Dropdown>
</ButtonGroup>
<ButtonGroup className="mt-2 mb-2 me-1">
<Dropdown>
<Dropdown.Toggle className='btn-pill' variant="warning" id="dropdown-basic">
Action
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Header>
Dropdown
</Dropdown.Header>
<Dropdown.Divider className='bg-warning' />
<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>
</Dropdown.Menu>
</Dropdown>
</ButtonGroup>
<ButtonGroup className="mt-2 mb-2 me-1">
<Dropdown>
<Dropdown.Toggle className='btn-pill' variant="danger" id="dropdown-basic">
Action
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Header>
Dropdown
</Dropdown.Header>
<Dropdown.Divider className='bg-danger' />
<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>
</Dropdown.Menu>
</Dropdown>
</ButtonGroup>
</div>
</div>Rounded Split button dropdowns
Any single .btn can be turned into Link dropdown toggle with some markup changes.The best part is you can do this with any button variant, too
<div className="text-wrap">
<p>Any single <code className="highlighter-rouge">.btn</code> can be turned into Link dropdown toggle with some markup changes.The best part is you can do this with any button variant, too</p>
<div className="example">
<ButtonGroup className="mt-2 mb-2 me-1">
<SplitButton variant="primary" title="Action" className="primary-pils">
<Dropdown.Header>
Dropdown
</Dropdown.Header>
<Dropdown.Divider className='bg-primary' />
<Dropdown.Item eventKey="1">Action</Dropdown.Item>
<Dropdown.Item eventKey="2">Another action</Dropdown.Item>
<Dropdown.Item eventKey="3">
Active Item
</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
</SplitButton>
</ButtonGroup>
<ButtonGroup className="mt-2 mb-2 me-1">
<SplitButton className="split" variant="success" title="Action">
<Dropdown.Header>
Dropdown
</Dropdown.Header>
<Dropdown.Divider className='bg-success' />
<Dropdown.Item eventKey="1">Action</Dropdown.Item>
<Dropdown.Item eventKey="2">Another action</Dropdown.Item>
<Dropdown.Item eventKey="3">
Active Item
</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
</SplitButton>
</ButtonGroup>
<ButtonGroup className="mt-2 mb-2 me-1">
<SplitButton className="split" variant="info" title="Action">
<Dropdown.Header>
Dropdown
</Dropdown.Header>
<Dropdown.Divider className='bg-info' />
<Dropdown.Item eventKey="1">Action</Dropdown.Item>
<Dropdown.Item eventKey="2">Another action</Dropdown.Item>
<Dropdown.Item eventKey="3">
Active Item
</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
</SplitButton>
</ButtonGroup>
<ButtonGroup className="mt-2 mb-2 me-1">
<SplitButton className="split" variant="warning" title="Action">
<Dropdown.Header>
Dropdown
</Dropdown.Header>
<Dropdown.Divider className='bg-warning' />
<Dropdown.Item eventKey="1">Action</Dropdown.Item>
<Dropdown.Item eventKey="2">Another action</Dropdown.Item>
<Dropdown.Item eventKey="3">
Active Item
</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
</SplitButton>
</ButtonGroup>
<ButtonGroup className="mt-2 mb-2 me-1">
<SplitButton className="split" variant="danger" title="Action">
<Dropdown.Header>
Dropdown
</Dropdown.Header>
<Dropdown.Divider className='bg-danger' />
<Dropdown.Item eventKey="1">Action</Dropdown.Item>
<Dropdown.Item eventKey="2">Another action</Dropdown.Item>
<Dropdown.Item eventKey="3">
Active Item
</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
</SplitButton>
</ButtonGroup>
</div>
</div>
Split button dropdowns
Any single .btn can be turned into Link dropdown toggle with some markup changes.The best part is you can do this with any button variant, too
<div className="text-wrap">
<p>Any single <code className="highlighter-rouge">.btn</code> can be turned into Link dropdown toggle with some markup changes.The best part is you can do this with any button variant, too</p>
<div className="example">
<ButtonGroup className="mt-2 mb-2 me-1">
<SplitButton variant="default" title="Action">
<Dropdown.Header>
Dropdown
</Dropdown.Header>
<Dropdown.Divider className='bg-default' />
<Dropdown.Item eventKey="1">Action</Dropdown.Item>
<Dropdown.Item eventKey="2">Another action</Dropdown.Item>
<Dropdown.Item eventKey="3">
Active Item
</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
</SplitButton>
</ButtonGroup>
<ButtonGroup className="mt-2 mb-2 me-1">
<SplitButton variant="primary" title="Action">
<Dropdown.Header>
Dropdown
</Dropdown.Header>
<Dropdown.Divider className='bg-primary' />
<Dropdown.Item eventKey="1">Action</Dropdown.Item>
<Dropdown.Item eventKey="2">Another action</Dropdown.Item>
<Dropdown.Item eventKey="3">
Active Item
</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
</SplitButton>
</ButtonGroup>
<ButtonGroup className="mt-2 mb-2 me-1">
<SplitButton variant="success" title="Action">
<Dropdown.Header>
Dropdown
</Dropdown.Header>
<Dropdown.Divider className='bg-success' />
<Dropdown.Item eventKey="1">Action</Dropdown.Item>
<Dropdown.Item eventKey="2">Another action</Dropdown.Item>
<Dropdown.Item eventKey="3">
Active Item
</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
</SplitButton>
</ButtonGroup>
<ButtonGroup className="mt-2 mb-2 me-1">
<SplitButton variant="info" title="Action">
<Dropdown.Header>
Dropdown
</Dropdown.Header>
<Dropdown.Divider className='info' />
<Dropdown.Item eventKey="1">Action</Dropdown.Item>
<Dropdown.Item eventKey="2">Another action</Dropdown.Item>
<Dropdown.Item eventKey="3">
Active Item
</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
</SplitButton>
</ButtonGroup>
<ButtonGroup className="mt-2 mb-2 me-1">
<SplitButton variant="warning" title="Action">
<Dropdown.Header>
Dropdown
</Dropdown.Header>
<Dropdown.Divider className='bg-warning' />
<Dropdown.Item eventKey="1">Action</Dropdown.Item>
<Dropdown.Item eventKey="2">Another action</Dropdown.Item>
<Dropdown.Item eventKey="3">
Active Item
</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
</SplitButton>
</ButtonGroup>
<ButtonGroup className="mt-2 mb-2 me-1">
<SplitButton variant="danger" title="Action">
<Dropdown.Header>
Dropdown
</Dropdown.Header>
<Dropdown.Divider className='bg-danger' />
<Dropdown.Item eventKey="1">Action</Dropdown.Item>
<Dropdown.Item eventKey="2">Another action</Dropdown.Item>
<Dropdown.Item eventKey="3">
Active Item
</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
</SplitButton>
</ButtonGroup>
</div>
</div>
Split button dropdowns
Any single .btn can be turned into Link dropdown toggle with some markup changes.The best part is you can do this with any button variant, too
<div className="text-wrap">
<p>Any single <code className="highlighter-rouge">.btn</code> can be turned into Link dropdown toggle with some markup changes.The best part is you can do this with any button variant, too</p>
<div className="example">
<ButtonGroup className="mt-2 mb-2 me-1">
<SplitButton variant="outline-default" title="Action">
<Dropdown.Header>
Dropdown
</Dropdown.Header>
<Dropdown.Divider />
<Dropdown.Item eventKey="1">Action</Dropdown.Item>
<Dropdown.Item eventKey="2">Another action</Dropdown.Item>
<Dropdown.Item eventKey="3">
Active Item
</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
</SplitButton>
</ButtonGroup>
<ButtonGroup className="mt-2 mb-2 me-1">
<SplitButton variant="outline-success" title="Action">
<Dropdown.Header>
Dropdown
</Dropdown.Header>
<Dropdown.Divider />
<Dropdown.Item eventKey="1">Action</Dropdown.Item>
<Dropdown.Item eventKey="2">Another action</Dropdown.Item>
<Dropdown.Item eventKey="3">
Active Item
</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
</SplitButton>
</ButtonGroup>
<ButtonGroup className="mt-2 mb-2 me-1">
<SplitButton variant="outline-info" title="Action">
<Dropdown.Header>
Dropdown
</Dropdown.Header>
<Dropdown.Divider />
<Dropdown.Item eventKey="1">Action</Dropdown.Item>
<Dropdown.Item eventKey="2">Another action</Dropdown.Item>
<Dropdown.Item eventKey="3">
Active Item
</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
</SplitButton>
</ButtonGroup>
<ButtonGroup className="mt-2 mb-2 me-1">
<SplitButton variant="outline-warning" title="Action">
<Dropdown.Header>
Dropdown
</Dropdown.Header>
<Dropdown.Divider />
<Dropdown.Item eventKey="1">Action</Dropdown.Item>
<Dropdown.Item eventKey="2">Another action</Dropdown.Item>
<Dropdown.Item eventKey="3">
Active Item
</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
</SplitButton>
</ButtonGroup>
<ButtonGroup className="mt-2 mb-2 me-1">
<SplitButton variant="outline-danger" title="Action">
<Dropdown.Header>
Dropdown
</Dropdown.Header>
<Dropdown.Divider />
<Dropdown.Item eventKey="1">Action</Dropdown.Item>
<Dropdown.Item eventKey="2">Another action</Dropdown.Item>
<Dropdown.Item eventKey="3">
Active Item
</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
</SplitButton>
</ButtonGroup>
<ButtonGroup className="mt-2 mb-2 me-1">
<SplitButton variant="outline-secondary" title="Action">
<Dropdown.Header>
Dropdown
</Dropdown.Header>
<Dropdown.Divider />
<Dropdown.Item eventKey="1">Action</Dropdown.Item>
<Dropdown.Item eventKey="2">Another action</Dropdown.Item>
<Dropdown.Item eventKey="3">
Active Item
</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
</SplitButton>
</ButtonGroup>
</div>
</div>
Dropdown Sizes
Button dropdowns work with buttons of all sizes, including default and split dropdown buttons
<div className="text-wrap">
<p>Button dropdowns work with buttons of all sizes, including default and split dropdown buttons</p>
<div className="example">
<ButtonGroup className="mt-2 mb-2 me-1">
<Dropdown>
<Dropdown.Toggle size="lg" variant="primary" id="dropdown-basic">
Larger Dropdown
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Divider />
<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>
</Dropdown.Menu>
</Dropdown>
</ButtonGroup>
<ButtonGroup className="mt-2 mb-2 me-1">
<Dropdown>
<Dropdown.Toggle variant="primary" id="dropdown-basic">
Default Dropdown
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Divider />
<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>
</Dropdown.Menu>
</Dropdown>
</ButtonGroup>
<ButtonGroup className="mt-2 mb-2 me-1">
<Dropdown>
<Dropdown.Toggle size="sm" variant="primary" id="dropdown-basic">
Small Dropdown
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Divider />
<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>
</Dropdown.Menu>
</Dropdown>
</ButtonGroup>
</div>
</div>
Dropup, Dropright, Dropleft variation
Trigger dropdown menus above elements by adding .dropup , .dropend , .dropstart to the parent element.
<div className="text-wrap">
<p>Trigger dropdown menus above elements by adding <code className="highlighter-rouge">.dropup</code> , <code className="highlighter-rouge">.dropend</code> , <code className="highlighter-rouge">.dropstart</code> to the parent
element.
</p>
<div className="example">
<ButtonGroup className="dropup mt-2 mb-2 me-1">
<Dropdown>
<DropdownButton drop="up" variant="primary" title="Drop up">
<Dropdown.Divider />
<Dropdown.Item eventKey="1">HTML</Dropdown.Item>
<Dropdown.Item eventKey="2">CSS</Dropdown.Item>
<Dropdown.Item eventKey="3">JavaScript</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
</DropdownButton>
</Dropdown>
</ButtonGroup>
<ButtonGroup className="dropend mt-2 mb-2 me-1">
<DropdownButton
drop="end"
variant="primary"
title="Drop right"
>
<Dropdown.Item eventKey="1">HTML</Dropdown.Item>
<Dropdown.Item eventKey="2">CSS</Dropdown.Item>
<Dropdown.Item eventKey="3">JavaScript</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey="4">About Us</Dropdown.Item>
</DropdownButton>
</ButtonGroup>
<div className="dropstart btn-group mt-2 mb-2 me-1">
<DropdownButton
drop="start"
variant="primary"
title="Drop left"
>
<Dropdown.Item eventKey="1">HTML</Dropdown.Item>
<Dropdown.Item eventKey="2">CSS</Dropdown.Item>
<Dropdown.Item eventKey="3">JavaScript</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey="4">About Us</Dropdown.Item>
</DropdownButton>
</div>
</div>
</div>
Dropdown Menu Content
Samples of Dropdown menus Headers, Dividers, Text, Forms
<div className="text-wrap">
<p>Samples of Dropdown menus Headers, Dividers, Text, Forms </p>
<div className="example">
<ButtonGroup className="mt-2 mb-2 me-1">
<DropdownButton variant="primary" title="Dropdown header">
<Dropdown.Header>
Dropdown header
</Dropdown.Header>
<Dropdown.Item eventKey="1">Action</Dropdown.Item>
<Dropdown.Item eventKey="2">Another action</Dropdown.Item>
</DropdownButton>
</ButtonGroup>
<ButtonGroup className="mt-2 mb-2 me-1">
<DropdownButton variant="primary" title="Dropdown divider">
<Dropdown.Item eventKey="1">Action</Dropdown.Item>
<Dropdown.Item eventKey="2">Another Action</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
</DropdownButton>
</ButtonGroup>
<Dropdown className="btn-group mt-2 mb-2 me-1">
<Dropdown.Toggle className="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">Dropdown Text
<span className="caret"></span>
</Dropdown.Toggle>
<Dropdown.Menu className="dropdown-menu p-4 text-muted">
<p>
Some example text that's free-flowing within the dropdown menu.And this is more example text.
</p>
</Dropdown.Menu>
</Dropdown>
<ButtonGroup className="mt-2 mb-2 me-1">
<Dropdown >
<Dropdown.Toggle variant="primary" title="Dropdown form">
Dropdown form
</Dropdown.Toggle>
<Dropdown.Menu className=' w-260' >
<Form className="card-body" >
<Form.Group >
<Form.Label >Mail or Username</Form.Label>
<Form.Control placeholder="Email" type="email" />
</Form.Group>
<Form.Group>
<Form.Label >Password</Form.Label>
<Form.Control placeholder="password" type="password" />
</Form.Group>
<Form.Group >
<Form.Check type="checkbox" label="Remeber me" />
</Form.Group>
<div className="submit">
<Link className="btn btn-primary btn-block" href="#!">Login</Link>
</div>
<div className="text-center mt-3">
<p className="mb-2"><Link href="#!">Forgot Password</Link></p>
<p className="text-dark mb-0">Don't have account?<Link className="text-primary.ms-1" href="#!">Register</Link></p>
</div>
</Form>
</Dropdown.Menu>
</Dropdown>
</ButtonGroup>
<Dropdown className="btn-group mt-2 mb-2 me-1">
<Dropdown.Toggle className="btn-primary">
<span className="caret"><i className="fe fe-settings me-1"></i></span> Dropdown Options
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Header>
<h6>Auto Correct <span className="float-end">yes<i className="fe fe-chevron-right"></i></span></h6>
</Dropdown.Header>
<Dropdown.Item href='#!'>Screen Light<span className="float-end me-3"><i className="fe fe-sun"></i></span></Dropdown.Item>
<Dropdown.Item className="ps-4">
<Form.Group className="mg-b-10 mb-0">
<label className="custom-switch">
<input type="checkbox" name="custom-switch-checkbox" className="custom-switch-input" />
<span className="custom-switch-description mg-l-10">Notification</span>
<span className="custom-switch-indicator ms-5"></span>
</label>
</Form.Group>
</Dropdown.Item>
<Dropdown.Item>
<Form.Group >
<label className="custom-switch">
<input type="checkbox" name="custom-switch-checkbox" className="custom-switch-input" />
<span className="custom-switch-description mg-l-10">Reminders</span>
<span className="custom-switch-indicator ms-5"></span>
</label>
</Form.Group>
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</div>
</div>
Icon Drop Downs dropdowns
<div className="example panel panel-default">
<div className="panel-body p-0">
<ButtonGroup className="mt-2 mb-2 me-1">
<Dropdown>
<Dropdown.Toggle className='btn-pill' variant="info">
<i className="fa fa-facebook"></i>
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Header>
<b>Dropdown</b>
</Dropdown.Header>
<Dropdown.Divider />
<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>
</Dropdown.Menu>
</Dropdown>
</ButtonGroup>
<ButtonGroup className="mt-2 mb-2 me-1">
<Dropdown>
<Dropdown.Toggle className='btn-pill' variant="danger">
<i className="fa fa-youtube "></i>
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Header>
<b>Dropdown</b>
</Dropdown.Header>
<Dropdown.Divider />
<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>
</Dropdown.Menu>
</Dropdown>
</ButtonGroup>
<ButtonGroup className="mt-2 mb-2 me-1">
<Dropdown>
<Dropdown.Toggle className='btn-pill' variant="info">
<i className="fa fa-google"></i>
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Header>
<b>Dropdown</b>
</Dropdown.Header>
<Dropdown.Divider />
<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>
</Dropdown.Menu>
</Dropdown>
</ButtonGroup>
<ButtonGroup className="mt-2 mb-2 me-1">
<Dropdown>
<Dropdown.Toggle className='btn-pill' variant="dark">
<i className="fa fa-github"></i>
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Header>
<b>Dropdown</b>
</Dropdown.Header>
<Dropdown.Divider />
<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>
</Dropdown.Menu>
</Dropdown>
</ButtonGroup>
<ButtonGroup className="mt-2 mb-2 me-1">
<Dropdown>
<Dropdown.Toggle className='btn-pill' variant="danger">
<i className="fa fa-pinterest-p"></i>
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Header>
<b>Dropdown</b>
</Dropdown.Header>
<Dropdown.Divider />
<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>
</Dropdown.Menu>
</Dropdown>
</ButtonGroup>
<ButtonGroup className="mt-2 mb-2 me-1">
<Dropdown>
<Dropdown.Toggle className='btn-pill' variant="secondary">
<i className="fa fa-twitter"></i>
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Header>
<b>Dropdown</b>
</Dropdown.Header>
<Dropdown.Divider />
<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>
</Dropdown.Menu>
</Dropdown>
</ButtonGroup>
</div>
</div>
