ReactJS Reactstrap Nav Component

Reactstrap is a popular front-end library that is easy to use React Bootstrap 4 components. This library contains the stateless React components for Bootstrap 4. The 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 ReactJS Reactstrap Nav Component.

Nav Props:

• tabs: It is used to indicate whether to apply the tabs styles to it or not. 
• pills: It is used to denote the Pills navigation.
• card: It is used to indicate whether to apply the card styles to it or not.
• justified: It makes NavItems fill all available widths.
• fill: It makes NavItems proportionately fill all available widths. 
• vertical: It is used to indicate whether to apply the vertical alignment or not.
• horizontal: It is used to indicate whether to apply the horizontal alignment or not.
• navbar: It is used to apply to style an alignment for use in a Navbar.
• tag: It is used to pass in custom elements to use.

NavItem Props:

• tag: It is used to pass in custom elements to use.
• active: It is used to apply the active state class to this component.

NavLink Props:

• disabled: It is used to apply the disabled state class to this component.
• active: It is used to apply the active state class to this component.
• tag: It is used to pass in custom elements to use.
• innerRef: It is used to get a reference to the DOM element.

Creating React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Step 3: After creating the ReactJS application, Install the required module using the following command:

npm install reactstrap bootstrap

Project Structure: It will look like the following.

Project Structure

Example 1: Now write down the following code in the App.js file. Here, we have used the pills props and shown Nav in horizontal alignment.

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Example 2: Now write down the following code in the App.js file. Here, we have used the vertical props to display Nav in vertical alignment.

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Reference: https://reactstrap.github.io/components/navs/