Tuesday, December 10, 2024
Google search engine
HomeLanguagesJavascriptReactJS Reactstrap Nav Component

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:

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

RELATED ARTICLES

Most Popular

Recent Comments