ReactJS Reactstrap Nav Component
Last Updated :
07 Mar, 2024
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 StructureExample 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.
JavaScript
import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import { Nav, NavItem, NavLink } from "reactstrap"
function App() {
return (
<div style={{
display: 'block', width: 700, padding: 30
}}>
<h4>ReactJS Reactstrap Nav Component</h4>
<Nav pills>
<NavItem>
<NavLink href="#" active>Dashboard</NavLink>
</NavItem>
<NavItem>
<NavLink href="#">Login</NavLink>
</NavItem>
<NavItem>
<NavLink href="#">Signup</NavLink>
</NavItem>
<NavItem>
<NavLink disabled href="#">About us</NavLink>
</NavItem>
</Nav>
</div >
);
}
export default App;
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.
JavaScript
import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import { Nav, NavItem, NavLink } from "reactstrap"
function App() {
return (
<div style={{
display: 'block', width: 700, padding: 30
}}>
<h4>ReactJS Reactstrap Nav Component</h4>
<Nav vertical>
<NavItem>
<NavLink href="#" active>Dashboard</NavLink>
</NavItem>
<NavItem>
<NavLink href="#">Login</NavLink>
</NavItem>
<NavItem>
<NavLink href="#">Signup</NavLink>
</NavItem>
<NavItem>
<NavLink disabled href="#">About us</NavLink>
</NavItem>
</Nav>
</div >
);
}
export default App;
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:
Similar Reads
React Interview Questions and Answers React is an efficient, flexible, and open-source JavaScript library that allows developers to create simple, fast, and scalable web applications. Jordan Walke, a software engineer who was working for Facebook, created React. Developers with a JavaScript background can easily develop web applications
15+ min read
React Tutorial React is a powerful JavaScript library for building fast, scalable front-end applications. Created by Facebook, it's known for its component-based structure, single-page applications (SPAs), and virtual DOM,enabling efficient UI updates and a seamless user experience.Note: The latest stable version
7 min read
90+ React Projects with Source Code [2025] React, managed by Facebook and a vibrant community of developers and companies, is a JavaScript library designed to craft dynamic user interfaces. It empowers developers with concepts like React web apps, components, props, states, and component lifecycles. With a primary focus on building single-pa
12 min read
Frontend Developer Interview Questions and Answers Frontend development is an important part of web applications, and it is used to build dynamic and user-friendly web applications with an interactive user interface (UI). Many companies are hiring skilled Frontend developers with expertise in HTML, CSS, JavaScript, and modern frameworks and librarie
15+ min read
React Introduction ReactJS is a component-based JavaScript library used to build dynamic and interactive user interfaces. It simplifies the creation of single-page applications (SPAs) with a focus on performance and maintainability.It is developed and maintained by Facebook.The latest version of React is React 19.Uses
8 min read
React Hooks ReactJS Hooks are one of the most powerful features of React, introduced in version 16.8. They allow developers to use state and other React features without writing a class component. Hooks simplify the code, make it more readable, and offer a more functional approach to React development. With hoo
10 min read
React JSX JSX stands for JavaScript XML, and it is a special syntax used in React to simplify building user interfaces. JSX allows you to write HTML-like code directly inside JavaScript, enabling you to create UI components more efficiently. Although JSX looks like regular HTML, itâs actually a syntax extensi
6 min read
React Router React Router is a library for handling routing and navigation in React JS Applications. It allows you to create dynamic routes, providing a seamless user experience by mapping various URLs to components. It enables navigation in a single-page application (SPA) without refreshing the entire page.This
6 min read
ReactJS Virtual DOM ReactJS Virtual DOM is an in-memory representation of the actual DOM (Document Object Model). React uses this lightweight JavaScript object to track changes in the application state and efficiently update the actual DOM only where necessary.What is the Virtual DOM?The Virtual DOM (VDOM) is a lightwe
4 min read
How to Install ReactJS on Windows: Step-by-Step Guide ReactJS has become one of the most popular JavaScript libraries for building dynamic and interactive user interfaces, powering some of the biggest websites and applications across the web. If you're a Windows user eager to dive into React development, setting up your environment properly is the firs
8 min read