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 various types of navigation menus, which can be landscape and portrait layouts. 

Nav Props:

• activeKey: It denotes the Active key which corresponds to eventkey in Nav.Item.
• appearance: It is used for navigation appearances.
• children: It denotes the contents of the component.
• classPrefix: It denotes the prefix of the component CSS class.
• justified: It is used to justify navigation.
• onSelect: It is a callback function that is triggered after selection.
• pullRight: It is used to make it appears on the right.
• vertical: It is used for stacked navigation.

Nav.Item Props:

• active: It denotes the activation status.
• as: It is used to add a custom element type.
• children: It is used to show the content of the components.
• disabled: It is used to disable the status.
• href: It denotes the hyperlink.
• icon: It is used to set the icon for the component.
• onSelect: It is a callback function that is triggered after the selection of any item.

Nav.Menu Props:

• icon: It is used to add an icon of the item that opens the menu.
• noCaret: It denotes whether to hide the caret icon.
• onClose: It is a callback function when the menu closes.
• onOpen: It is a callback function when the menu opens.
• onToggle: It is a callback function when the menu opens/closes.
• openDirection: It gives direction for the menu from where should it be open (only available on submenus).
• title: It is used to add the content of the item that opens the menu.

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:

👁 Image

Syntax:

import { Nav } from 'rsuite';

// or
import Nav from 'rsuite/Nav';

<Nav> ... </Nav>

Example 1: Below example demonstrates the nav usage component.

Step to run the application: Open the terminal and type the following command.

npm start

Output:

👁 Image

Example 2: Below example demonstrates the usage of the multi-level nav component.

Output:

👁 Image

Reference: https://rsuitejs.com/components/nav/#usage