ReactJS Blueprint Menu Component

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. Menu Component provides a way for users to display lists of interactive items. We can use the following approach in ReactJS to use the ReactJS Blueprint Menu Component.

Menu Props:

• className: It is used to denote a space-delimited list of class names to pass along to a child element.
• large: It is used to indicate whether the menu items in this menu should use a large appearance or not.
• ulRef: It is used to denote the Ref handler that receives the HTML <ul> element backing this component.

MenuItem Props:

• active: It is used to indicate whether this menu item should appear with an active state.
• children: It is used to denote the children of this component will be rendered in a submenu.
• className: It is used to denote a space-delimited list of class names to pass along to a child element.
• disabled: It is used to indicate whether this menu item is non-interactive or not.
• href: It is used to denote the link URL.
• htmlTitle: It is used to denote the HTML title to be passed to the component
• icon: It is used to denote the icon name or icon element to render before the text.
• intent: It is used to denote the visual intent color to apply to element.
• label: It is used to right-aligned label text content, useful for displaying hotkeys.
• labelClassName: It is used to denote a space-delimited list of class names to pass along to the right-aligned label wrapper element.
• labelElement: It is used to right-aligned label content, useful for displaying hotkeys.
• multiline: It is used to indicate whether the text should be allowed to wrap to multiple lines or not.
• onClick: It is used to denote a click event handler.
• popoverProps: It is used to denote the props to spread to Popover.
• shouldDismissPopover: It is used to indicate whether an enabled item without a submenu should automatically close its parent popover when clicked or not.
• tagName: It is used to denote the name of the HTML tag that wraps the MenuItem.
• target: It is used to denote the link target attribute.
• text: It is used to denote the Item text, required for usability.
• textClassName: It is used to denote a space-delimited list of class names to pass along to the text wrapper element.

MenuDivider Props:

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

Creating React Application And Installing Module:

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

npx create-react-app foldername

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

cd foldername

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

npm install @blueprintjs/core

Project Structure: It will look like the following.

Project Structure

Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Example 2: In this example, we will learn, how can we create sub Menu Items 

Output:

 

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