React Suite Sidenav Appearance

Last Updated : 18 Jun, 2022

React Suite is a front-end library designed for the middle platform and back-end products. The React Suite Sidenav component acts as a sidebar to a website and it allows the user to provide an easy way to navigate.

The appearance prop defines the way how the sidenav will visually appear to the users. It has three options, it takes a value either “default” or “inverse” or “subtle”.

Syntax:

<Sidenav appearance=""></Sidenav>

Prerequisite:

Creating React Application and Module installation:

Step 1: Create the react project folder, for that open the terminal, and write the command npm create-react-app folder name, if you have already installed create-react-app globally.

npm create-react-app project

Step 2: After creating your project folder(i.e. project), move to it by using the following command.

cd project

Step 3: now install the dependency by using the following command:

npm install rsuite

Project Structure: It will look like this:

Example 1: In this example, we are creating a div and add the Sidenav component with the appearance prop. Within the <Sidenav.Body> tag we are adding the Nav component here we are adding the contents within the <Nav.Item> tag having an eventKey set as a number in form of string like “1”, “2”. Here, the activeKey prop in the sidenav sets the item with eventKey “1” as active.

App.js:

Javascript

import { Sidenav, Nav } from "rsuite"; 
import "rsuite/dist/rsuite.min.css"; 
  
function App() { 
    return ( 
        <div className="App"> 
            <h3>React Suite Sidenav Appearance</h3> 
            <p>Appearance = default</p> 
            <div style={{ width: "200px" }}> 
                <Sidenav appearance="default"> 
                    <Sidenav.Body> 
                        <Nav activeKey="1"> 
                            <Nav.Item eventKey="1"> 
                                Dashboard 
                            </Nav.Item> 
                            <Nav.Menu eventKey="2" title="User"> 
                                <Nav.Item eventKey="2-1"> 
                                    My Profile 
                                </Nav.Item> 
                                <Nav.Item eventKey="2-2"> 
                                    My Articles 
                                </Nav.Item> 
                            </Nav.Menu> 
                        </Nav> 
                    </Sidenav.Body> 
                </Sidenav> 
            </div> 
        </div> 
    ); 
} 
  
export default App;

Step to Run Application: Run the application using the following command from the project’s root directory.

npm start

Output:

Example 2: We are using the same code from the above example and changing the appearance prop to inverse.

App.js:

Javascript

import { Sidenav, Nav } from "rsuite"; 
import "rsuite/dist/rsuite.min.css"; 
  
function App() { 
    return ( 
        <div className="App"> 
            <h3>React Suite Sidenav Appearance</h3> 
            <p>Appearance = inverse</p> 
            <div style={{ width: "200px" }}> 
                <Sidenav appearance="inverse"> 
                    <Sidenav.Body> 
                        <Nav activeKey="1"> 
                            <Nav.Item eventKey="1"> 
                                Dashboard 
                            </Nav.Item> 
                            <Nav.Menu eventKey="2" title="User"> 
                                <Nav.Item eventKey="2-1"> 
                                    My Profile 
                                </Nav.Item> 
                                <Nav.Item eventKey="2-2"> 
                                    My Articles 
                                </Nav.Item> 
                            </Nav.Menu> 
                        </Nav> 
                    </Sidenav.Body> 
                </Sidenav> 
            </div> 
        </div> 
    ); 
} 
  
export default App;

Step to Run Application: Run the application using the following command from the project’s root directory.

npm start

Output:

Example 3: We are using the same code from the above example and changing the appearance prop to subtle.

App.js:

Javascript

import { Sidenav, Nav } from "rsuite"; 
import "rsuite/dist/rsuite.min.css"; 
  
function App() { 
    return ( 
        <div className="App"> 
            <h3>React Suite Sidenav Appearance</h3> 
            <p>Appearance = subtle</p> 
            <div style={{ width: "200px" }}> 
                <Sidenav appearance="subtle"> 
                    <Sidenav.Body> 
                        <Nav activeKey="1"> 
                            <Nav.Item eventKey="1"> 
                                Dashboard 
                            </Nav.Item> 
                            <Nav.Menu eventKey="2" title="User"> 
                                <Nav.Item eventKey="2-1"> 
                                    My Profile 
                                </Nav.Item> 
                                <Nav.Item eventKey="2-2"> 
                                    My Articles 
                                </Nav.Item> 
                            </Nav.Menu> 
                        </Nav> 
                    </Sidenav.Body> 
                </Sidenav> 
            </div> 
        </div> 
    ); 
} 
  
export default App;