Creating a Navigation Bar with Semantic UI

I recently completed a project using React for my coursework with Flatiron School, and I chose to use the Semantic framework for styling. One of the elements offered by Semantic is a menu, which I implemented for my navigation bar — the end result looks like this:

The styling from Semantic includes mouseover and selection effects, resulting in that light grey background when a menu item is “active.” It works nicely with react-router-dom, allowing me to designate each menu item as a NavLink, as you can see in the entirety of my code for the navigation bar:

import React, { Component } from 'react';
import { Menu } from 'semantic-ui-react';
import { NavLink } from 'react-router-dom';
class Navigation extends Component {
state = {
activeItem: 'homepage'
}
handleClick = (e, { name }) => {
this.setState({ activeItem: name })
}
render() {
const { activeItem } = this.state
return (
<Menu className="Navigation">
<Menu.Item
as={NavLink} exact to="/"
name='homepage'
active={activeItem === 'homepage'}
onClick={this.handleClick}>
Home
</Menu.Item>
<Menu.Item
as={NavLink} exact to="/browse"
name='browse'
active={activeItem === 'browse'}
onClick={this.handleClick}>
Browse
</Menu.Item>
<Menu.Item
as={NavLink} exact to="/search"
name='search'
active={activeItem === 'search'}
onClick={this.handleClick}>
Search
</Menu.Item>
<Menu.Item
as={NavLink} exact to="/my-drinks"
name='my-drinks'
active={activeItem === 'my-drinks'}
onClick={this.handleClick}>
My Drinks
</Menu.Item>
</Menu>
)
}
}
export default Navigation;

The component’s state keeps track of which menu item is active, i.e. which item should have the “active” styling applied to it. A simple onClick event updates the state to the selected route when each tab is clicked. Meanwhile routing is handled in my top-level App.js component:

<Router>
<Navigation className="Navigation" />
<Container className="App">
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/browse" component={BrowsePage} />
<Route exact path="/search" component={SearchPage} />
<Route exact path="/my-drinks" component={MyDrinks} />
<Route exact path="/drink/:drinkId" component={DrinkDetails} />
</Switch>
</Container>
</Router>

App.js creates my routes, and my navigation bar component knows which routes correspond to each menu button. Nice styling and clean navigation in two easy components!