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>neveropen</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>neveropen</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", }} > neveropen </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
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
