React Suite Navbar Appearance

Last Updated : 18 Jun, 2022

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 Navbar Appearance. A navbar can have 3 values: default, inverse, and subtle.

Note: In a high-contrast theme, all navbar appearances look the same as the default one.

NavBar props:

as: It is used for specifying custom navbar components. The default value is ‘div’.
appearance: It is used for navigation bar 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’.

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 { Navbar, Nav } from "rsuite/";

function() {
    <NavBar appearance="subtle || inverse">
        <Nav>
            <Nav.Item />
            ....
        </Nav>
    </NavBar>
}

Example 1: In this example, the default appearance of the navbar component.

Javascript

import { useState } from "react"; 
import { Navbar, Nav } from "rsuite/"; 
import "rsuite/dist/rsuite.min.css"; 
  
const MyNavBar = ({ active, onSelect, ...props }) => { 
    return ( 
        <Navbar {...props}> 
            <Navbar.Brand href="#">GeeksforGeeks</Navbar.Brand> 
            <Nav onSelect={onSelect} activeKey={active}> 
                <Nav.Item eventKey="home">Home</Nav.Item> 
                <Nav.Item eventKey="2">Tutorials</Nav.Item> 
                <Nav.Item eventKey="3">GBlog</Nav.Item> 
                <Nav.Menu title="Practice"> 
                    <Nav.Item eventKey="4"> 
                        Data Structures 
                    </Nav.Item> 
                    <Nav.Item eventKey="5"> 
                        Algorithms 
                    </Nav.Item> 
                    <Nav.Item eventKey="6"> 
                        Programming Languages 
                    </Nav.Item> 
                </Nav.Menu> 
            </Nav> 
        </Navbar> 
    ); 
}; 
  
export default function App() { 
    const [activeTab, setActiveTab] = useState('home'); 
  
    return ( 
        <center> 
            <div> 
                <h2>GeeksforGeeks</h2> 
                <h4 style={{ color: "green" }}> 
                    React Suite NavBar Appearance 
                </h4> 
  
                <div style={{ marginTop: 20 }}> 
                    <MyNavBar active={activeTab} 
                        onSelect={setActiveTab} /> 
                </div> 
            </div> 
        </center> 
    ); 
}

Output:

Example 2: In this example, the inverse appearance of the navbar component.

Javascript

import { useState } from "react"; 
import { Navbar, Nav } from "rsuite/"; 
import "rsuite/dist/rsuite.min.css"; 
  
const MyNavBar = ({ active, onSelect, ...props }) => { 
  return ( 
    <Navbar {...props}> 
      <Navbar.Brand href="#">GeeksforGeeks</Navbar.Brand> 
      <Nav onSelect={onSelect} activeKey={active}> 
        <Nav.Item eventKey="home">Home</Nav.Item> 
        <Nav.Item eventKey="2">Tutorials</Nav.Item> 
        <Nav.Item eventKey="3">GBlog</Nav.Item> 
        <Nav.Menu title="Practice"> 
          <Nav.Item eventKey="4">Data Structures</Nav.Item> 
          <Nav.Item eventKey="5">Algorithms</Nav.Item> 
          <Nav.Item eventKey="6">Programming Languages</Nav.Item> 
        </Nav.Menu> 
      </Nav> 
    </Navbar> 
  ); 
}; 
  
export default function App() { 
  const [activeTab, setActiveTab] = useState('home'); 
  
  return ( 
    <center> 
      <div> 
        <h2>GeeksforGeeks</h2> 
        <h4 style={{ color: "green" }}> 
            React Suite NavBar Appearance 
        </h4> 
  
        <div style={{marginTop: 20}}> 
          <MyNavBar appearance="inverse" 
                  active={activeTab} 
                onSelect={setActiveTab} /> 
        </div> 
      </div> 
    </center> 
  ); 
}

Output:

Example 3: In this example, the subtle appearance of the navbar component.

Javascript

import { useState } from "react"; 
import { Navbar, Nav } from "rsuite/"; 
import "rsuite/dist/rsuite.min.css"; 
  
const MyNavBar = ({ active, onSelect, ...props }) => { 
    return ( 
        <Navbar {...props} style={{ backgroundColor: 'black' }}> 
            <Navbar.Brand href="#">GeeksforGeeks</Navbar.Brand> 
            <Nav onSelect={onSelect} activeKey={active}> 
                <Nav.Item eventKey="home">Home</Nav.Item> 
                <Nav.Item eventKey="2">Tutorials</Nav.Item> 
                <Nav.Item eventKey="3">GBlog</Nav.Item> 
                <Nav.Menu title="Practice"> 
                    <Nav.Item eventKey="4"> 
                        Data Structures 
                    </Nav.Item> 
                    <Nav.Item eventKey="5"> 
                        Algorithms 
                    </Nav.Item> 
                    <Nav.Item eventKey="6"> 
                        Programming Languages 
                    </Nav.Item> 
                </Nav.Menu> 
            </Nav> 
        </Navbar> 
    ); 
}; 
  
export default function App() { 
  
    const [activeTab, setActiveTab] = useState('home'); 
  
    return ( 
        <center> 
            <div> 
                <h2>GeeksforGeeks</h2> 
                <h4 style={{ color: "green" }}> 
                    React Suite NavBar Appearance 
                </h4> 
  
                <div style={{ marginTop: 20 }}> 
                    <MyNavBar appearance="subtle"
                        active={activeTab} 
                        onSelect={setActiveTab} /> 
                </div> 
            </div> 
        </center> 
    ); 
}