Author avatar

Kimaru Thagana

React Bootstrap: Using Event Keys in Nav Dropdown

Kimaru Thagana

  • Sep 17, 2020
  • 8 Min read
  • Sep 17, 2020
  • 8 Min read
Web Development
Client-side Frameworks
Front End Web Development


Frontend development includes both user experience (UX) and user interface (UI) design, both of which determine how natural, ergonomic, and usable your application is for the intended user.

In web apps, a critical component in page design is the nav bar. Not only does it have to be responsive, eye-catching, and functional, but it has to economize limited space. Some menu items in the navbar are hierarchical in nature and have to be represented in a dropdown manner. This is where nav dropdowns shine. These are components that are part of the navbar, but hierarchically, they can only be visible when the parent item is selected or hovered over. This feature allows the frontend developer to design neater navigation bars since menu information is compact. It also allows modeling of hierarchical relationships among menu items.

Consider a scenario in which you are a contracted frontend React developer. The client wishes to develop a website in React for their consultancy firm. They have different pricing tiers depending on their customers, including basic, corporate, and enterprise pricing models. The client wants a page for each tier and a compact menu pointing out that more pricing models will come out soon. All these links to pricing pages cannot be on the navigation menu. It is your duty as the consulting developer to implement this on the website's navigation menu. You decide to use nav dropdowns.

In this guide, you will learn about implementing event keys in React Bootstrap nav dropdowns. The guide assumes you have at least intermediate level knowledge of React and Bootstrap components.

Set Up a Sample App

Open your terminal and run these commands to create a basic React app.

1npx create-react-app react-bootstrap-navdropdown
3cd react-bootstrap-navdropdown
5npm start

Include React Bootstrap in your basic React app.

1npm install react-bootstrap bootstrap

Delete the code in the newly created App.js file and paste the sample code below.

1import React, {Component} from 'react';
3class App extends Component{
4    constructor(props) {
5        super(props);
7    }
9    render() {
10        return (
11            <div>
13            </div>
14        );
15    }
20export default App;

In your app.js file, include the stylesheet as well.

1import 'bootstrap/dist/css/bootstrap.min.css';

You can now import Bootstrap components, for example:

1import { Nav } from 'react-bootstrap';

Set Up the Navbar and Dropdown

Copy and paste the sample code below to create a navbar with a single dropdown.

1import React, {Component} from 'react';
2import 'bootstrap/dist/css/bootstrap.min.css';
3import {Nav, NavDropdown} from "react-bootstrap";
5class App extends Component{
6    constructor(props) {
7        super(props);
8    }
10    render() {
11        return (
12            <Nav variant="pills" activeKey="1" 
13                >
14                <Nav.Item>
15                    <Nav.Link eventKey="home" href="#/home">
16                        Home
17                    </Nav.Link>
18                </Nav.Item>
19                <Nav.Item>
20                    <Nav.Link eventKey="about" title="Item">
21                        About
22                    </Nav.Link>
23                </Nav.Item>
24                <Nav.Item>
25                    <Nav.Link eventKey="contact" >
26                        Contact
27                    </Nav.Link>
28                </Nav.Item>
29                <NavDropdown title="Pricing" id="nav-dropdown">
30                    <NavDropdown.Item eventKey="Basic Pricing">Basic</NavDropdown.Item>
31                    <NavDropdown.Item eventKey="Corporate Pricing">Corporates</NavDropdown.Item>
32                    <NavDropdown.Divider />
34                    <NavDropdown.Item eventKey="Enterprise pricing">Enterprise</NavDropdown.Item>
35                </NavDropdown>
36            </Nav>
37        );
38    }
41export default App;

In the code above, you have a Nav component complete with nav items and nav links. You have also added a nav dropdown with three items with the last item separated with a divider. At the moment, you can only view the navbar and dropdown. In the next section, you will learn how to track each selected item.

Handle the Selection Process

Copy and paste the sample code below.

1import React, {Component} from 'react';
2import 'bootstrap/dist/css/bootstrap.min.css';
3import {Nav, NavDropdown} from "react-bootstrap";
5class App extends Component{
6    constructor(props) {
7        super(props);
8        this.state =({
9            key: "home"
10        })
11        this.handleSelect = this.handleSelect.bind(this)
13    }
15    handleSelect(key){
16        this.setState({
17            key: key
18        })
19        alert(`selected ${key}`)
20    }
22    render() {
23        return (
24            <Nav variant="tabs" activeKey="home"
25                 onSelect={this.handleSelect}
26            >
27                <Nav.Item>
28                    <Nav.Link eventKey="home" href="#/home">
29                        Home
30                    </Nav.Link>
31                </Nav.Item>
32                <Nav.Item>
33                    <Nav.Link eventKey="about" title="about">
34                        About
35                    </Nav.Link>
36                </Nav.Item>
37                <Nav.Item>
38                    <Nav.Link eventKey="contact" >
39                        Contact
40                    </Nav.Link>
41                </Nav.Item>
42                <NavDropdown title="Pricing" id="nav-dropdown">
43                    <NavDropdown.Item eventKey="Basic pricing">Basic</NavDropdown.Item>
44                    <NavDropdown.Item eventKey="Corporate Pricing">Corporates</NavDropdown.Item>
45                    <NavDropdown.Divider />
47                    <NavDropdown.Item eventKey="Enterprise Pricing">Enterprise</NavDropdown.Item>
48                </NavDropdown>
49            </Nav>
50        );
51    }
54export default App;

In the code above, you have added an onSelect function. This calls your handleSelect function, which updates the key state with information on which nav item has been selected. To help you track the selected item, add an alert that shows the selected key. The onSelect function will also handle selected dropdowns.

To add links to your dropdown items, add tags inside NavDropdown.item.

See the sample code below.

1 <NavDropdown title="Pricing" id="nav-dropdown">
2                    <NavDropdown.Item>
3                        <Nav.Link eventKey="Basic" href="#home">
4                            Basic Pricing
5                        </Nav.Link>
6                    </NavDropdown.Item>
7                    <NavDropdown.Item>
8                        <Nav.Link eventKey="Corporate" href="#">
9                            Corporate Pricing
10                        </Nav.Link>
11                    </NavDropdown.Item>
12                    <NavDropdown.Divider />
14                    <NavDropdown.Item>
15                        <Nav.Link eventKey="Enterprise" href="#">
16                            Enterprise Pricing
17                        </Nav.Link>
19                    </NavDropdown.Item>
20                </NavDropdown>


You have now learned the technique of using event keys in nav dropdowns for React Bootstrap components. This skill is highly applicable for people who work as React developers, frontend developers, and sometimes UI/UX developers. To further build on this guide, explore other components in React Bootstrap to gain mastery in building a whole website. These include alerts, cards, accordions, and so much more.