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
