React.js Blueprint Menu Components Submenus

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

A Menu is a list of interactive items. A Submenu can be created by nesting one or more MenuItems inside another MenuItem. The submenus are javascript-only components and cannot be created using just CSS because they use the Popover component under the hood. Submenus open to the right of their parent but they adjust themselves if there is not enough on the right.

React.js BluePrint Menu Components Submenus Properties:

Since Submenu uses MenuItem Component so all the properties listed below can be used.

• active: It is used to render a menu item with an active appearance.
• children: This property defines the children of MenuItem. They will be shown as submenus.
• className: It is used to set CSS classes for the child component.
• disabled: This property is used to disable the MenuItem.
• href: We can pass a URL to this property to navigate to upon clicking on the MenuItem.
• htmlTitle: It defines the HTML title of the MenuItem component.
• icon: It is used to set an icon for the MenuItem component. The icon will be rendered before the text.
• intent: It is used to set different intent colors for the MenuItem.
• label: It is used to set the label text for the MenuItem. The label will be aligned to the right.
• labelClassName: This property is used to set the CSS classes for 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: If this property is set to true, the text of the MenuItem will be wrapped to a new line if it overflows the Menu width.
• onClick: This property is used to assign an action to be performed upon clicking on the component.
• popoverProps: This property is used to pass the properties for the popover component.
• roleStructure: This property is used to change the ARIA role property structure of the MenuItem.
• selected: This property tells whether the MenuItem 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 is used to pass the properties for the child component.
• tagName: It defined the HTML tag which will wrap the MenuItem component. 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: It is used to set CSS classes for the wrapper element of the text.

Syntax:

<Menu>
    <MenuItem text="...">
        <MenuItem text="..." />
        <MenuItem text="..." />
        <MenuItem text="..." />
    </MenuItem>
</Menu>

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:

Example 1: Now write down the following code in the App.js file. In this example, We created a submenu by nesting MenuItems inside MenuItem.

App.js

import React 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 divStyle = {
        display: 'block', width: 450,
        padding: 30
    };
    const menuStyle = {
        width: 150
    };
    return (
        <div style={divStyle}>
            <h2
                style={{ color: "green" }}>
                GeeksforGeeks
            </h2>
            <h3>
                React.js BluePrint Menu Component Submenu
            </h3>

            <Menu style={menuStyle}>
                <MenuItem text="Home" />
                <MenuItem text="Courses">
                    <MenuItem text="DSA Self Paced" />
                    <MenuItem text="GATE 2023" />
                    <MenuItem
                        text="Full Stack Development" />
                </MenuItem>
                <MenuItem text="Practice" />
            </Menu>
        </div>
    );
}

export default App;

Step to run the App: Execute the command below to run the app and head over to http://localhost:3000/ to see the output

npm start

Output:

Example 2: This example shows the nesting of a submenu inside an item of a submenu. i.e two-level nesting of MenuItems.

App.js

import React 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 divStyle = {
        display: 'block', width: 450,
        padding: 30
    };
    const menuStyle = {
        width: 150
    };
    return (
        <div style={divStyle}>
            <h2
                style={{ color: "green" }}>GeeksforGeeks
            </h2>
            <h3>
                React.js BluePrint Menu Component Submenu
            </h3>

            <Menu style={menuStyle}>
                <MenuItem text="Home" />
                <MenuItem text="Courses">
                    <MenuItem text="DSA Self Paced" />
                    <MenuItem text="GATE 2023">
                        <MenuItem
                            text="Operating System" />
                        <MenuItem
                            text="Computer Networks" />
                        <MenuItem text="DSA" />
                    </MenuItem>
                    <MenuItem
                        text="Full Stack Development" />
                </MenuItem>
                <MenuItem text="Practice" />
            </Menu>
        </div>
    );
}

export default App;

Output:

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