Open In App

ReactJS Blueprint Menu Component

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. 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



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