React Suite Navbar Appearance

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>
    );
}

Output:

Reference: https://rsuitejs.com/components/navbar/#appearance