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.

App.js

import React from 'react'
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 CSS
            </h3>

            <ul className='bp4-menu'
                style={menuStyle}>
                <li>
                    <a
                        className='bp4-menu-item'>
                        Default MenuItem
                    </a>
                </li>
                <li>
                    <a
                        className='bp4-menu-item
                        bp4-active'>
                        Active MenuItem
                    </a>
                </li>
                <li className='bp4-menu-divider'></li>
                <li>
                    <a
                        className='bp4-menu-item
                        bp4-disabled'>
                        Disabled MenuItem
                    </a>
                </li>
            </ul>
        </div>
    );
}

export default App;

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.

App.js

import React from 'react'
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,
        backgroundColor: "#BFFFAF"
    };
    return (
        <div style={divStyle}>
            <h2
                style={{ color: "green" }}>
                GeeksforGeeks
            </h2>
            <h3>
                React.js BluePrint Menu Component CSS
            </h3>

            <ul
                className='bp4-menu'
                style={menuStyle}>
                <li class="bp4-menu-header">
                    <h6 class="bp4-heading">
                        Settings
                    </h6>
                </li>
                <li>
                    <a
                        className='bp4-menu-item
                        bp4-icon-layout-auto'>
                        Edit Profile
                    </a>
                </li>
                <li>
                    <a
                        className='bp4-menu-item
                        bp4-icon-bookmark'>
                        Bookmarks
                    </a>
                </li>
                <li>
                    <a
                        className='bp4-menu-item
                        bp4-icon-log-out'>
                        Log Out
                    </a>
                </li>
                <li class="bp4-menu-header">
                    <h6 class="bp4-heading">Privacy</h6>
                </li>
                <li>
                    <a
                        className='bp4-menu-item
                        bp4-icon-credit-card'>
                        Your Cards
                    </a>
                </li>
                <li>
                    <a
                        className='bp4-menu-item
                        bp4-icon-layout-auto'>
                        Your Data with us
                    </a>
                </li>
                <li>
                    <a
                        className='bp4-menu-item
                        bp4-icon-lock'>
                        Privacy Policy
                    </a>
                </li>
            </ul>
        </div>
    );
}

export default App;

Output:

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