A React suite is a library of React components, 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 appearance. A nav component provides a list of various types of navigation menus, which can be landscape and portrait layouts. A nav component can have two types of appearance i.e. tabs, and subtle.
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.
- 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 statement
import { Nav } from "rsuite/";
// App.Js file
function App() {
<Nav>
<Nav.Item appearance="tabs">...</Nav.Item>
<Nav.Item appearance="subtle">...</Nav.Item>
</Nav>
}
Example 1: Below example demonstrates the Nav with “tabs” appearance.
Javascript
import { useState } from "react"; import { Nav } from "rsuite/"; import "rsuite/dist/rsuite.min.css"; const MyNav = ({ active, onSelect, ...props }) => { return ( <Nav {...props} activeKey={active} onSelect={onSelect} style={{ marginBottom: 80 }}> <Nav.Item eventKey="home">Home</Nav.Item> <Nav.Item eventKey="practice">Practice</Nav.Item> <Nav.Item eventKey="tutorials">Tutorials</Nav.Item> <Nav.Item eventKey="job">Jobs</Nav.Item> <Nav.Item eventKey="about">About</Nav.Item> </Nav> ); }; export default function App() { const [activeTab, setActiveTab] = useState('home'); return ( <center> <div> <h2>neveropen</h2> <h4 style={{ color: "green" }}> React Suite Nav Appearance </h4> <div style={{ marginTop: 20 }}> <MyNav appearance="tabs" active={activeTab} onSelect={setActiveTab} /> <MyNav appearance="tabs" reversed active={activeTab} onSelect={setActiveTab} /> </div> </div> </center> ); } |
Output:
Example 2: Below example demonstrates the Nav with “subtle” appearance.
Javascript
import { useState } from "react"; import { Nav } from "rsuite/"; import "rsuite/dist/rsuite.min.css"; const MyNav = ({ active, onSelect, ...props }) => { return ( <Nav {...props} activeKey={active} onSelect={onSelect} style={{ marginBottom: 80 }}> <Nav.Item eventKey="home">Home</Nav.Item> <Nav.Item eventKey="practice">Practice</Nav.Item> <Nav.Item eventKey="tutorials">Tutorials</Nav.Item> <Nav.Item eventKey="job">Jobs</Nav.Item> <Nav.Item eventKey="about">About</Nav.Item> </Nav> ); }; export default function App() { const [activeTab, setActiveTab] = useState('home'); return ( <center> <div> <h2>neveropen</h2> <h4 style={{ color: "green" }}> React Suite Nav Appearance </h4> <div style={{ marginTop: 20 }}> <MyNav appearance="subtle" active={activeTab} onSelect={setActiveTab} /> <MyNav appearance="subtle" reversed active={activeTab} onSelect={setActiveTab} /> </div> </div> </center> ); } |
Output:
Reference: https://rsuitejs.com/components/nav/#appearance
