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