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.

Javascript

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

function App() {
    return (
        <div style={{
            display: 'block', width: 400, padding: 30
        }}>
            <h4>ReactJS Blueprint Menu Component</h4>
            <Menu className={Classes.ELEVATION_1}>
                <MenuItem icon={<Icon icon="home" />} text="Home" />
                <MenuDivider />
                <MenuItem icon="new-link" text="WebLinks" />
                <MenuItem icon="user" text="Profile" />
                <MenuDivider />
                <MenuItem icon="cog" text="Setting" />
            </Menu>
        </div >
    );
}

export default App;

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 

Javascript

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

function App() {
    return (
        <div style={{
            display: 'block', width: 400, padding: 30
    }}>
    <h1 style={{color:'green'}}>GeeksforGeeks</h1>
            <h4>ReactJS Blueprint Menu Component</h4>
            <Menu className={Classes.ELEVATION_1}>
        <MenuItem icon={<Icon icon="home" />} text="Home" >
        <MenuItem  text="GeeksforGeeks" />
        <MenuItem  text="GeeksforGeeks School" />
        </MenuItem>
                <MenuDivider />
                <MenuItem icon="new-link" text="WebLinks" />
                <MenuItem icon="user" text="Profile" />
                <MenuDivider />
        <MenuItem icon="cog" text="Setting" />
        <MenuDivider/>
        <MenuItem icon="style" text="Style">
        <MenuItem icon="bold" text="Bold" />
        <MenuItem icon="italic" text="Italic" />
        <MenuItem icon="underline" text="Underline" />
    </MenuItem>
            </Menu>
        </div >
    );
}

export default App;

Output:

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