React Suite <Sidenav> Props

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 Prop <Sidenav>. <Sidenav> component provides the collapsed menu that opens or closes a side nav menu when toggled. Sidenav has various props which are discussed below.

<Sidenav> Props:

• as: It is used for specifying custom navbar components.
• appearance: It is used for sidenav appearance. It can have the values of ‘default’, ‘inverse’ and ‘subtle’.
• classPrefix: It is used to denote the prefix of the component CSS class. The default value is ‘navbar’.
• defaultOpenKeys: It is used to denote the Open menu which corresponds to the Dropdown eventkey.
• expanded: It is used to indicate whether to expand the Sidenav or not.
• onOpenChange: It is a menu opening callback function that changed.
• openKeys: It is used to denote the Open menu which corresponds to the Dropdown eventkey which is controlled.

Syntax:

<Sidenav>
    <Sidenav.Toggle expanded={expand} appearance="subtle" />
    <Nav> ... <Nav>
</Sidenav>

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:

Example 1: Below example demonstrates the appearance and expanded props of <Sidenav>. 

Javascript

import { useState } from "react";
import "rsuite/dist/rsuite.min.css";
import { Nav, Sidenav } from "rsuite/";
import Home from "@rsuite/icons/legacy/Home"
import FileCodeO from "@rsuite/icons/legacy/FileCodeO"
import File from "@rsuite/icons/legacy/File"
import { Code } from "@rsuite/icons";

export default function App() {
    const [expand, setExpand] = useState(true);
    const [activeKey, setActiveKey] = useState("1");

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

                <div style={{ marginTop: 20, width: 240 }}>
                    <Sidenav appearance="default" expanded={expand}>
                        <Sidenav.Body>
                            <Nav activeKey={activeKey} onSelect={setActiveKey}>
                                <Nav.Item eventKey="1" icon={<Home />}>
                                    Home
                                </Nav.Item>
                                <Nav.Menu placement="rightStart" eventKey="3"
                                    title="Main Content" icon={<File />}>
                                    <Nav.Item eventKey="3-1">Articles</Nav.Item>
                                    <Nav.Item eventKey="3-2">Courses</Nav.Item>
                                    <Nav.Item eventKey="3-3">Jobs</Nav.Item>
                                </Nav.Menu>
                                <Nav.Menu placement="rightStart" eventKey="4"
                                    title="Practice" icon={<Code />}>
                                    <Nav.Item eventKey="4-1">POTD</Nav.Item>
                                    <Nav.Item eventKey="4-2">Company problems</Nav.Item>
                                </Nav.Menu>
                                <Nav.Menu placement="rightStart" eventKey="5"
                                    title="Data Structures" icon={<FileCodeO />}>
                                    <Nav.Item eventKey="4-1">Arrays</Nav.Item>
                                    <Nav.Item eventKey="4-2">Linked List</Nav.Item>
                                    <Nav.Item eventKey="4-3">Stacks</Nav.Item>
                                </Nav.Menu>
                            </Nav>
                        </Sidenav.Body>
                        <Sidenav.Toggle
                            expanded={expand}
                            onToggle={(expanded) => setExpand(expanded)}
                        />
                    </Sidenav>
                </div>
            </div>
        </center>
    );
}

Output:

Example 2: Below example demonstrates the defaultOpenKeys prop of <Sidenav>. 

Javascript

import { useState } from "react";
import "rsuite/dist/rsuite.min.css";
import { Nav, Sidenav } from "rsuite/";
import Home from "@rsuite/icons/legacy/Home"
import FileCodeO from "@rsuite/icons/legacy/FileCodeO"
import File from "@rsuite/icons/legacy/File"
import { Code } from "@rsuite/icons";

export default function App() {
    const [expand, setExpand] = useState(true);
    const [activeKey, setActiveKey] = useState("1");

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

                <div style={{ marginTop: 20, width: 240 }}>
                    <Sidenav appearance="inverse" expanded={expand}
                        defaultOpenKeys={["3", "4"]}>
                        <Sidenav.Body>
                            <Nav activeKey={activeKey} onSelect={setActiveKey}>
                                <Nav.Item eventKey="1" icon={<Home />}>
                                    Home
                                </Nav.Item>
                                <Nav.Menu placement="rightStart" eventKey="3"
                                    title="Main Content" icon={<File />}>
                                    <Nav.Item eventKey="3-1">Articles</Nav.Item>
                                    <Nav.Item eventKey="3-2">Courses</Nav.Item>
                                    <Nav.Item eventKey="3-3">Jobs</Nav.Item>
                                </Nav.Menu>
                                <Nav.Menu placement="rightStart" eventKey="4"
                                    title="Practice" icon={<Code />}>
                                    <Nav.Item eventKey="4-1">POTD</Nav.Item>
                                    <Nav.Item eventKey="4-2">Company problems</Nav.Item>
                                </Nav.Menu>
                                <Nav.Menu placement="rightStart" eventKey="5"
                                    title="Data Structures" icon={<FileCodeO />}>
                                    <Nav.Item eventKey="4-1">Arrays</Nav.Item>
                                    <Nav.Item eventKey="4-2">Linked List</Nav.Item>
                                    <Nav.Item eventKey="4-3">Stacks</Nav.Item>
                                </Nav.Menu>
                            </Nav>
                        </Sidenav.Body>
                        <Sidenav.Toggle
                            expanded={expand}
                            onToggle={(expanded) => setExpand(expanded)}
                        />
                    </Sidenav>
                </div>
            </div>
        </center>
    );
}

Output:

Reference: https://rsuitejs.com/components/sidenav/#code-lt-sidenav-gt-code