React.js Blueprint Menu Component divider

React.js Blueprint is a front-end UI toolkit. It is very optimized and popular for building interfaces that are complex data-dense for desktop applications. React.js Blueprint MenuDivider Component divides two Menu items into a Menu Component.

The props are:

• children: This component does not support children.
• className: It is a space-delimited list of class names to pass along to a child element.
• title: The title of the MenuDivider.

Syntax:

 <MenuDivider />

Prerequisite:

• Introduction and installation ReactJS
• ReactJS Blueprint Menu Component
  

Creating React Application and Module installation:

Step 1: Create the react project folder, for that open the terminal, and write the command npm create-react-app folder name, if you have already installed create-react-app globally. If you haven’t, install create-react-app globally using the command npm -g create-react-app or install locally by npm i create-react-app.

npm create-react-app project

Step 2: After creating your project folder(i.e. project), move to it by using the following command.

cd project

Step 3:  now install the dependency by using the following command:

npm install @blueprintjs/core

Project Structure: It will look like this:

Example 1: We are importing the Menu, MenuItem, MenuDivider, and Classes from “@blueprintjs/core”. To apply the default styles of the components we are importing “@blueprintjs/core/lib/css/blueprint.css”.

We are adding the <Menu> components, within it we are adding the MenuItem and MenuDivider Components. To all the MenuDivider components we are adding different classNames.

App.js

Javascript

import "@blueprintjs/core/lib/css/blueprint.css";
import { Menu, Classes, MenuItem, MenuDivider }
    from "@blueprintjs/core";

function App() {
  return (
    <div className="App">
      <h4> ReactJS Menu Component Divider</h4>
      <Menu>
        <MenuItem text="Algorithms" />

        <MenuDivider className={Classes.ELEVATION_0} />
        <MenuItem text="Data Structures" />

        <MenuDivider className={Classes.BREADCRUMBS} />
        <MenuItem text="GATE" />
        <MenuDivider className={Classes.ELEVATION_4} />
        <MenuItem text="Web Technologies" />
      </Menu>
    </div>
  );
}

export default App;

Step to Run Application: Run the application using the following command from the project’s root directory.

npm start

Output:

Example 2: To all the MenuDivider components we are adding different classNames and different values to title.

App.js

Javascript

import "@blueprintjs/core/lib/css/blueprint.css";
import { Menu, Classes, MenuItem, MenuDivider }
    from "@blueprintjs/core";

function App() {
  return (
    <div className="App">
      <h4>ReactJS Menu Component divider</h4>
      <Menu>
        <MenuDivider title="USER"
            className={Classes.MENU_HEADER} />
        <MenuItem text="Login" />
        <MenuItem text="Register" />
        <MenuDivider title="Courses"
            className={Classes.ELEVATION_2} />
        <MenuItem text="For Students" />
        <MenuItem text="All Courses" />
      </Menu>
    </div>
  );
}

export default App;

Step to Run Application: Run the application using the following command from the project’s root directory.

npm start

Output:

Reference: https://blueprintjs.com/docs/#core/components/menu.menu-divider