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.

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: