Open In App

React Suite Nav With Icon

Last Updated : 08 Jun, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

Pre-requisite: React Suite Introduction 

A React suite is a library of React components, 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 Nav with Icon. A nav provides a list of multiple types of navigation menus, that can be landscape and portrait layouts. A nav in the react application can be created by adding icons in the navbar. 

Nav Icon Props:

  • as: It is used to add a custom SVG icon component.
  • fill: It is used to fill icon color.
  • flip: It is used to flip icons.
  • pulse: It is used to rotate icons with eight steps.
  • rotate: It is used to rotate icons.
  • spin: It is used to spin the icon.
  • style: It is used to add or change icon styles.

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:

 

Using Icons with Nav Component:

Step 1: Install the @rsuite/icons package into your project directory.

npm install --save @rsuite/icons

Step 2: Import the Icons in your function component from the package.

import { Gear, AddOutline } from '@rsuite/icons';

Syntax:

//Import Statement
import { IconName } from "@rsuite/icons";

//Function component
Function App () {

    return (
          <Nav>
            <Nav.Item icon={<IconName />}>Icon 1</Nav.Item>
            <Nav.Item icon={<IconName />}>Icon 2</Nav.Item>
            <Nav.Menu icon={<IconName />} title="More">
                  <Nav.Item icon={<IconName />}>Icon 3</Nav.Item>
                  <Nav.Item icon={<IconName />}>Icon 4</Nav.Item>
            </Nav.Menu>
          </Nav>
      );
}

Example 1: Below example demonstrates the basic Nav with icons.

Javascript




import React from "react";
import { Nav } from "rsuite";
import { Check, Page, Tag, Task } from "@rsuite/icons";
import "rsuite/dist/rsuite.min.css";
  
function App() {
    return (
        <div style={{ padding: 10, 
                      backgroundColor: 'indigo' }}>
            <Nav>
                <Nav.Item icon={<Task />}>
                    Practice </Nav.Item>
                <Nav.Item icon={<Page />}>
                    Tutorials</Nav.Item>
                <Nav.Menu title="Jobs">
                    <Nav.Item icon={<Check />}>
                        Apply</Nav.Item>
                    <Nav.Item icon={<Tag />}>
                        Job-a-thon</Nav.Item>
                </Nav.Menu>
            </Nav>
  
        </div>
    );
}
  
export default App;


Steps to run the application: Write the below code in the terminal to run the code:

npm start

Output:

 

Example 2: Below example demonstrates the basic Nav with colored icons.

Javascript




import React from "react";
import { Nav } from "rsuite";
import { Check, Edit, FolderFill, Page, Tag, Task } from "@rsuite/icons";
import "rsuite/dist/rsuite.min.css";
  
function App() {
  return (
    <div style={{ padding: 10, 
                  backgroundColor: '#F4F5F4'}}>
      <Nav>
        <Nav.Item icon={<Task color="red" />}>
            Practice </Nav.Item>
        <Nav.Item icon={<Page color="green" /> }>
            Articles</Nav.Item>
        <Nav.Item icon={<FolderFill color="#f5a623" />}>
            Courses</Nav.Item>
        <Nav.Menu title="Jobs">
          <Nav.Item icon={<Check color="blue" />}>
              Apply</Nav.Item>
          <Nav.Item icon={<Tag color="orange" />}>
              Job-a-thon</Nav.Item>
          <Nav.Item icon={<Edit color="cyan" />}>
              Internships</Nav.Item>
        </Nav.Menu>
      </Nav>
        
    </div>
  );
}
  
export default App;


Output:

 

Reference: https://rsuitejs.com/components/nav/#with-icon



Similar Reads

React Suite Icon &lt;Icon&gt; Props
React Suite is a popular front-end library with a set of React components that are designed for the middle platform and back-end products. There is a lot of data that gets rendered on a web page. Sometimes we require to represent data using icons. This is when the Icon component allows the user to add icons to your application. Icons are commonly u
3 min read
How to remove active nav-tab when click outside of nav-tab in Bootstrap ?
Bootstrap has the class called "collapse navbar-collapse" which collapses the navigation bar when the user changes the screen resolution. The java-script along-with it at the bottom of the code triggers the collapsed menu in such a way that when the user clicks the hamburger icon of the menu and navigates to the required link, it again collapses th
2 min read
Explain the use of nav nav-list in Bootstrap
The nav-list class helps to create the list of navs in the webpage along with headers which are optional. It is available in Bootstrap version 2. In this article, we will understand the working of the nav-list class and see how can we create a List of Navs using the “nav-list" class in Bootstrap, along with understanding its implementation through
3 min read
React Suite Nav Usage Component
React suite is a library of React components that has 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 Nav Usage Component. A nav component provides a list of vari
4 min read
React Suite Nav Responsive
React Suite is a popular front-end library with a set of React components that are designed for the middle platform and back-end products. Nav component helps to provide a list of various forms of navigation menus, which can be landscape and portrait layouts. Responsive Nav helps to create a dynamic Nav. We can increase/decrease the number of menu
4 min read
React Suite Nav Component
React Suite is a popular front-end library with a set of React components that are designed for the middle platform and back-end products. Nav component allows the user to provide a list of various forms of navigation menus. We can use the following approach in ReactJS to use the React Suite Nav Component. Nav Props: activeKey: It is used to denote
3 min read
React Suite Nav Appearance
A React suite is a library of React components, 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 nav appearance. A nav component provides a list of various types o
3 min read
React Suite Nav Vertical
React Suite is a popular front-end library with a set of React components that are designed for the middle platform and back-end products. Nav Provides a list of various forms of navigation menus, which can be landscape and portrait layout. Nav Vertical helps to create a Nav such that Nav items are placed in the vertical direction. Creating React A
2 min read
React Suite Nav Option Status
React Suite is a popular front-end library with a set of React components that are designed for the middle platform and back-end products. Nav Provides a list of various forms of navigation menus, which can be landscape and portrait layouts. Nav Option Status helps to enable or disable any nav Item. Syntax: &lt;Nav&gt; &lt;Nav.Item active&gt;Active
2 min read
React Suite Nav Multi-level Navigation
React suite is a library of React components that has 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 Nav Removable. A nav component provides a list of various ty
2 min read