preloader

Making A Bottom Navigation Bar In React Js Without Using Any Libraries

Hello coders today we are going to see how to make a bottom navigation bar in react js without any libraries or you can call it bottom nav bar in react js it will not be a whole website it will be just bottom nav bar with tabs.

Free Ethical Hacking Course Free

Bottom navigation is becoming popular and it is used by most apps you can use it in a website with react because websites with react js gives mobile like experience it will be a tab navigation like instagram.

We will not use libraries like material ui we will create it from scratch we will just use some icons library for icons.

Making a bottom navigation bar in react js

So before starting you may want to know what we will be creating you can preview the bottom nav bar website here – preview bottom nav bar.

If you want the source code of this project you can download it from github – download source code from github click here.

Free Ethical Hacking Course Free

You can either preview it from website or you can see here this is the bottom navigation bar

Bottom navigation in next js

So you must have previewed it you can add more tabs to it and adjust the width to understand the code you need to have basice knowledge of html, css and react js.

So without wasting time let’s start.

Free Ethical Hacking Course Free

1. Install react js

You can skip these if you know this but If you are new to react js and you don’t how to start with react js than first you need to create a project with create react app you can do that by pasting below command in your command prompt or terminal

npx create-react-app name-of-the-app

2. Install react icons

I have told you that you will require a icons library you can use your own icons but I think react icons library has many cool icons you can install it by pasting below command in command prompt or terminal at your project folder this will install react icons.

				
					npm install react-icons
				
			

You also have to install react router dom for routing 

				
					npm install react-router-dom
				
			

3 – Copy and paste

I have told you that I have uploaded the source code on github – click for source code on github you can clone the project or copy the bottom nav bar code from below.

				
					import { useState, useEffect } from 'react'
import { useHistory } from 'react-router-dom'
import { RiHomeSmile2Line, RiHomeSmile2Fill, RiUser5Fill, RiSearchEyeFill } from 'react-icons/ri'
import { BiSearchAlt } from 'react-icons/bi'
import { AiOutlineHeart, AiFillHeart } from 'react-icons/ai'
import { RiUser5Line } from 'react-icons/ri'
const BottomNavBar = props => {
    const history = useHistory()
    const [activeTabs, setActiveTabs] = useState(props.name)
    useEffect(() => {
        switch (activeTabs) {
            case 'home':
                history.push('/')
                break;
            case 'search':
                history.push('/search')
                break;
            case 'favourites':
                history.push('/favourites')
                break;
            case 'account':
                history.push('/account')
                break;
            default:
                history.push('/')
                break;
        }
    }, [activeTabs, history])
    return (
                {activeTabs === 'home' ?
                    <riHomeSmile2Fill
                        size='35'
                        color='#000'
                        onClick={() => setActiveTabs('home')}
                    /> :
                    <riHomeSmile2Line
                        size='35'
                        color='#000'
                        onClick={() => setActiveTabs('home')}
                    />}
                {activeTabs === 'search' ?
                    <riSearchEyeFill
                        size='35'
                        color='#000'
                        onClick={() => setActiveTabs('search')}
                    /> :
                    <biSearchAlt
                        size='35'
                        color='#000'
                        onClick={() => setActiveTabs('search')}
                    />}
                {activeTabs === 'favourites' ?
                    <aiFillHeart
                        size='35'
                        color='#000'
                        onClick={() => setActiveTabs('favourites')}
                    /> :
                    <aiOutlineHeart
                        size='35'
                        color='#000'
                        onClick={() => setActiveTabs('favourites')}
                    />}
                {activeTabs === 'account' ?
                    <riUser5Fill
                        size='35'
                        color='#000'
                        onClick={() => setActiveTabs('account')}
                    /> :
                    <riUser5Line
                        size='35'
                        color='#000'
                        onClick={() => setActiveTabs('account')}
                    />}
    )
}
export default BottomNavBar
				
			

This is the css file copy and paste it into the css file

				
					* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.bottom-nav {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 0;
  border-top: 1px solid rgb(230, 230, 230);
}
.bn-tab {
  width: 25%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
				
			

So this was the bottom navigation bar in react js project I hope you liked it and found what you were looking I love to share my work with everyone you can visit coderzway projects for more.

Thank you for reading next time I will be uploading more amazing projects so you can subscribe to coderzway newsletter.

Thank you for reading have a nice day 🙂

Spread the love
Free Ethical Hacking Course Free

Related Post

Leave a Reply

Your email address will not be published. Required fields are marked *

Free Ethical Hacking Course Free