React Suite Nav Appearance

0 0 3 minutes read

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>zambiatek</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>zambiatek</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

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!