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