React.js Blueprint Menu Component divider
React.js Blueprint is a front-end UI toolkit. It is very optimized and popular for building interfaces that are complex data-dense for desktop applications. React.js Blueprint MenuDivider Component divides two Menu items into a Menu Component.
The props are:
- children: This component does not support children.
- className: It is a space-delimited list of class names to pass along to a child element.
- title: The title of the MenuDivider.
Syntax:
<MenuDivider />
Prerequisite:
Creating React Application and Module installation:
Step 1: Create the react project folder, for that open the terminal, and write the command npm create-react-app folder name, if you have already installed create-react-app globally. If you haven’t, install create-react-app globally using the command npm -g create-react-app or install locally by npm i create-react-app.
npm create-react-app project
Step 2: After creating your project folder(i.e. project), move to it by using the following command.
cd project
Step 3: now install the dependency by using the following command:
npm install @blueprintjs/core
Project Structure: It will look like this:
Example 1: We are importing the Menu, MenuItem, MenuDivider, and Classes from “@blueprintjs/core”. To apply the default styles of the components we are importing “@blueprintjs/core/lib/css/blueprint.css”.
We are adding the <Menu> components, within it we are adding the MenuItem and MenuDivider Components. To all the MenuDivider components we are adding different classNames.
App.js
Javascript
import "@blueprintjs/core/lib/css/blueprint.css" ;
import { Menu, Classes, MenuItem, MenuDivider }
from "@blueprintjs/core" ;
function App() {
return (
<div className= "App" >
<h4> ReactJS Menu Component Divider</h4>
<Menu>
<MenuItem text= "Algorithms" />
<MenuDivider className={Classes.ELEVATION_0} />
<MenuItem text= "Data Structures" />
<MenuDivider className={Classes.BREADCRUMBS} />
<MenuItem text= "GATE" />
<MenuDivider className={Classes.ELEVATION_4} />
<MenuItem text= "Web Technologies" />
</Menu>
</div>
);
}
export default App;
|
Step to Run Application: Run the application using the following command from the project’s root directory.
npm start
Output:
Example 2: To all the MenuDivider components we are adding different classNames and different values to title.
App.js
Javascript
import "@blueprintjs/core/lib/css/blueprint.css" ;
import { Menu, Classes, MenuItem, MenuDivider }
from "@blueprintjs/core" ;
function App() {
return (
<div className= "App" >
<h4>ReactJS Menu Component divider</h4>
<Menu>
<MenuDivider title= "USER"
className={Classes.MENU_HEADER} />
<MenuItem text= "Login" />
<MenuItem text= "Register" />
<MenuDivider title= "Courses"
className={Classes.ELEVATION_2} />
<MenuItem text= "For Students" />
<MenuItem text= "All Courses" />
</Menu>
</div>
);
}
export default App;
|
Step to Run Application: Run the application using the following command from the project’s root directory.
npm start
Output:
Reference: https://blueprintjs.com/docs/#core/components/menu.menu-divider
Last Updated :
20 Jul, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...