Dropdowns
Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.. See official bootstrap document
Basic example
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.
import React from 'react';
import { Dropdown } from 'react-bootstrap'
import { Link } from 'react-router-dom'
const BasicExample = () => {
return (
<Breadcrumb>
<Dropdown>
<Dropdown.Toggle variant="secondary">Dropdown button</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item>Action</Dropdown.Item>
<Dropdown.Item>Another action</Dropdown.Item>
<Dropdown.Item>Something else here</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item>Separated link</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
<Dropdown>
<Dropdown.Toggle as={Link} to="#" variant="secondary" >Dropdown link</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item>Action</Dropdown.Item>
<Dropdown.Item>Another action</Dropdown.Item>
<Dropdown.Item>Something else here</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item>Separated link</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</Breadcrumb>
);
};
export default BasicExample;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Split button
Similarly, You create a split dropdown by combining the Dropdown components with another Button and a ButtonGroup.
import React from 'react';
import { Button, ButtonGroup, Dropdown } from 'react-bootstrap'
import { Link } from 'react-router-dom'
const SplitButtonDropdown = () => {
return (
<Dropdown as={ButtonGroup}>
<Button variant="secondary">Action</Button>
<Dropdown.Toggle split variant="secondary" id="dropdown-split-basic" />
<Dropdown.Menu>
<Dropdown.Item>Action</Dropdown.Item>
<Dropdown.Item>Another action</Dropdown.Item>
<Dropdown.Item>Something else here</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item>Separated link</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>);
};
export default SplitButtonDropdown;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Sizing
Dropdowns work with buttons of all sizes.
import React from 'react';
import { Button, ButtonGroup, Dropdown } from 'react-bootstrap'
const Sizing = () => {
return (
<>
<Dropdown as={ButtonGroup} >
<Dropdown.Toggle variant="secondary" size="lg" id="larg-btn1">
Large Button
</Dropdown.Toggle>
<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.Divider />
<Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
<Dropdown as={ButtonGroup}>
<Button variant="secondary" size="lg">Large split button</Button>
<Dropdown.Toggle split variant="secondary" size="lg" id="larg-btn2" />
<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.Divider />
<Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
<Dropdown as={ButtonGroup} >
<Dropdown.Toggle variant="secondary" size="sm" id="small-btn1">
Small Button
</Dropdown.Toggle>
<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.Divider />
<Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
<Dropdown as={ButtonGroup}>
<Button variant="secondary" size="sm">Small split button</Button>
<Dropdown.Toggle split variant="secondary" size="sm" id="small-btn2" />
<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.Divider />
<Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
<Dropdown as={ButtonGroup} >
<Dropdown.Toggle variant="secondary" size="xs" id="xsmall-btn1">
Extra Small Button
</Dropdown.Toggle>
<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.Divider />
<Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
<Dropdown as={ButtonGroup}>
<Button variant="secondary" size="xs">Extra Small split button</Button>
<Dropdown.Toggle split variant="secondary" size="xs" id="xsmall-btn2" />
<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.Divider />
<Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</>
);
};
export default Sizing;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Dropdown directions
Trigger dropdown menus above, below, left, or to the right of their toggle elements, with the drop prop.
import React from 'react';
import { ButtonGroup, Dropdown, DropdownButton, SplitButton } from 'react-bootstrap'
const DropdownDirections = () => {
return (
<>
// Drop Start
<DropdownButton
as={ButtonGroup}
drop="start"
variant="secondary"
title="DropStart"
>
<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>
<SplitButton
drop="start"
variant="secondary"
title="Split DropStart"
>
<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>
// Drop Up
<DropdownButton
as={ButtonGroup}
drop="up"
variant="secondary"
title="DropUp"
>
<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>
<SplitButton
drop="up"
variant="secondary"
title="Split DropUp"
>
<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>
// Drop End
<DropdownButton
as={ButtonGroup}
drop="end"
variant="secondary"
title="DropEnd"
>
<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>
<SplitButton
drop="end"
variant="secondary"
title="Split DropEnd"
>
<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>
// Right-aligned menu
<DropdownButton
as={ButtonGroup}
align="end"
variant="secondary"
title="Right-aligned menu"
>
<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>
// Left-aligned, right-aligned lg
<DropdownButton
as={ButtonGroup}
align={{ lg: 'end' }}
variant="secondary"
title="Left-aligned, right-aligned lg"
>
<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>
// Right-aligned, left-aligned lg
<DropdownButton
as={ButtonGroup}
align={{ lg: 'start' }}
variant="secondary"
title="Right-aligned, left-aligned lg"
>
<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>
</>
);
};
export default DropdownDirections;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Dropdown animation
Use data attribute data-dropdown-animation with data-bs-toggle="dropdown" to animate dropdown.
import React from 'react';
import NubraDropdown from '../../../components/@nubra-animated-dropdown/@nubra-dropdown';
const AnimatedDropdown = () => {
return (
<NubraDropdown Title="Dropdown" variant="secondary">
<NubraDropdown.Item href="#/action-1">Action</NubraDropdown.Item>
<NubraDropdown.Item href="#/action-2">Another action</NubraDropdown.Item>
<NubraDropdown.Item href="#/action-3">Something else</NubraDropdown.Item>
<NubraDropdown.Divider />
<NubraDropdown.Item eventKey="4">Separated link</NubraDropdown.Item>
</NubraDropdown>
);
};
export default AnimatedDropdown;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Menu content
Create menu items with button or anchor tags. You can also add non-interactive dropdown items or add a header to label sections or separate groups with a divider.
import React from 'react';
import { ButtonGroup, Dropdown } from 'react-bootstrap'
const MenuContents = () => {
return (
<>
<Dropdown.Menu className="d-block position-static float-start me-5" show>
<Dropdown.Header as="h6">Dropdown header</Dropdown.Header>
<Dropdown.Item eventKey="1">Regular link</Dropdown.Item>
<Dropdown.Item eventKey="2" active>Active link</Dropdown.Item>
<Dropdown.Item eventKey="3" disabled>Disabled link</Dropdown.Item>
<Dropdown.ItemText eventKey="4">Dropdown item text</Dropdown.ItemText>
<Dropdown.Divider />
<Dropdown.Item eventKey="5">Separated link</Dropdown.Item>
</Dropdown.Menu>
<Dropdown as={ButtonGroup} >
<Dropdown.Toggle variant="secondary" id="demo">
Demo
</Dropdown.Toggle>
<Dropdown.Menu className="w-210p">
<Dropdown.Header as="h6">Dropdown header</Dropdown.Header>
<Dropdown.Item eventKey="1">Regular link</Dropdown.Item>
<Dropdown.Item eventKey="2" active>Active link</Dropdown.Item>
<Dropdown.Item eventKey="3" disabled>Disabled link</Dropdown.Item>
<Dropdown.ItemText eventKey="4">Dropdown item text</Dropdown.ItemText>
<Dropdown.Divider />
<Dropdown.Item eventKey="5">Separated link</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</>
);
};
export default MenuContents;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Header styles and icon
Create menu items with button or anchor tags. You can also add non-interactive dropdown items or add a header to label sections or separate groups with a divider.
import React from 'react';
import { ButtonGroup, Dropdown } from 'react-bootstrap'
const DropdownHeaderStyles = () => {
return (
<>
<Dropdown.Menu className="d-block position-static float-start me-5" show>
<Dropdown.Header as="h6">Dropdown header</Dropdown.Header>
<Dropdown.Divider />
<Dropdown.Item eventKey="1" >
<i className="dropdown-icon las la-user" /><span>Profile</span>
</Dropdown.Item>
<Dropdown.Item eventKey="2">
<i className="dropdown-icon las la-credit-card" /><span>my balance</span>
</Dropdown.Item>
<Dropdown.Item href="#">
<i className="dropdown-icon las la-envelope" /><span>Inbox</span>
</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey="3">Follow</Dropdown.Item>
<Dropdown.Item eventKey="4">Unfollow</Dropdown.Item>
<Dropdown.Item eventKey="5">Add Tag</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Header as="h6" className="dropdown-header-bold">Dropdown header</Dropdown.Header>
<Dropdown.Item eventKey="">Send Email</Dropdown.Item>
<Dropdown.Item eventKey="">Export to pdf</Dropdown.Item>
</Dropdown.Menu>
<Dropdown as={ButtonGroup}>
<Dropdown.Toggle variant="secondary">
Demo
</Dropdown.Toggle>
<Dropdown.Menu className="w-210p">
<Dropdown.Header as="h6">Dropdown header</Dropdown.Header>
<Dropdown.Divider />
<Dropdown.Item eventKey="1" >
<i className="dropdown-icon las la-user" /><span>Profile</span>
</Dropdown.Item>
<Dropdown.Item eventKey="2">
<i className="dropdown-icon las la-credit-card" /><span>my balance</span>
</Dropdown.Item>
<Dropdown.Item href="#">
<i className="dropdown-icon las la-envelope" /><span>Inbox</span>
</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey="3">Follow</Dropdown.Item>
<Dropdown.Item eventKey="4">Unfollow</Dropdown.Item>
<Dropdown.Item eventKey="5">Add Tag</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Header as="h6" className="dropdown-header-bold">Dropdown header</Dropdown.Header>
<Dropdown.Item eventKey="">Send Email</Dropdown.Item>
<Dropdown.Item eventKey="">Export to pdf</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
<>
);
};
export default DropdownHeaderStyles;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Header styles 2
Add .header-wth-bg class with <Dropdown.Header>.
import React from 'react';
import { ButtonGroup, Dropdown } from 'react-bootstrap'
const DropdownHeaderStyle2 = () => {
return (
<>
<Dropdown.Menu className="d-block position-static float-start me-5" show>
<Dropdown.Header as="h6" className="header-wth-bg">Dropdown header</Dropdown.Header>
<Dropdown.Divider />
<Dropdown.Item eventKey="1" >
<i className="dropdown-icon las la-user" /><span>Profile</span>
</Dropdown.Item>
<Dropdown.Item eventKey="2">
<i className="dropdown-icon las la-credit-card" /><span>my balance</span>
</Dropdown.Item>
<Dropdown.Item href="#">
<i className="dropdown-icon las la-envelope" /><span>Inbox</span>
</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey="3">Follow</Dropdown.Item>
<Dropdown.Item eventKey="4">Unfollow</Dropdown.Item>
<Dropdown.Item eventKey="5">Add Tag</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Header as="h6" className="dropdown-header-bold">Dropdown header</Dropdown.Header>
<Dropdown.Item eventKey="">Send Email</Dropdown.Item>
<Dropdown.Item eventKey="">Export to pdf</Dropdown.Item>
</Dropdown.Menu>
<Dropdown as={ButtonGroup}>
<Dropdown.Toggle variant="secondary">
Demo
</Dropdown.Toggle>
<Dropdown.Menu className="w-210p">
<Dropdown.Header as="h6" className="header-wth-bg">Dropdown header</Dropdown.Header>
<Dropdown.Divider />
<Dropdown.Item eventKey="1" >
<i className="dropdown-icon las la-user" /><span>Profile</span>
</Dropdown.Item>
<Dropdown.Item eventKey="2">
<i className="dropdown-icon las la-credit-card" /><span>my balance</span>
</Dropdown.Item>
<Dropdown.Item href="#">
<i className="dropdown-icon las la-envelope" /><span>Inbox</span>
</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey="3">Follow</Dropdown.Item>
<Dropdown.Item eventKey="4">Unfollow</Dropdown.Item>
<Dropdown.Item eventKey="5">Add Tag</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Header as="h6" className="dropdown-header-bold">Dropdown header</Dropdown.Header>
<Dropdown.Item eventKey="">Send Email</Dropdown.Item>
<Dropdown.Item eventKey="">Export to pdf</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</>
);
};
export default DropdownHeaderStyle2;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Center align text
add class.text-center with <Dropdown.Menu>.
import React from 'react';
import { ButtonGroup, Dropdown } from 'react-bootstrap'
const CenterAlignedText = () => {
return (
<>
<Dropdown.Menu className="text-center d-block position-static me-5 float-start" show>
<Dropdown.Item href="#">Follow</Dropdown.Item>
<Dropdown.Item href="#">Unfollow</Dropdown.Item>
<Dropdown.Item href="#">Add Tag</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item href="#">Send Email</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item href="#">Export to pdf</Dropdown.Item>
</Dropdown.Menu>
<Dropdown as={ButtonGroup}>
<Dropdown.Toggle variant="secondary">
Demo
</Dropdown.Toggle>
<Dropdown.Menu className="text-center w-210p">
<Dropdown.Item href="#">Follow</Dropdown.Item>
<Dropdown.Item href="#">Unfollow</Dropdown.Item>
<Dropdown.Item href="#">Add Tag</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item href="#">Send Email</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item href="#">Export to pdf</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</>
);
};
export default CenterAlignedText;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
With button
add class.text-center with dropdown-menu class
import React from 'react';
import { Button, ButtonGroup, Dropdown } from 'react-bootstrap'
const DropdownWithButtons = () => {
return (
<>
<Dropdown.Menu className="text-center d-block position-static me-5 float-start" show>
<Dropdown.Item>
<Button variant="soft-primary" className="btn-wth-icon btn-block">
<span>
<span className="icon">
<span className="feather-icon">
<Circle />
</span>
</span>
<span className="btn-text">Icon Button</span>
</span>
</Button>
</Dropdown.Item>
<Dropdown.Item>
<Button variant="soft-primary" className="btn-wth-icon btn-block">
<span>
<span className="icon">
<span className="feather-icon">
<Book />
</span>
</span>
<span className="btn-text">Icon Button</span>
</span>
</Button>
</Dropdown.Item>
</Dropdown.Menu>
<Dropdown as={ButtonGroup}>
<Dropdown.Toggle variant="secondary">
Demo
</Dropdown.Toggle>
<Dropdown.Menu className="w-210p">
<Dropdown.Item>
<Button variant="soft-primary" className="btn-wth-icon btn-block">
<span>
<span className="icon">
<span className="feather-icon">
<Circle />
</span>
</span>
<span className="btn-text">Icon Button</span>
</span>
</Button>
</Dropdown.Item>
<Dropdown.Item>
<Button variant="soft-primary" className="btn-wth-icon btn-block">
<span>
<span className="icon">
<span className="feather-icon">
<Book />
</span>
</span>
<span className="btn-text">Icon Button</span>
</span>
</Button>
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</>
);
};
export default DropdownWithButtons;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Adding text
Place any freeform text within a dropdown menu with text and use spacing utilities or simply use.dropdown-item-text class.
import React from 'react';
import { Button, ButtonGroup, Dropdown } from 'react-bootstrap'
const AddingText = () => {
return (
<>
<Dropdown.Menu className="d-block position-static p-4 w-250p float-start me-5" show>
<p>
Some example text that's free-flowing within the dropdown menu.
</p>
<p>
And this is more example text.
</p>
</Dropdown.Menu>
<Dropdown as={ButtonGroup}>
<Dropdown.Toggle variant="secondary">
Demo
</Dropdown.Toggle>
<Dropdown.Menu className="p-4 w-250p">
<p>
Some example text that's free-flowing within the dropdown menu.
</p>
<p>
And this is more example text.
</p>
</Dropdown.Menu>
</Dropdown>
</>
);
};
export default AddingText;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
With avatar
Place avatar in dropdown item.
import React from 'react';
import { ButtonGroup, Dropdown } from 'react-bootstrap'
const AddingText = () => {
return (
<>
<Dropdown.Menu className="dropdown-menu-icon-text d-block position-static me-5 float-start" show>
<Dropdown.Item href="#">
<div className="d-flex align-items-center">
<div className="avatar avatar-icon avatar-sm avatar-soft-primary avatar-rounded me-3">
<span className="initial-wrap">
<i className="ri-image-fill" />
</span>
</div>
<div>
<span className="h6 mb-0">Photo or Video Library</span>
<Dropdown.ItemText>Dropdown item text paragraph</Dropdown.ItemText>
</div>
</div>
</Dropdown.Item>
<Dropdown.Item href="#">
<div className="d-flex align-items-center">
<div className="avatar avatar-icon avatar-sm avatar-soft-danger avatar-rounded me-3">
<span className="initial-wrap">
<i className="ri-checkbox-line" />
</span>
</div>
<div>
<span className="h6 mb-0">Documents</span>
<Dropdown.ItemText>Dropdown item text paragraph</Dropdown.ItemText>
</div>
</div>
</Dropdown.Item>
</Dropdown.Menu>
<Dropdown as={ButtonGroup}>
<Dropdown.Toggle variant="secondary">
Demo
</Dropdown.Toggle>
<Dropdown.Menu className="dropdown-menu-icon-text">
<Dropdown.Item href="#">
<div className="d-flex align-items-center">
<div className="avatar avatar-icon avatar-sm avatar-soft-primary avatar-rounded me-3">
<span className="initial-wrap">
<i className="ri-image-fill" />
</span>
</div>
<div>
<span className="h6 mb-0">Photo or Video Library</span>
<Dropdown.ItemText>Dropdown item text paragraph</Dropdown.ItemText>
</div>
</div>
</Dropdown.Item>
<Dropdown.Item href="#">
<div className="d-flex align-items-center">
<div className="avatar avatar-icon avatar-sm avatar-soft-danger avatar-rounded me-3">
<span className="initial-wrap">
<i className="ri-checkbox-line" />
</span>
</div>
<div>
<span className="h6 mb-0">Documents</span>
<Dropdown.ItemText>Dropdown item text paragraph</Dropdown.ItemText>
</div>
</div>
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</>
);
};
export default AddingText;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
With Images
Place any icon or image inside.dropdown-item-text class.
import React from 'react';
import { ButtonGroup, Dropdown } from 'react-bootstrap'
const DropdownWithImages = () => {
return (
<>
<Dropdown.Menu className="d-block position-static float-start me-5" show>
<Dropdown.Item href="#"><i className="dropdown-icon flag-icon flag-icon-in" /><span>India</span></Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item href="#"><i className="dropdown-icon flag-icon flag-icon-tz" /><span>Spain</span></Dropdown.Item>
</Dropdown.Menu>
<Dropdown as={ButtonGroup}>
<Dropdown.Toggle variant="secondary">
Demo
</Dropdown.Toggle>
<Dropdown.Menu className="dropdown-menu-avatar">
<Dropdown.Item href="#"><i className="dropdown-icon flag-icon flag-icon-in" /><span>India</span></Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item href="#"><i className="dropdown-icon flag-icon flag-icon-tz" /><span>Spain</span></Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</>
);
};
export default DropdownWithImages;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Dropdown with icons and border + No shadow
Add an icon using dropdown-menu .dropdown-bordered
import React from 'react';
import { ButtonGroup, Dropdown } from 'react-bootstrap'
const DropdownWithIcons = () => {
return (
<>
<Dropdown.Menu className="d-block position-static float-start me-5 dropdown-bordered" show>
<Dropdown.Item href="#"><i className="dropdown-icon las la-user" /><span>Profile</span></Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item href="#"><i className="dropdown-icon las la-credit-card" /><span>my balance</span></Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item href="#"><i className="dropdown-icon las la-envelope" /><span>Inbox</span></Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item href="#"><i className="dropdown-icon las la-cog" /><span>Settings</span></Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item href="#"><i className="dropdown-icon las la-sign-out-alt" /><span>Log Out</span></Dropdown.Item>
</Dropdown.Menu>
<Dropdown as={ButtonGroup}>
<Dropdown.Toggle variant="secondary">
Demo
</Dropdown.Toggle>
<Dropdown.Menu className="dropdown-bordered">
<Dropdown.Item href="#"><i className="dropdown-icon las la-user" /><span>Profile</span></Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item href="#"><i className="dropdown-icon las la-credit-card" /><span>my balance</span></Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item href="#"><i className="dropdown-icon las la-envelope" /><span>Inbox</span></Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item href="#"><i className="dropdown-icon las la-cog" /><span>Settings</span></Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item href="#"><i className="dropdown-icon las la-sign-out-alt" /><span>Log Out</span></Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</>
);
};
export default DropdownWithIcons;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
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.
import React from 'react';
import { ButtonGroup, Dropdown, Form } from 'react-bootstrap'
const MenuForms = () => {
return (
<>
<Dropdown.Menu className="d-block position-static float-start me-5" show>
<Form className="p-3">
<Form.Group className="mb-3">
<Form.Label htmlFor="exampleDropdownFormEmail1">Email address</Form.Label>
<Form.Control type="email" id="exampleDropdownFormEmail1" placeholder="email@example.com" />
</Form.Group>
<Form.Group className="mb-3">
<Form.Label htmlFor="exampleDropdownFormPassword1">Password</Form.Label>
<Form.Control type="password" id="exampleDropdownFormPassword1" placeholder="Password" />
</Form.Group>
<Form.Group className="mb-3">
<Form.Check>
<Form.Check.Input type="checkbox" id="gridCheck1" />
<Form.Check.Label htmlFor="gridCheck1">
Remember me
</Form.Check.Label>
</Form.Check>
</Form.Group>
<Button variant="primary">Sign in</Button>
</Form>
<Dropdown.Divider />
<Dropdown.Item> New around here? <Link to="#">Sign up</Link></Dropdown.Item>
<Dropdown.Item href="#">Forgot password?</Dropdown.Item>
</Dropdown.Menu>
<Dropdown as={ButtonGroup}>
<Dropdown.Toggle variant="secondary">
Demo
</Dropdown.Toggle>
<Dropdown.Menu>
<Form className="p-3">
<Form.Group className="mb-3">
<Form.Label htmlFor="exampleDropdownFormEmail2">Email address</Form.Label>
<Form.Control type="email" id="exampleDropdownFormEmail2" placeholder="email@example.com" />
</Form.Group>
<Form.Group className="mb-3">
<Form.Label htmlFor="exampleDropdownFormPassword2">Password</Form.Label>
<Form.Control type="password" id="exampleDropdownFormPassword2" placeholder="Password" />
</Form.Group>
<Form.Group className="mb-3">
<Form.Check>
<Form.Check.Input type="checkbox" id="gridCheck2" />
<Form.Check.Label htmlFor="gridCheck2">
Remember me
</Form.Check.Label>
</Form.Check>
</Form.Group>
<Button variant="primary">Sign in</Button>
</Form>
<Dropdown.Divider />
<Dropdown.Item> New around here? <Link to="#">Sign up</Link></Dropdown.Item>
<Dropdown.Item href="#">Forgot password?</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</>
);
};
export default MenuForms;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Linked Field
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.
import React from 'react';
import { ButtonGroup, Dropdown } from 'react-bootstrap'
const LinkedField = () => {
return (
<>
<Dropdown.Menu className="d-block position-static float-start me-5" show>
<Dropdown.Item><i className="dropdown-icon las la-link" /><a href="<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Dropdown inverse
Opt into darker dropdowns to match a dark navbar or custom style by adding variant="dark" onto an existing DropdownMenu. Alternatively, use menuVariant="dark" when using the DropdownButton component.
import React from 'react';
import { ButtonGroup, Dropdown } from 'react-bootstrap'
const DarkDropdown = () => {
return (
<>
<Dropdown.Menu variant="dark" className="d-block position-static me-5 float-start" show>
<Dropdown.Header as="h6">Dropdown header</Dropdown.Header>
<Dropdown.Item href="#">Regular link</Dropdown.Item>
<Dropdown.Item href="#" active >Active link</Dropdown.Item>
<Dropdown.Item disabled>Disabled link</Dropdown.Item>
<Dropdown.ItemText>Dropdown item text</Dropdown.ItemText>
<Dropdown.Divider />
<Dropdown.Item href="#">Separated link</Dropdown.Item>
</Dropdown.Menu>
<Dropdown as={ButtonGroup}>
<Dropdown.Toggle variant="secondary">
Demo
</Dropdown.Toggle>
<Dropdown.Menu variant="dark">
<Dropdown.Header as="h6">Dropdown header</Dropdown.Header>
<Dropdown.Item href="#">Regular link</Dropdown.Item>
<Dropdown.Item href="#" active >Active link</Dropdown.Item>
<Dropdown.Item href="#">Disabled link</Dropdown.Item>
<Dropdown.ItemText>Dropdown item text</Dropdown.ItemText>
<Dropdown.Item href="#">Something else here</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item href="#">Separated link</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</>
);
};
export default DarkDropdown;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Dropdown with checkbox
Checkout the example of dropdown with checkbox.
import React from 'react';
import { ButtonGroup, Dropdown, Form, Nav, Tab } from 'react-bootstrap'
import SimpleBar from 'simplebar-react'
//Images
import avatar1 from '../../../Assets/dist/img/avatar1.jpg';
import avatar2 from '../../../Assets/dist/img/avatar2.jpg';
import avatar3 from '../../../Assets/dist/img/avatar3.jpg';
import avatar5 from '../../../Assets/dist/img/avatar5.jpg';
import avatar6 from '../../../Assets/dist/img/avatar6.jpg';
import avatar7 from '../../../Assets/dist/img/avatar7.jpg';
import avatar13 from '../../../Assets/dist/img/avatar13.jpg';
const DropdownWithCheckbox = () => {
return (
<>
<Dropdown.Menu className="d-block position-static me-5 w-250p float-start" show>
<Tab.Container defaultActiveKey="tab_lead4">
<Nav variant="tabs" className="nav-line nav-light">
<Nav.Item>
<Nav.Link active eventKey="tab_lead4">
<span className="nav-link-text">Users</span>
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link disabled eventKey="metrics">
<span className="nav-link-text">Metrics</span>
</Nav.Link>
</Nav.Item>
</Nav>
<Tab.Content>
<Tab.Pane eventKey="tab_lead4">
<div>
<Form className="mb-3" role="search">
<Form.Control type="text" placeholder="Search People" />
</Form>
<div className="h-250p">
<SimpleBar className="nicescroll-bar">
<ul className="invite-user-list p-0">
<li className="d-flex align-items-center justify-content-between mb-3">
<div className="media d-flex align-items-center">
<div className="avatar avatar-xs me-3">
<img src={avatar2} alt="user" className="avatar-img" />
</div>
<div className="media-body">
<div>
<div className="user-name">Morgan Freeman</div>
</div>
</div>
</div>
<div className="form-check form-check-theme ms-3">
<input type="checkbox" className="form-check-input" id="customCheck2" />
<label className="form-check-label" htmlFor="customCheck2" />
</div>
</li>
<li className="d-flex align-items-center justify-content-between mb-3">
<div className="media d-flex align-items-center">
<div className="avatar avatar-xs me-3">
<img src={avatar7} alt="user" className="avatar-img" />
</div>
<div className="media-body">
<div>
<div className="user-name">Huma Therman</div>
</div>
</div>
</div>
<div className="form-check form-check-theme ms-3">
<input type="checkbox" className="form-check-input" id="customCheck3" />
<label className="form-check-label" htmlFor="customCheck3" />
</div>
</li>
<li className="d-flex align-items-center justify-content-between mb-3">
<div className="media d-flex align-items-center">
<div className="avatar avatar-xs me-3">
<img src={avatar3} alt="user" className="avatar-img" />
</div>
<div className="media-body">
<div>
<div className="user-name">Charlie Chaplin</div>
</div>
</div>
</div>
<div className="form-check form-check-theme ms-3">
<input type="checkbox" className="form-check-input" id="customCheck4" />
<label className="form-check-label" htmlFor="customCheck4" />
</div>
</li>
<li className="d-flex align-items-center justify-content-between mb-3">
<div className="media d-flex align-items-center">
<div className="avatar avatar-xs me-3">
<img src={avatar13} alt="user" className="avatar-img" />
</div>
<div className="media-body">
<div>
<div className="user-name">Winston Churchil</div>
</div>
</div>
</div>
<div className="form-check form-check-theme ms-3">
<input type="checkbox" className="form-check-input" id="customCheck5" />
<label className="form-check-label" htmlFor="customCheck5" />
</div>
</li>
<li className="d-flex align-items-center justify-content-between mb-3">
<div className="media d-flex align-items-center">
<div className="avatar avatar-xs me-3">
<img src={avatar1} alt="user" className="avatar-img" />
</div>
<div className="media-body">
<div>
<div className="user-name">Office Board</div>
</div>
</div>
</div>
<div className="form-check form-check-theme ms-3">
<input type="checkbox" className="form-check-input" id="customCheck6" />
<label className="form-check-label" htmlFor="customCheck6" />
</div>
</li>
<li className="d-flex align-items-center justify-content-between mb-3">
<div className="media d-flex align-items-center">
<div className="avatar avatar-xs me-3">
<img src={avatar6} alt="user" className="avatar-img" />
</div>
<div className="media-body">
<div>
<div className="user-name">Boss Baby</div>
</div>
</div>
</div>
<div className="form-check form-check-theme ms-3">
<input type="checkbox" className="form-check-input" id="customCheck7" />
<label className="form-check-label" htmlFor="customCheck7" />
</div>
</li>
<li className="d-flex align-items-center justify-content-between">
<div className="media d-flex align-items-center">
<div className="avatar avatar-xs me-3">
<img src={avatar5} alt="user" className="avatar-img" />
</div>
<div className="media-body">
<div>
<div className="user-name">Jaquiline Joker</div>
</div>
</div>
</div>
<div className="form-check form-check-theme ms-3">
<input type="checkbox" className="form-check-input" id="customCheck8" />
<label className="form-check-label" htmlFor="customCheck8" />
</div>
</li>
</ul>
</SimpleBar>
</div>
</div>
</Tab.Pane>
</Tab.Content>
</Tab.Container>
</Dropdown.Menu>
<Dropdown as={ButtonGroup}>
<Dropdown.Toggle variant="secondary" >
Demo
</Dropdown.Toggle>
<Dropdown.Menu className="w-250p">
<Tab.Container defaultActiveKey="tab_lead4">
<Nav variant="tabs" className="nav-line nav-light">
<Nav.Item>
<Nav.Link active eventKey="tab_lead4">
<span className="nav-link-text">Users</span>
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link disabled eventKey="metrics">
<span className="nav-link-text">Metrics</span>
</Nav.Link>
</Nav.Item>
</Nav>
<Tab.Content>
<Tab.Pane eventKey="tab_lead4">
<div>
<Form className="mb-3" role="search">
<Form.Control type="text" placeholder="Search People" />
</Form>
<div className="h-250p">
<SimpleBar className="nicescroll-bar">
<ul className="invite-user-list p-0">
<li className="d-flex align-items-center justify-content-between mb-3">
<div className="media d-flex align-items-center">
<div className="avatar avatar-xs me-3">
<img src={avatar2} alt="user" className="avatar-img" />
</div>
<div className="media-body">
<div>
<div className="user-name">Morgan Freeman</div>
</div>
</div>
</div>
<div className="form-check form-check-theme ms-3">
<input type="checkbox" className="form-check-input" id="customCheck2" />
<label className="form-check-label" htmlFor="customCheck2" />
</div>
</li>
<li className="d-flex align-items-center justify-content-between mb-3">
<div className="media d-flex align-items-center">
<div className="avatar avatar-xs me-3">
<img src={avatar7} alt="user" className="avatar-img" />
</div>
<div className="media-body">
<div>
<div className="user-name">Huma Therman</div>
</div>
</div>
</div>
<div className="form-check form-check-theme ms-3">
<input type="checkbox" className="form-check-input" id="customCheck3" />
<label className="form-check-label" htmlFor="customCheck3" />
</div>
</li>
<li className="d-flex align-items-center justify-content-between mb-3">
<div className="media d-flex align-items-center">
<div className="avatar avatar-xs me-3">
<img src={avatar3} alt="user" className="avatar-img" />
</div>
<div className="media-body">
<div>
<div className="user-name">Charlie Chaplin</div>
</div>
</div>
</div>
<div className="form-check form-check-theme ms-3">
<input type="checkbox" className="form-check-input" id="customCheck4" />
<label className="form-check-label" htmlFor="customCheck4" />
</div>
</li>
<li className="d-flex align-items-center justify-content-between mb-3">
<div className="media d-flex align-items-center">
<div className="avatar avatar-xs me-3">
<img src={avatar13} alt="user" className="avatar-img" />
</div>
<div className="media-body">
<div>
<div className="user-name">Winston Churchil</div>
</div>
</div>
</div>
<div className="form-check form-check-theme ms-3">
<input type="checkbox" className="form-check-input" id="customCheck5" />
<label className="form-check-label" htmlFor="customCheck5" />
</div>
</li>
<li className="d-flex align-items-center justify-content-between mb-3">
<div className="media d-flex align-items-center">
<div className="avatar avatar-xs me-3">
<img src={avatar1} alt="user" className="avatar-img" />
</div>
<div className="media-body">
<div>
<div className="user-name">Office Board</div>
</div>
</div>
</div>
<div className="form-check form-check-theme ms-3">
<input type="checkbox" className="form-check-input" id="customCheck6" />
<label className="form-check-label" htmlFor="customCheck6" />
</div>
</li>
<li className="d-flex align-items-center justify-content-between mb-3">
<div className="media d-flex align-items-center">
<div className="avatar avatar-xs me-3">
<img src={avatar6} alt="user" className="avatar-img" />
</div>
<div className="media-body">
<div>
<div className="user-name">Boss Baby</div>
</div>
</div>
</div>
<div className="form-check form-check-theme ms-3">
<input type="checkbox" className="form-check-input" id="customCheck7" />
<label className="form-check-label" htmlFor="customCheck7" />
</div>
</li>
<li className="d-flex align-items-center justify-content-between">
<div className="media d-flex align-items-center">
<div className="avatar avatar-xs me-3">
<img src={avatar5} alt="user" className="avatar-img" />
</div>
<div className="media-body">
<div>
<div className="user-name">Jaquiline Joker</div>
</div>
</div>
</div>
<div className="form-check form-check-theme ms-3">
<input type="checkbox" className="form-check-input" id="customCheck8" />
<label className="form-check-label" htmlFor="customCheck8" />
</div>
</li>
</ul>
</SimpleBar>
</div>
</div>
</Tab.Pane>
</Tab.Content>
</Tab.Container>
</Dropdown.Menu>
</Dropdown>
</>
);
};
export default DropdownWithCheckbox;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Dropdown with radio
Checkout the example of dropdown with radio.
import React from 'react';
import { ButtonGroup, Dropdown, Form } from 'react-bootstrap'
const DropdownWithRadio = () => {
return (
<>
<Dropdown.Menu className="d-block position-static me-5 float-start w-200p" show>
<Dropdown.Item>
<Form.Check className="form-check-theme">
<Form.Check.Input type="radio" id="customR1" name="customRadio1" />
<Form.Check.Label htmlFor="customR1">Last Day</Form.Check.Label>
</Form.Check>
</Dropdown.Item>
<Dropdown.Item>
<Form.Check className="form-check-theme">
<Form.Check.Input type="radio" id="customR2" name="customRadio2" defaultChecked />
<Form.Check.Label htmlFor="customR2">Last 15 Days</Form.Check.Label>
</Form.Check>
</Dropdown.Item>
<Dropdown.Item>
<Form.Check className="form-check-theme">
<Form.Check.Input type="radio" id="customR3" name="customRadio3" />
<Form.Check.Label htmlFor="customR3">Last 30 Days</Form.Check.Label>
</Form.Check>
</Dropdown.Item>
<Dropdown.Item>
<Form.Check className="form-check-theme">
<Form.Check.Input type="radio" id="customR4" name="customRadio4" />
<Form.Check.Label htmlFor="customR4">Last quater</Form.Check.Label>
</Form.Check>
</Dropdown.Item>
<Dropdown.Item>
<Form.Check className="form-check-theme">
<Form.Check.Input type="radio" id="customR5" name="customRadio5" />
<Form.Check.Label htmlFor="customR5">Last Year</Form.Check.Label>
</Form.Check>
</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item>
<i className="dropdown-icon las la-plus" /> <span>Custom Date</span>
</Dropdown.Item>
</Dropdown.Menu>
<Dropdown as={ButtonGroup}>
<Dropdown.Toggle variant="secondary">
Demo
</Dropdown.Toggle>
<Dropdown.Menu className="w-200p">
<Dropdown.Item>
<Form.Check className="form-check-theme">
<Form.Check.Input type="radio" id="customR6" name="customRadio6" />
<Form.Check.Label htmlFor="customR6">Last Day</Form.Check.Label>
</Form.Check>
</Dropdown.Item>
<Dropdown.Item>
<Form.Check className="form-check-theme">
<Form.Check.Input type="radio" id="customR7" name="customRadio7" defaultChecked />
<Form.Check.Label htmlFor="customR7">Last 15 Days</Form.Check.Label>
</Form.Check>
</Dropdown.Item>
<Dropdown.Item>
<Form.Check className="form-check-theme">
<Form.Check.Input type="radio" id="customR8" name="customRadio8" />
<Form.Check.Label htmlFor="customR8">Last 30 Days</Form.Check.Label>
</Form.Check>
</Dropdown.Item>
<Dropdown.Item>
<Form.Check className="form-check-theme">
<Form.Check.Input type="radio" id="customR9" name="customRadio9" />
<Form.Check.Label htmlFor="customR9">Last quater</Form.Check.Label>
</Form.Check>
</Dropdown.Item>
<Dropdown.Item>
<Form.Check className="form-check-theme">
<Form.Check.Input type="radio" id="customR10" name="customRadio10" />
<Form.Check.Label htmlFor="customR10">Last Year</Form.Check.Label>
</Form.Check>
</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item>
<i className="dropdown-icon las la-plus" /> <span>Custom Date</span>
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</>
);
};
export default DropdownWithRadio;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.