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>.
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>.
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