Skip to content
Related Articles

Related Articles

React Suite Nav Appearance

View Discussion
Improve Article
Save Article
  • Last Updated : 15 Jun, 2022
View Discussion
Improve Article
Save Article

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!