Skip to content
Related Articles

Related Articles

React Suite <Nav.Item> Props

View Discussion
Improve Article
Save Article
  • Difficulty Level : Basic
  • Last Updated : 28 Jun, 2022
View Discussion
Improve Article
Save Article

React Suite is a front-end library designed for the middle platform and back-end products. The <Nav.Item> component is used for navigation purposes in a website. A <Nav.Item> share a general Nav component and its associated styles.

<Nav.Item> props:

  • active: It is a boolean. It shows the activation status. It is true by default.
  • disabled: It is a boolean. It shoes the disabled status. It is true by default.
  • as: It defines the ElementType of the <Nav.Item> Component. We can custom it as per our wish.
  • children *:  It denotes the content of the Component.
  • href: It is a string. It helps to associate a link with the component.
  • icon: It denotes an icon set for the component
  • onSelect: a void select callback function that gets fired whenever an item is selected.

Syntax:

<Nav>
    <Nav.Item></Nav.Item>
</Nav>

Prerequisite: Introduction and installation reactJS

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. If you haven’t, install create-react-app globally using the command npm -g create-react-app or install locally by npm i create-react-app.

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

Within the Nav tag, we are adding three nav items within the <Nav.Item>tag. for the first item we have used the active prop that makes the tab appears active. For the third, we have added the href prop, so whenever we click on that particular nav item it will redirect to the link specified,

App.js




import { Nav } from "rsuite";
  
import "rsuite/dist/rsuite.min.css";
function App() {
    return (
        <div className="App">
            <h3>React Suite <Nav.Item></h3>
            <Nav>
                <Nav.Item active>Problems</Nav.Item>
                <Nav.Item>Courses</Nav.Item>
                <Nav.Item href=
                    Articles
                </Nav.Item>
            </Nav>
        </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: In this example, we are using icon prop, to one of the items we are passing Gear as the icon which we are importing from “@rsuite/icons”.

We have also added an onSelect callback function which gets triggered when we select that particular nav item, it shows “selected!” in the alert. In one of the nav items, we have also used the as prop and we have changed the element type to a span.

App.js




import { Nav } from "rsuite";
import { Gear } from "@rsuite/icons";
import "rsuite/dist/rsuite.min.css";
function App() {
    return (
        <div className="App">
            <h3>React Suite <Nav.Item></h3>
            <Nav>
                <Nav.Item active>Problems</Nav.Item>
  
                <Nav.Item icon={<Gear />}
                    onSelect={() => alert("selected!")}>
                    Articles
                </Nav.Item>
                <Nav.Item>Events</Nav.Item>
                <Nav.Item
                    as={() => {
                        return <span>Courses</span>;
                    }}
                />
            </Nav>
        </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/nav/#code-lt-nav-item-gt-code


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!