ReactJS Reactstrap Nav Component - GeeksforGeeks

29 Jul, 2021
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.
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:
Reference: https://reactstrap.github.io/components/navs/
Reactstrap
JavaScript
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Difference between var, let and const keywords in JavaScript
Difference Between PUT and PATCH Request
JavaScript | Promises
How to get character array from string in JavaScript?
How to fetch data from an API in ReactJS ?
How to redirect to another page in ReactJS ?
How to pass data from child component to its parent in ReactJS ?
How to pass data from one component to other component in ReactJS ?
ReactJS Functional Components