React Suite Navbar Props

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

Navbar props:

• as: It denotes the element type of the component. It is ‘div’ by default but one can custom the element for this component.
• classPrefix: This denotes the prefix of the component CSS class. Specifying any value here will change the name of the class of the Component. This can be useful for applying custom styling based on the class name. The default value is “navbar”.
• appearance: It defines the way how the Navbar will visually appear to the users. It has three options, it takes a value either “default” or “inverse” or “subtle”.

Syntax:

<Navbar></Navbar>

Prerequisite:

• Introduction and installation reactJS
• React Suite Nav Component

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: We are importing the Nav and Navbar Component from “rsuite”, and to apply the default styles of the components we are importing “rsuite/dist/rsuite.min.css”. 

In this example, we will look into the appearance prop. We are adding three Navbar components along with <Nav.Item> component and we are passing different values to the appearance prop of the Navbar Component.

App.js

import { Nav, Navbar } from "rsuite";
import "rsuite/dist/rsuite.min.css";

function App() {
  return (
    <div className="App">
      <h4> React Suite Navbar Props</h4>
      <Navbar>
        <Navbar.Brand style={{ color: "green" }}>
          GeeksforGeeks
        </Navbar.Brand>
        <Nav>
          <Nav.Item>Articles</Nav.Item>
          <Nav.Item>Problems</Nav.Item>
          <Nav.Item>About Us</Nav.Item>
        </Nav>
      </Navbar>
      <Navbar appearance="inverse">
        <Navbar.Brand>GeeksforGeeks</Navbar.Brand>
        <Nav>
          <Nav.Item>Articles</Nav.Item>
          <Nav.Item>Problems</Nav.Item>
          <Nav.Item>About Us</Nav.Item>
        </Nav>
      </Navbar>
      <Navbar appearance="subtle">
        <Navbar.Brand>GeeksforGeeks</Navbar.Brand>
        <Nav>
          <Nav.Item>Articles</Nav.Item>
          <Nav.Item>Problems</Nav.Item>
          <Nav.Item>About Us</Nav.Item>
        </Nav>
      </Navbar>
    </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 importing the Nav and Navbar Component from “rsuite”, and to apply the default styles of the components we are importing “rsuite/dist/rsuite.min.css”.

In this example, we will look into the as prop. We are adding three Navbar components along with <Nav.Item> component and we are passing different values to the as prop of the Navbar Component.

App.js

import { Nav, Navbar } from "rsuite";
import "rsuite/dist/rsuite.min.css";

function App() {
  return (
    <div className="App">
      <h4> React Suite Navbar Props</h4>
      <Navbar>
        <Navbar.Brand style={{ color: "green" }}>
          GeeksforGeeks
        </Navbar.Brand>
        <Nav>
          <Nav.Item>Articles</Nav.Item>
          <Nav.Item>Problems</Nav.Item>
          <Nav.Item>About Us</Nav.Item>
        </Nav>
      </Navbar>
      <Navbar as="h3">
        <Navbar.Brand style={{ color: "green" }}>
          GeeksforGeeks
        </Navbar.Brand>
        <Nav>
          <Nav.Item>Articles</Nav.Item>
          <Nav.Item>Problems</Nav.Item>
          <Nav.Item>About Us</Nav.Item>
        </Nav>
      </Navbar>
      <Navbar as="em">
        <Navbar.Brand style={{ color: "green" }}>
          GeeksforGeeks
        </Navbar.Brand>
        <Nav>
          <Nav.Item>Articles</Nav.Item>
          <Nav.Item>Problems</Nav.Item>
          <Nav.Item>About Us</Nav.Item>
        </Nav>
      </Navbar>
    </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 importing the Nav and Navbar Component from “rsuite”, and to apply the default styles of the components we are importing “rsuite/dist/rsuite.min.css”.

In this example, we will look into the classPrefix prop. We are adding three Navbar components along with <Nav.Item> component and we are passing different values to the classPrefix prop of the Navbar Component.

App.js

import { Nav, Navbar } from "rsuite";
import "rsuite/dist/rsuite.min.css";

function App() {
  return (
    <div className="App">
      <h4> React Suite Navbar Props</h4>
      <Navbar>
        <Navbar.Brand style={{ color: "green" }}>
          GeeksforGeeks
        </Navbar.Brand>
        <Nav>
          <Nav.Item>Articles</Nav.Item>
          <Nav.Item>Problems</Nav.Item>
          <Nav.Item>About Us</Nav.Item>
        </Nav>
      </Navbar>
      <Navbar classPrefix="modal-title">
        <Navbar.Brand style={{ color: "green" }}>
          GeeksforGeeks
        </Navbar.Brand>
        <Nav>
          <Nav.Item>Articles</Nav.Item>
          <Nav.Item>Problems</Nav.Item>
          <Nav.Item>About Us</Nav.Item>
        </Nav>
      </Navbar>
      <Navbar classPrefix="sidenav">
        <Navbar.Brand style={{ color: "green" }}>
          GeeksforGeeks
        </Navbar.Brand>
        <Nav>
          <Nav.Item>Articles</Nav.Item>
          <Nav.Item>Problems</Nav.Item>
          <Nav.Item>About Us</Nav.Item>
        </Nav>
      </Navbar>
    </div>
  );
}

export default App;

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

npm start

Output:

Reference: https://rsuitejs.com/components/navbar/#code-lt-navbar-gt-code