React-Bootstrap Nav Component

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 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

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.

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/