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
Last Updated :
24 Jun, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...