React Suite Nav Appearance
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>GeeksforGeeks</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>GeeksforGeeks</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
Last Updated :
15 Jun, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...