React Suite Sidenav Collapsed Menu

React suite is a library of React components that have a 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 Sidenav collapsed Menu. The collapsed menu is a collapsible sidenav that opens or closes a side nav menu when toggled.

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.

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, Sidenav } from "rsuite/";

// App.JS file
function() {
    <Sidenav>
    <Sidenav.Toggle
       expanded={expand}
       onToggle={(expanded) => setExpand(expanded)}
     />
       <Nav activeKey={activeKey} onSelect={setActiveKey}>
         <Nav.Item eventKey="1">...</Nav.Item>
    </Sidenav>
}

Example 1: Below example demonstrates the basic collapsible menu.

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 Collapsible
        </h4>

        <div style={{ marginTop: 20, width: 240 }}>
          <Sidenav expanded={expand} defaultOpenKeys={["3", "4"]}>
            <Sidenav.Body>
              <Sidenav.Toggle
                expanded={expand}
                onToggle={(expanded) => setExpand(expanded)}
              />
              <Nav activeKey={activeKey} onSelect={setActiveKey}>
                <Nav.Item eventKey="1" icon={<Home />}>
                  Home
                </Nav.Item>
                <Nav.Menu placement="rightStart" eventKey="3"
                  title="Tutorials" icon={<File />}>
                  <Nav.Item eventKey="3-1">Programming</Nav.Item>
                  <Nav.Item eventKey="3-2">Web Tech</Nav.Item>
                  <Nav.Item eventKey="3-3">Data Science</Nav.Item>
                </Nav.Menu>
                <Nav.Menu placement="rightStart" eventKey="4"
                  title="Practice" icon={<Code/>}>
                  <Nav.Item eventKey="4-1">Problem of the Day</Nav.Item>
                  <Nav.Item eventKey="4-2">Company wise</Nav.Item>
                </Nav.Menu>
                <Nav.Menu placement="rightStart" eventKey="5"
                  title="Algorithms" icon={<FileCodeO/>}>
                  <Nav.Item eventKey="4-1">Searching</Nav.Item>
                  <Nav.Item eventKey="4-2">Sorting</Nav.Item>
                  <Nav.Item eventKey="4-3">Greedy</Nav.Item>
                </Nav.Menu>
              </Nav>
            </Sidenav.Body>
          </Sidenav>
        </div>
      </div>
    </center>
  );
}

Output:

Example 2: Below example demonstrates the collapsible menu using a toggle button.

Javascript

import { useState } from "react";
import "rsuite/dist/rsuite.min.css";
import { Nav, Sidenav, Toggle } 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 Collapsible
        </h4>

        <div style={{ marginTop: 20, width: 240 }}>
          <Toggle
            onChange={setExpand}
            checked={expand}
            checkedChildren="Open"
            unCheckedChildren="Collapse"
          />
          <hr/>
          <Sidenav expanded={expand} appearance="inverse">
            <Sidenav.Body>
              <Nav activeKey={activeKey} onSelect={setActiveKey}>
                <Nav.Item eventKey="1" icon={<Home />}>
                  Home
                </Nav.Item>
                <Nav.Menu
                  placement="rightStart"
                  eventKey="3"
                  title="Tutorials"
                  icon={<File />}
                >
                  <Nav.Item eventKey="3-1">Programming</Nav.Item>
                  <Nav.Item eventKey="3-2">Web Tech</Nav.Item>
                  <Nav.Item eventKey="3-3">Data Science</Nav.Item>
                </Nav.Menu>
                <Nav.Menu
                  placement="rightStart"
                  eventKey="4"
                  title="Practice"
                  icon={<Code />}
                >
                  <Nav.Item eventKey="4-1">Problem of the Day</Nav.Item>
                  <Nav.Item eventKey="4-2">Company wise</Nav.Item>
                </Nav.Menu>
                <Nav.Menu
                  placement="rightStart"
                  eventKey="5"
                  title="Algorithms"
                  icon={<FileCodeO />}
                >
                  <Nav.Item eventKey="4-1">Searching</Nav.Item>
                  <Nav.Item eventKey="4-2">Sorting</Nav.Item>
                  <Nav.Item eventKey="4-3">Greedy</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/#collapsed-menu