React-Bootstrap Nav Component - GeeksforGeeks

18 May, 2021
React-Bootstrap is a front-end framework that was designed keeping react in mind. Nav Component is a component that is used by all Navigation bits in Bootstrap. It is useful for navigation purposes in applications. We can use the following approach in ReactJS to use the react-bootstrap Nav Component.
Nav Props:
activeKey: It is used to mark the NavItem as active with a matching eventKey/href.
as: It can be used as a custom element type for this component.
cardHeaderBsprefix: It is used to change the underlying component CSS modifier and base class names prefix for card Header.
defaultActiveKey: It is used to indicate the default Active Key.
fill: It makes NavItems proportionately fill all available width.
justify: It makes NavItems fill all available widths.
navbar: It is used to apply to style an alignment for use in a Navbar.
navbarBsPrefix: It is used to change the underlying component CSS modifier and base class names prefix for navbar.
onKeyDown: It is a callback that is triggered on the key down event.
onSelect: It is a callback that is triggered when a NavItem is selected.
role: It is the ARIA role for the Nav.
variant: It indicates the visual variant of the nav items.
bsPrefix: It is an escape hatch for working with strongly customized bootstrap CSS.
Nav.Item Props:
as: It can be used as a custom element type for this component.
role: It is the ARIA role for the Nav.
bsPrefix: It is an escape hatch for working with strongly customized bootstrap CSS.
Nav.Link Props:
active: It is used to mark the NavItem as active.
as: It can be used as a custom element type for this component.
disabled: It is used to disable this component.
eventKey: It is used to uniquely identify the NavItem.
href: It is used to pass the href attribute to this element.
onSelect: It is a callback that is triggered when a NavLink is selected.
role: It is the ARIA role for the Nav.
bsPrefix: It is an escape hatch for working with strongly customized bootstrap CSS.
NavDropdown Props:
active: It is used for styling the toggle NavLink as an active state.
disabled: It is used to disable the toggle NavLink.
id: It is the normal HTML id attribute for the Toggle button.
menuRole: It is used for the ARIA accessible role which is applied to the Menu component.
onClick: It is used to pass a callback function to the toggle component which acts as a handler.
renderMenuOnMount: It is used to indicate whether to render the dropdown menu in the DOM before it is the first time shown.
rootCloseEvent: It is used to close the component when an event is fired outside it.
title: It is used for the non-toggle Button content.
bsPrefix: It is an escape hatch for working with strongly customized bootstrap CSS.
Creating React Application And Installing Module:
Step 1: Create a React application using the following command:npx create-react-app foldername
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 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 react-bootstrap 
npm install bootstrap
Step 3: After creating the ReactJS application, Install the required module using the following command:
npm install react-bootstrap 
npm install bootstrap
Project Structure: It will look like the following.
Project Structure
Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.
App.js
import React from 'react';import 'bootstrap/dist/css/bootstrap.css';import Nav from 'react-bootstrap/Nav';  export default function App() {  return (    <div style={{ display: 'block', width: 700, padding: 30 }}>      <h4>React-Bootstrap Nav Component</h4>      <Nav activeKey="/homeLink"        onSelect={(selectedKey) => alert(`You just selected ${selectedKey} !`)}>        <Nav.Item>          <Nav.Link href="/homeLink">Active</Nav.Link>        </Nav.Item>        <Nav.Item>          <Nav.Link eventKey="/OtherLink">Link</Nav.Link>        </Nav.Item>        <Nav.Item>          <Nav.Link eventKey="disabled" disabled>Disabled</Nav.Link>        </Nav.Item>      </Nav>    </div>  );}
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://react-bootstrap.github.io/components/navs/
React-Bootstrap
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