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