React Suite is a front-end library designed for the middle platform and back-end products. The React Suite <Nav.Menu> props allow the user to navigate through a sub-list of options in form of a menu.
React Suite <Nav.Menu>Props:
- icon: It defines an icon added to open the menu.
- noCaret: It is a boolean value that denotes whether to hide the caret icon. By default it is false.
- onClose: A void Callback function when the menu closes.
- onOpen: A void Callback function when the menu opens.
- onToggle: A void Callback function when the menu opens/closes.
- openDirection: It denotes the direction that the menu opens towards. It has two options “start” and “end”.
- title: Defines the title of the menu.
Syntax:
<Nav>
<Nav.Menu></Nav.Menu>
</Nav>
Prerequisite:
- Introduction and installation reactJS
- React Suite Nav Component
- React Suite <Nav.Item>
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 rsuite
Project Structure: It will look like this:
Step to Run Application: Run the application using the following command from the project’s root directory.
npm start
Example 1: We are importing the Nav Component from “rsuite”, and to apply the default styles of the components, we are importing “rsuite/dist/rsuite.min.css”.
We are adding three <Nav.Menu> component and added some <Nav.Item> within it. To the first menu, we added onToggle which will call a function named onToggleChange that will show “toggling !” in the alert, and to the title prop added “Geeksforneveropen”. To the second menu component, we are passing “user” to the title prop, the Menu icon to the icon prop that we have imported from “@rsuite/icons” and passed noCaret.
App.js
Javascript
import { Nav } from "rsuite"; import "rsuite/dist/rsuite.min.css"; import { Menu } from "@rsuite/icons"; function App() { const onToggleChange = () => { alert("toggling !"); }; return ( <div className="App"> <h4> React Suite <Nav.Menu></h4> <Nav> <Nav.Menu title="Geeksforneveropen" onToggle={onToggleChange}> <Nav.Item>Articles</Nav.Item> <Nav.Item>Problems</Nav.Item> </Nav.Menu> <Nav.Menu title="User" icon={<Menu />} noCaret> <Nav.Item>Login</Nav.Item> <Nav.Item>Register</Nav.Item> </Nav.Menu> </Nav> </div> ); } export default App; |
Output:
Example 2: In this example, we are adding three <Nav.Menu> component to the first and we have passed the prop openDirection with a value “end”. To the second menu component, to the onOpen we are calling an onOpenHandle function that shows “onOpenHandler !” in the alert. To the third menu component, to the onClose we are calling an onCloseHandle function that shows “onCloseHandler !” in the alert.
App.js
Javascript
import { Nav } from "rsuite"; import "rsuite/dist/rsuite.min.css"; function App() { const onOpenHandle = () => { alert("onOpenHandler !"); }; const onCloseHandle = () => { alert("onCloseHandler !"); }; return ( <div className="App"> <h4> React Suite <Nav.Menu></h4> <Nav> <Nav.Menu title="Geeksforneveropen" openDirection="end"> <Nav.Item>Articles</Nav.Item> <Nav.Item>Problems</Nav.Item> </Nav.Menu> <Nav.Menu title="onOpen Menu" onOpen={onOpenHandle}> <Nav.Item>Articles</Nav.Item> <Nav.Item>Problems</Nav.Item> </Nav.Menu> <Nav.Menu title="onClose Menu" onClose={onCloseHandle}> <Nav.Item>Articles</Nav.Item> <Nav.Item>Problems</Nav.Item> </Nav.Menu> </Nav> </div> ); } export default App; |
Output:
Reference: https://rsuitejs.com/components/nav/#code-lt-nav-menu-gt-code
