Open In App

React Suite Nav Usage Component

Improve
Improve
Like Article
Like
Save
Share
Report

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



Last Updated : 04 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads