React.js Blueprint Menu Component Props

Last Updated : 03 Aug, 2022

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 Menu Component provides a list of interactive items to the user.

React.js Blueprint props are:

children: The Menu items serve as the children of this component.
className: It is a space-delimited list of class names to pass along to a child element.
ulRef: It denotes a Ref handler that receives the HTML <ul> element backing this component.
large: It is a boolean value. It defines whether the menu items in this menu should use a large appearance or not. It is true by default.

Syntax:

<Menu> ... </Menu>

Prerequisite:

Introduction and installation ReactJs
React Hook UseState

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, Divider, 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 two <Menu> components, within it we are adding the MenuItem Components. To all the Menu components we are adding different classNames.

App.js

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

function App() {
    return (
        <div className="App" style={{ marginLeft: 10 }}>
            <h4> ReactJS Menu Component Props</h4>
            <Menu className={Classes.ELEVATION_3}>
                <MenuItem text="Algorithms" />
                <MenuItem text="Data Structures" />
                <MenuItem text="GATE" />
                <MenuItem text="Web Technologies" />
            </Menu>
            <Divider />
            <Menu className={Classes.ELEVATION_0}>
                <MenuItem text="Algorithms" />
                <MenuItem text="Data Structures" />
                <MenuItem text="GATE" />
                <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 the Menu Component, we are adding the MenuDivider and MenuItem Components.

We are further adding a button with a label as the state-defined selectBool created using react hook useState, added an onClick function that will call the onHandleChange function that will change the current state of the selectBool. We are passing the selectBool to the large prop.

App.js

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

function App() {
    const [selectBool, setSelectBool] = useState(false);

    const onHandleChange = () => {
        setSelectBool(!selectBool);
    };
    return (
        <div className="App" style={{ marginLeft: 10 }}>
            <h4> ReactJS Menu Component Props</h4>
            <p>
                <b style={{ marginLeft: 30 }}>large ?</b>
                <button
                    onClick={onHandleChange}
                    style={{ 
                        marginLeft: 10, 
                        fontSize: 15, 
                        padding: 10 
                    }}
                >
                    {"" + selectBool}
                </button>
            </p>

            <Menu large={selectBool}>
                <MenuItem icon="asterisk" text="Menu" />
                <MenuDivider />
                <MenuItem text="Algorithms" />

                <MenuItem text="Data Structures" />

                <MenuItem text="GATE" />
                <MenuItem text="Software Designs" />
                <MenuItem text="Interview Corner" />
                <MenuItem text="Web Technologies" />
            </Menu>
        </div>
    );
}

export default App;