React.js Blueprint Menu Component CSS

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

A Menu is a list of interactive items that are used to make it easier for users to navigate the parts of the website. A Menu Component can be created using only CSS classes provided with BlueprintJS. It is suggested to use the Menu React Component wherever possible.

React.js BluePrint Menu Component CSS Classes:

• bp4-menu: It is the parent component of the Menu. It should be used with the <ul> element.
• bp4-menu-item: This class is used to define a menu item inside the menu.
• bp4-icon-<name>: It is used to set the icon for the menu item. The <name> should be replaced by the icon name.
• bp4-active: This class is used to style the menu item as active.
• bp4-disabled: This class disables the menu item when applied to it.
• bp4-menu-item-label: This class is used to set the label for the menu item. It is suggested to use the <span> element for setting the label.
• bp4-menu-divider: This class is used to create a divider between the menu items. Use with <li> element
• bp4-popover-dismiss: This class should be applied when you want the popover to dismiss upon clicking of a menu item.
• bp4-menu-header: This class is used to set the header for a menu or a section of a menu.

Syntax:

<ul className='bp4-menu' style={menuStyle}>
    <li><a className='bp4-menu-item'>Item 1</a></li>
    <li><a className='bp4-menu-item'>Item 2</a></li>
    ...
</ul>

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:

Project Structure

Example 1: In this example, we used the above-listed CSS classes to create a simple Menu containing 3 items.

Steps to run the app:

Execute the following command from your project folder to run the app.

npm start

Output:

 

Example 2: This example shows a Menu Component with Section headers and Icons.

Output:

 

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