React Bootstrap: Using Event Keys in Nav Dropdown
A good nav bar has to economize limited space. This guide shows how to create an app that does that using event keys in React Bootstrap nav dropdowns.
Sep 17, 2020 • 8 Minute Read
Introduction
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.
npx create-react-app react-bootstrap-navdropdown
cd react-bootstrap-navdropdown
npm start
Include React Bootstrap in your basic React app.
npm install react-bootstrap bootstrap
Delete the code in the newly created App.js file and paste the sample code below.
import React, {Component} from 'react';
class App extends Component{
constructor(props) {
super(props);
}
render() {
return (
<div>
</div>
);
}
}
export default App;
In your app.js file, include the stylesheet as well.
import 'bootstrap/dist/css/bootstrap.min.css';
You can now import Bootstrap components, for example:
import { Nav } from 'react-bootstrap';
Copy and paste the sample code below to create a navbar with a single dropdown.
import React, {Component} from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import {Nav, NavDropdown} from "react-bootstrap";
class App extends Component{
constructor(props) {
super(props);
}
render() {
return (
<Nav variant="pills" activeKey="1"
>
<Nav.Item>
<Nav.Link eventKey="home" href="#/home">
Home
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="about" title="Item">
About
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="contact" >
Contact
</Nav.Link>
</Nav.Item>
<NavDropdown title="Pricing" id="nav-dropdown">
<NavDropdown.Item eventKey="Basic Pricing">Basic</NavDropdown.Item>
<NavDropdown.Item eventKey="Corporate Pricing">Corporates</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item eventKey="Enterprise pricing">Enterprise</NavDropdown.Item>
</NavDropdown>
</Nav>
);
}
}
export 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.
import React, {Component} from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import {Nav, NavDropdown} from "react-bootstrap";
class App extends Component{
constructor(props) {
super(props);
this.state =({
key: "home"
})
this.handleSelect = this.handleSelect.bind(this)
}
handleSelect(key){
this.setState({
key: key
})
alert(`selected ${key}`)
}
render() {
return (
<Nav variant="tabs" activeKey="home"
onSelect={this.handleSelect}
>
<Nav.Item>
<Nav.Link eventKey="home" href="#/home">
Home
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="about" title="about">
About
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="contact" >
Contact
</Nav.Link>
</Nav.Item>
<NavDropdown title="Pricing" id="nav-dropdown">
<NavDropdown.Item eventKey="Basic pricing">Basic</NavDropdown.Item>
<NavDropdown.Item eventKey="Corporate Pricing">Corporates</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item eventKey="Enterprise Pricing">Enterprise</NavDropdown.Item>
</NavDropdown>
</Nav>
);
}
}
export 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 Nav.link tags inside NavDropdown.item.
See the sample code below.
<NavDropdown title="Pricing" id="nav-dropdown">
<NavDropdown.Item>
<Nav.Link eventKey="Basic" href="#home">
Basic Pricing
</Nav.Link>
</NavDropdown.Item>
<NavDropdown.Item>
<Nav.Link eventKey="Corporate" href="#">
Corporate Pricing
</Nav.Link>
</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item>
<Nav.Link eventKey="Enterprise" href="#">
Enterprise Pricing
</Nav.Link>
</NavDropdown.Item>
</NavDropdown>
Conclusion
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.