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" }}> neveropen </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" }}> neveropen </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
