React Suite Sidenav Custom Side Navigation

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 Custom side navigation. To create custom side navigation, we can use panels, dividers, etc. to customize a sidenav component.

Custom Side Navigation:

• Panel: It is used to set the panel property to customize a panel area.
• Divider: It is used to set the divider property and set a split line.

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.Body>
          <Nav>
            <Nav.Item>...</Nav.Item>
            <Nav.Item divider />
            <Nav.Item panel 
              style={{ padding: "20px 10px", color: "black" }}>
              ...
            </Nav.Item>
          </Nav>
       <Sidenav.Body>
    </Sidenav>
}

Example 1: Below example demonstrates a custom side navigation component that uses dividers and panels.

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, Pin } from "@rsuite/icons";
import Info from "@rsuite/icons/legacy/Info";

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 Custom SideNav</h4>

        <div style={{ marginTop: 20, width: 240 }}>
          <Sidenav expanded={expand} appearance="inverse ">
            <Sidenav.Body>
              <Nav activeKey={activeKey} onSelect={setActiveKey}>
                <Nav.Item eventKey="1" icon={<Home />}>
                  Home
                </Nav.Item>
                <Nav.Item eventKey="1" icon={<Info />}>
                  About
                </Nav.Item>
                <Nav.Menu eventKey="3" title="Main Content" icon={<Pin/>}>
                  <Nav.Item divider />
                  <Nav.Item
                    panel
                    style={{ padding: "20px 10px", color: "black" }}
                  >
                    Tutorials
                  </Nav.Item>
                  <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.Item
                    eventKey="3-4"
                    style={{ padding: "20px 10px", color: "black" }}
                  >
                    Practice
                  </Nav.Item>
                  <Nav.Item eventKey="4-1">Problem of the Day</Nav.Item>
                  <Nav.Item eventKey="4-2">Company wise</Nav.Item>

                  <Nav.Item
                    eventKey="4-3"
                    style={{ padding: "20px 10px", color: "black" }}
                  >
                    Algorithms
                  </Nav.Item>
                  <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:

Example 2: Below example demonstrates a custom side navigation component that uses a custom heading, dividers, and panels.

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, Pin } from "@rsuite/icons";
import Info from "@rsuite/icons/legacy/Info";

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 Custom SideNav</h4>

        <div style={{ marginTop: 20, width: 240 }}>
          <Sidenav expanded={expand}>
            <Sidenav.Header>
              <div
                style={{
                  padding: 15,
                  fontSize: 20,
                  background: "#0AA92E",
                  color: "#fff",
                }}
              >
                GeeksforGeeks
              </div>
            </Sidenav.Header>
            <Sidenav.Body>
              <Nav activeKey={activeKey} onSelect={setActiveKey}>
                <Nav.Item eventKey="1" icon={<Home />}>
                  Home
                </Nav.Item>
                <Nav.Item eventKey="1" icon={<Info />}>
                  About
                </Nav.Item>
                <Nav.Menu eventKey="3" title="Main Content" icon={<Pin />}>
                  <Nav.Item divider />
                  <Nav.Item
                    panel
                    style={{ padding: "20px 10px", color: "black" }}
                  >
                    Tutorials
                  </Nav.Item>
                  <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.Item
                    eventKey="3-4"
                    style={{ padding: "20px 10px", color: "black" }}
                  >
                    Practice
                  </Nav.Item>
                  <Nav.Item eventKey="4-1">Problem of the Day</Nav.Item>
                  <Nav.Item eventKey="4-2">Company wise</Nav.Item>

                  <Nav.Item
                    eventKey="4-3"
                    style={{ padding: "20px 10px", color: "black" }}
                  >
                    Algorithms
                  </Nav.Item>
                  <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/#custom-side-navigation