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

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

Output:

 

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