React Suite Nav Usage Component
React suite is a library of React components that has sensible UI design, and a friendly development experience. It is supported in all major browsers. It provides pre-built components of React which can be used easily in any web application.
In this article, we’ll learn about React Suite Nav Usage Component. A nav component provides a list of various types of navigation menus, which can be landscape and portrait layouts.
Nav Props:
- activeKey: It denotes the Active key which corresponds to eventkey in Nav.Item.
- appearance: It is used for navigation appearances.
- children: It denotes the contents of the component.
- classPrefix: It denotes the prefix of the component CSS class.
- justified: It is used to justify navigation.
- onSelect: It is a callback function that is triggered after selection.
- pullRight: It is used to make it appears on the right.
- vertical: It is used for stacked navigation.
Nav.Item Props:
- active: It denotes the activation status.
- as: It is used to add a custom element type.
- children: It is used to show the content of the components.
- disabled: It is used to disable the status.
- href: It denotes the hyperlink.
- icon: It is used to set the icon for the component.
- onSelect: It is a callback function that is triggered after the selection of any item.
Nav.Menu Props:
- icon: It is used to add an icon of the item that opens the menu.
- noCaret: It denotes whether to hide the caret icon.
- onClose: It is a callback function when the menu closes.
- onOpen: It is a callback function when the menu opens.
- onToggle: It is a callback function when the menu opens/closes.
- openDirection: It gives direction for the menu from where should it be open (only available on submenus).
- title: It is used to add the content of the item that opens the menu.
Creating React Application And Installing Module:
Step 1: Create a React application using the given command:
npm create-react-app projectname
Step 2: After creating your project, move to it using the given command:
cd projectname
Step 3: Now Install the rsuite node package using the given command:
npm install rsuite
Project Structure: Now your project structure should look like the following:
Syntax:
import { Nav } from 'rsuite';
// or
import Nav from 'rsuite/Nav';
<Nav> ... </Nav>
Example 1: Below example demonstrates the nav usage component.
Javascript
import "rsuite/dist/rsuite.min.css" ;
import React, { useState } from "react" ;
import { Nav } from "rsuite" ;
import HomeIcon from '@rsuite/icons/legacy/Home' ;
export default function App() {
const [active, setActive] = useState( 'home' );
const Navbar = ({ active, onSelect, ...props }) => {
return (
<Nav {...props} activeKey={active}
onSelect={onSelect}
style={{ marginBottom: 50 }}>
<Nav.Item eventKey= "home"
icon={<HomeIcon />}>
Home
</Nav.Item>
<Nav.Item eventKey= "practice" >
Practice
</Nav.Item>
<Nav.Item eventKey= "job" >
Jobs
</Nav.Item>
<Nav.Item eventKey= "tutorial" >
Tutorials
</Nav.Item>
<Nav.Item eventKey= "contact" >
Contact
</Nav.Item>
</Nav>
);
};
return (
<div>
<div style={{ textAlign: "center" }}>
<h2>GeeksforGeeks</h2>
<h4 style={{ color: "green" }}>
React Suite Nav Usage Component
</h4>
</div>
<div style={{
padding: 20,
textAlign: 'center'
}}>
<Navbar appearance= "tabs"
active={active}
onSelect={setActive} />
</div>
</div>
);
}
|
Step to run the application: Open the terminal and type the following command.
npm start
Output:
Example 2: Below example demonstrates the usage of the multi-level nav component.
Javascript
import "rsuite/dist/rsuite.min.css" ;
import React, { useState } from "react" ;
import { Nav } from "rsuite" ;
import HomeIcon from "@rsuite/icons/legacy/Home" ;
export default function App() {
const [active, setActive] = useState( "home" );
const Navbar = ({ active, onSelect, ...props }) => {
return (
<Nav
{...props}
activeKey={active}
onSelect={onSelect}
style={{ marginBottom: 50 }}
>
<Nav.Item eventKey= "home"
icon={<HomeIcon />}>
Home
</Nav.Item>
<Nav.Item eventKey= "practice" >
Practice
</Nav.Item>
<Nav.Item eventKey= "job" >
Jobs
</Nav.Item>
<Nav.Menu title= "Tutorials" >
<Nav.Item>Java</Nav.Item>
<Nav.Item>C++</Nav.Item>
<Nav.Item>Android dev</Nav.Item>
<Nav.Item>Web Dev</Nav.Item>
</Nav.Menu>
<Nav.Item eventKey= "contact" >
Contact
</Nav.Item>
</Nav>
);
};
return (
<div>
<div style={{ textAlign: "center" }}>
<h2>GeeksforGeeks</h2>
<h4 style={{ color: "green" }}>
React Suite Nav Usage Component
</h4>
</div>
<div style={{
padding: 20,
textAlign: "center"
}}>
<Navbar appearance= "subtle"
active={active}
onSelect={setActive} />
</div>
</div>
);
}
|
Output:
Reference: https://rsuitejs.com/components/nav/#usage
Last Updated :
04 Aug, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...