React Suite Nav Removable

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 Removable. A nav component provides a list of various types of navigation menus, which can be landscape and portrait layouts. A nav removable component provides the functionality to remove a nav item from the navbar, and may also add a new item to a nav component.

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

Step 4: Install the responsive-nav node package:

npm install --save @rsuite/responsive-nav

Project Structure: Now your project structure should look like the following:

Syntax:

// Import statement
import ResponsiveNav from "@rsuite/responsive-nav";

// App.Js file
function App() {
    <ResponsiveNav removable onItemRemove={eventKey...}>
        <ResponsiveNav.Item>...</ResponsiveNav.Item>
        ....
    </ResponsiveNav>
}

Example 1: This example demonstrates the nav removable component.

Javascript

import { useState } from "react";
import "rsuite/dist/rsuite.min.css";
import ResponsiveNav from "@rsuite/responsive-nav";

const navItems = [
    { eventKey: "A", label: "Home" },
    { eventKey: "B", label: "Practice" },
    { eventKey: "C", label: "Tutorials" },
    { eventKey: "C", label: "GBlog" },
    { eventKey: "C", label: "Jobs" },
];

export default function App() {
    const [activeTab, setActiveTab] = useState("home");
    const [nItems, setNItems] = useState(navItems);

    return (
        <center>
            <div>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite Nav Removable
                </h4>

                <div style={{ marginTop: 20 }}>
                    <ResponsiveNav
                        removable
                        appearance="tabs"
                        moreProps={{ noCaret: true }}
                        activeKey={activeTab}
                        onSelect={setActiveTab}
                        onItemRemove={(eventKey) => {
                            const nextItems = [...nItems];
                            nextItems.splice(
                                nextItems.map(
                                    (item) => item.eventKey)
                                        .indexOf(eventKey),
                                1
                            );
                            setNItems(nextItems);
                            setActiveTab(
                                nextItems[0] ?
                                    nextItems[0].eventKey : null
                            );
                        }}
                    >
                        {nItems.map((item) => (
                            <ResponsiveNav.Item
                                key={item.eventKey}
                                eventKey={item.eventKey}>
                                {item.label}
                            </ResponsiveNav.Item>
                        ))}
                    </ResponsiveNav>
                </div>
            </div>
        </center>
    );
}

Output:

Example 2: This example demonstrates the nav item removable and the addition of the new nav item.

Javascript

import { useState } from "react";
import { Button } from "rsuite/";
import "rsuite/dist/rsuite.min.css";
import ResponsiveNav from "@rsuite/responsive-nav";
import { More } from "@rsuite/icons";

const navItems = [
    { eventKey: "A", label: "Item 1" },
    { eventKey: "B", label: "Item 2" },
    { eventKey: "C", label: "Item 3" },
];

// Function to create a new item in the nav
function getEventKey() {
    return Math.floor((Math.random() * 100) + 1) + "";
}

export default function App() {
    const [activeTab, setActiveTab] = useState("home");
    const [nItems, setNItems] = useState(navItems);

    return (
        <center>
            <div>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite Nav Removable
                </h4>

                <div style={{ marginTop: 20 }}>
                    <ResponsiveNav
                        removable
                        appearance="tabs"
                        moreText={<More />}
                        moreProps={{ noCaret: true }}
                        activeKey={activeTab}
                        onSelect={setActiveTab}
                        onItemRemove={(eventKey) => {
                            const nextItems = [...nItems];
                            nextItems.splice(
                                nextItems.map(
                                    (item) => item.eventKey)
                                        .indexOf(eventKey),
                                1
                            );
                            setNItems(nextItems);
                            setActiveTab(
                                nextItems[0] ?
                                    nextItems[0].eventKey : null
                            );
                        }}
                    >
                        {nItems.map((item) => (
                            <ResponsiveNav.Item
                                key={item.eventKey}
                                eventKey={item.eventKey}>
                                {item.label}
                            </ResponsiveNav.Item>
                        ))}
                    </ResponsiveNav>
                    <hr />
                    {/* Button to add a new item in nav */}
                    <Button
                        appearance="primary"
                        color="green"
                        onClick={() => {
                            const itemKey = getEventKey();
                            const nextItems = [
                                ...nItems,
                                {
                                    eventKey: itemKey,
                                    label: `Item ${itemKey}`,
                                },
                            ];
                            setNItems(nextItems);
                        }}
                    >
                        Create Item
                    </Button>
                </div>
            </div>
        </center>
    );
}

Output:

Reference: https://rsuitejs.com/components/nav/#removable