React-Bootstrap Dropdowns Menu dividers

React-Bootstrap Dropdown menus with dividers are widely used in web design and application development. They help organize and categorize options within a dropdown menu, making it easier for users to find and select what they want. Dividers in these menus are used to visually separate different sections of the menu, creating a clear structure within the menu.

Syntax:

<Dropdown.Divider />

Props in Dropdown.Divider Component:

• show: This attribute is used to toggle the visibility of the menu.
• eventKey: This attribute is used to differentiate between the items of the menu.

Example 1: The below example demonstrates the usage of Menu Dividers in dropdowns. The menu features a divider, which aids in visually distinguishing menu items. Activation of the menu occurs upon clicking the “Open” button, and it offers selections such as “Home,” “Practice,” and “Courses.” Following these options, there is a separator, and then additional items like “Tutorials” and “POTD” are presented in the menu.

Javascript

//App.js

import "bootstrap/dist/css/bootstrap.css";
import Dropdown
    from "react-bootstrap/Dropdown";

export default
    function App() {
    return (
        <div style={{
            display: "block",
            width: 700, padding: 30
        }}>
            <h2>
                React-Bootstrap Dropdown Divider
            </h2>
            <Dropdown>
                <Dropdown.Toggle
                    variant="success">Open
                </Dropdown.Toggle>
                <Dropdown.Menu>
                    <Dropdown.Item
                        href="#">Home
                    </Dropdown.Item>
                    <Dropdown.Item
                        href="#">Practice
                    </Dropdown.Item>
                    <Dropdown.Item
                        href="#">Courses
                    </Dropdown.Item>
                    <Dropdown.Divider />
                    <Dropdown.Item href="#">
                        Tutorials
                    </Dropdown.Item>
                    <Dropdown.Item href="#">
                        POTD
                    </Dropdown.Item>
                </Dropdown.Menu>
            </Dropdown>
        </div>
    );
}

Output:

Example 2: Below example demonstrates the usage of custom divider in a dropdown. In this React application, React-Bootstrap is used to create a dropdown menu. Notably, it features a uniquely styled divider to visually separate choices such as “Home,” “Practice,” and “Courses” when the user clicks the “Open” button. Furthermore, the menu offers additional items like “Tutorials” and “POTD.”

Javascript

import "bootstrap/dist/css/bootstrap.css";
import Dropdown
    from "react-bootstrap/Dropdown";

export default
    function App() {
    // Custom CSS for the divider
    const dividerStyle =
    {
        backgroundColor: "green",
        height: "5px",
        margin: "5px 0",
    };

    return (
        <div style={{
            display: "block",
            width: 700, padding: 30
        }}>
            <h2>React-Bootstrap Dropdown Divider</h2>
            <Dropdown>
                <Dropdown.Toggle variant="success">
                    Open
                </Dropdown.Toggle>
                <Dropdown.Menu>
                    <Dropdown.Item href="#">
                        Home
                    </Dropdown.Item>
                    <Dropdown.Item href="#">
                        Practice
                    </Dropdown.Item>
                    <Dropdown.Item href="#">
                        Courses
                    </Dropdown.Item>
                    <div style={dividerStyle}></div>
                    <Dropdown.Item href="#">
                        Tutorials
                    </Dropdown.Item>
                    <Dropdown.Item href="#">
                        POTD
                    </Dropdown.Item>
                </Dropdown.Menu>
            </Dropdown>
        </div>
    );
}

Output:

Reference: https://react-bootstrap.netlify.app/docs/components/dropdowns/#menu-dividers