React.js Blueprint Menu Component CSS

Last Updated : 25 Aug, 2022

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;