React.js Blueprint Menu Component item

BlueprintJS is a React-based UI toolkit for the web. This library is very optimized and popular for building interfaces that are complex data-dense for desktop applications. In this article, we will discuss React.js BluePrint Menu Component Item.

A Menu is a list of interactive items and a menu item is an interactive item inside the menu. A menu item can be rendered using the MenuItem Component and under the hood, it uses an <a> element wrapped in a <li> tag.

React.js BluePrint Menu Item Properties:

• active: This property states whether the item should be rendered with an active appearance.
• children: Children of the MenuItem Component. They will be rendered as a submenu.
• className: This property is used to set a list of space-separated className for the child component.
• disabled: This boolean property states whether the item is enabled or disabled.
• href: This property is used to provide a link URL to which the browser will navigate upon clicking on the item.
• htmlTitle: This property is used to pass the HTML title to the MenuItem component.
• icon: This property is used to set an icon to render before the text of the component.
• intent: The intent property is used to set the intent of the component.
• label:  The label property is used to set the right-aligned label text content for the component.
• labelClassName: This property states a space-separated list of the class names to be applied to the wrapper element of the label.
• labelElement: This property is used to set the right-aligned label element. A JSX element can be passed to this property, unlike the label.
• multiline: This boolean property states whether the text of the component will be wrapped when overflow the width.
• onClick: This property is used to assign an action to be performed upon clicking on the component.
• popoverProps: This property defined the properties to spread to the popover component.
• roleStructure: This property is used to change the ARIA role property structure of the MenuItem.
• selected: This boolean property defines whether this item is selected or not.
• shouldDismissPopover: This property defines whether an enabled item not having a submenu should automatically close its parent popover when clicked.
• submenuProps: This property defined the properties to spread to the child component.
• tagName: This property states the name of the HTML tag which will wrap the MenuItem. For Example: “a“.
• target: This property is used to set the Link target attribute. “_blank” can be used if you want to open the tab in a new window.
• text: This property sets the text of the MenuItem component.
• textClassName: This property states a space-separated list of the class names to be applied to the wrapper element of the text.

Syntax:

<MenuItem icon="cog" 
    labelElement={...} 
    text="..." 
    intent="primary | danger | warning | success" 
    onClick={...}
    ....
/>

Creating React Application And Installing Modules:

Step 1: Create a React application using the following command:

npx create-react-app myApp

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

cd myApp

Step 3: After creating the ReactJS application, Install the required modules using the following command:

npm install @blueprintjs/core @blueprintjs/icons

Project Structure: After following the above steps, the project structure will look as below:

Project Structure

Example 1: Now write down the following code in the App.js file. In this example, we used the MenuIcon inside the Menu component to create a menu.

• File: app.js

Javascript

import React from 'react'
import { Menu, MenuItem, Icon } from '@blueprintjs/core';
import '@blueprintjs/core/lib/css/blueprint.css';
import '@blueprintjs/icons/lib/css/blueprint-icons.css'

function App() {

    const divStyle = {
        display: 'block', width: 500,
        padding: 30
    };
    return (
        <div style={divStyle}>
            <h2 style={{color: "green"}}>GeeksforGeeks</h2>
            <h3>React.js BluePrint Menu Component Item</h3>
            <Menu
                style={{
                    backgroundColor: "#BFFFAF",
                    width: "150px"
                }}>
                <MenuItem text="Your Profile" />
                <MenuItem icon="home" text="Home" />
                <MenuItem icon="build" text="Practice" />
                <MenuItem icon="book" text="Courses" />
                <MenuItem icon="cog"
                    labelElement={<Icon icon="share" />}
                    text="Settings..." intent="primary"
                />
            </Menu>
        </div>
    );
}

export default App;

Steps to run the app:

Execute the following command from your project folder to run the app.

npm start

Output:

Example 2: In this example, we used the onClick property of the MenuItem component to toggle the disabled property of the Home MenuItem whenever the last MenuItem is clicked.

• File: app.js

Javascript

import { React, useState } from 'react';
import { Menu, MenuItem } from '@blueprintjs/core';
import '@blueprintjs/core/lib/css/blueprint.css';
import '@blueprintjs/icons/lib/css/blueprint-icons.css'

function App() {

    const [isHomeDisabled, setisHomeDisabled] = useState(false);

    const divStyle = {
        display: 'block', width: 500,
        padding: 30
    };

    function toggleHome() {
        setisHomeDisabled(!isHomeDisabled);
    }
    return (
        <div style={divStyle}>
            <h2 style={{color: "green"}}>GeeksforGeeks</h2>
            <h3>React.js BluePrint Menu Component Item</h3>
            <Menu
                style={{
                    backgroundColor: "#BFFFAF",
                    width: "250px"
                }}>
                <MenuItem
                    text="Your Profile" />
                <MenuItem icon="home"
                    text="Home"
                    disabled={isHomeDisabled}
                />
                <MenuItem
                    icon="build"
                    text="Practice"
                />
                <MenuItem
                    icon="book"
                    text="Courses"
                />
                <MenuItem
                    icon="cog"
                    text="Disable/Enable Home MenuItem"
                    onClick={toggleHome}
                />
            </Menu>
        </div>
    );
}

export default App;

Output:

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