Open In App

React-Bootstrap Nav Component

Improve
Improve
Like Article
Like
Save
Share
Report

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.

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:



Last Updated : 07 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads