React Suite Nav With Icon

Last Updated : 08 Jun, 2022

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;