How to create a sidebar navigation system using reactBootstrap

By now most of us are probably familiar with those three little bars in the corner of a webpage that indicate a hidden navigation bar. Those three bars are called a ‘hamburger’ because they kind of resemble two buns with a patty in the middle.

image credit: Photo by Mike on Unsplash

The hamburger, as you probably know, is commonly used to indicate a hidden sidebar. This style of navigation is used on many websites all over the internet because it’s handy and stylish. It keeps heading hidden away unobtrusively making the page feel cleaner while still allowing easy navigation access to wherever we want to go. So how do we set up this kind of navigation for our own web-app or site? reactBootstrap makes it easy by providing a set of components that we can use to quickly and easily build an off canvas or sidebar navigation system.

The first thing we need to do is import three components that make up most reactBootstrap navbars: Nav, Container and Navbar. We are also going to need one more component called ‘Offcanvas’ which is specifically used to create sidebar or off canvas navigation.

import {Navbar, Nav, Container, Offcanvas} from 'react-bootstrap'

Once we have our components imported we can start setting up our navbar to actually render on our website. Since we’re creating a navbar, we are going to render our Navbar component first. Inside the opening tag, we can choose a background color by setting the background, or bg, attribute to our color of choice. We are also going to set up another attribute called expand and set it to false to indicate that we want our sidebar to hidden, not expanded, by default. At this point our render function should look something like this:

render(){
return(
<Navbar className='navbar' bg='light' expand={false}>
</Navbar>
)
}

Next, we are going to set up a container that will encase all of our links inside our navbar. This container needs to be fluid so that it can be expanded and hidden as necessary, and we tell it that by giving it an attribute called fluid.

<Navbar className='navbar' bg='light' expand={false}>
<Container fluid>
</Container>
</Navbar>

Inside our container, we are going to set up our Offcanvas component, and give it a placement to the left of our page an id, and some labeling information.

<Navbar className='navbar' bg='light' expand={false}>
<Container fluid>
<Navbar.Offcanvas
id='offcanvasNavbar'
aria-labelledby='offcanvasNavbarLabel'
placement='end'
>
</Container>
</Navbar>

Inside our OffCanvas component we are going to set up a body component containing our navigation links, and a header:

<Navbar className='navbar' bg='light' expand={false}>
<Container fluid>
<Navbar.Brand className='brand' href="/">Emiko</Navbar.Brand>
<Navbar.Toggle aria-controls='offcanvasNavbar' />
<Navbar.Offcanvas
id='offcanvasNavbar'
aria-labelledby='offcanvasNavbarLabel'
placement='end'
>
<Offcanvas.Header closeButton>
<Offcanvas.Title id='NavbarLabel'>Emiko</Offcanvas.Title>
</Offcanvas.Header>
<Offcanvas.Body>
<Nav className='justify-content-end flex-grow-1 pe-3'>
<Nav.Link className='navlink' href="/about">About</Nav.Link>
<Nav.Link className='navlink' href="/portfolio">Work</Nav.Link>
<Nav.Link className='navlink' href={resume}>Resume</Nav.Link>
</Nav>
</Offcanvas.Body>
</Navbar.Offcanvas>
</Container>
</Navbar>

Yay! We now have a working off canvas navigation bar on our website!

If we wanted to we could even add an internal dropdown to our navbar or other cool features. If you want to learn more about that explore the docs linked bellow!

React-Bootstrap