Open In App

React.js Blueprint Menu Component item

Improve
Improve
Like Article
Like
Save
Share
Report

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



Last Updated : 17 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads