<div id="app"></div>
<div id="app2"></div>
const DividerMenuItem = () => <div className="dropdown-divider" />;
const DropDownMenuItem = props => (
<a className="dropdown-item" href={props.link}>
{props.displayText}
</a>
);
const DropDownMenu = props => {
return (
<div className="dropdown-menu">
{props.menuItems.map((menuItem, index) => {
if (menuItem.displayText || menuItem.link) {
return (
<DropDownMenuItem
key={index}
link={menuItem.link}
displayText={menuItem.displayText}
/>
);
} else {
return <DividerMenuItem key={index} />;
}
})}
</div>
);
};
const DropDown = props => {
return (
<div className="btn-group">
{props.splitButton && (
<button type="button" className={`btn ${props.buttonStyle}`}>
{props.displayText}
</button>
)}
{props.splitButton ? (
<button
type="button"
className={`btn ${
props.buttonStyle
} dropdown-toggle dropdown-toggle-split`}
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<span className="sr-only">Toggle Dropdown</span>
</button>
) : (
<button
type="button"
className={`btn ${props.buttonStyle} dropdown-toggle`}
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
{props.displayText}
</button>
)}
<DropDownMenu menuItems={props.menuItems} />
</div>
);
};
const menuItems = [
{ displayText: "HTML", link: "#" },
{ displayText: "CSS action", link: "#" },
{ displayText: "Javascript", link: "#" },
{},
{ displayText: "Java", link: "#" },
{ displayText: "C++", link: "#" },
{ displayText: "C#.NET", link: "#" },
{},
{ displayText: "Oracle", link: "#" },
{ displayText: "SQL Server", link: "#" },
{ displayText: "MySQL", link: "#" }
];
const buttonStyles = [
"btn-primary",
"btn-secondary",
"btn-success",
"btn-danger",
"btn-warning",
"btn-info",
"btn-light",
"btn-dark",
"btn-link"
];
const Buttons = props => (
<div className="btn-group-vertical">
{props.buttonStyles.map((buttonStyle, index) => (
<DropDown
key={index}
buttonStyle={buttonStyle}
splitButton={index % 2 == 0}
displayText="Technologies"
menuItems={menuItems}
/>
))}
</div>
);
ReactDOM.render(
<div className="mb-2">
<DropDown
buttonStyle="btn-danger"
splitButton={false}
displayText="Technologies"
menuItems={menuItems}
/>
</div>,
document.getElementById("app")
);
ReactDOM.render(
<Buttons buttonStyles={buttonStyles} />,
document.getElementById("app2")
);
Also see: Tab Triggers