Making A Bottom Navigation Bar In Next Js

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

Bottom navigation is becoming popular and it is used by most apps you can use it in a website with react because websites with next 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.

If you want a react version of this project than you can get it here – bottom navigation in react js

Making a bottom navigation bar in next 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.

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

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.

1. Install next 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-next-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
				
			

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 Styles from '../styles/BottomNav.module.css'
import { useState, useEffect } from 'react'
import { useRouter } from 'next/router'
import { RiHomeSmile2Line, RiHomeSmile2Fill, RiSearchEyeFill } from 'react-icons/ri'
import { BiSearchAlt } from 'react-icons/bi'
import { AiOutlineHeart, AiFillHeart } from 'react-icons/ai'
import { RiUser5Line, RiUser5Fill } from 'react-icons/ri'
const BottomNav = props => {
    const router = useRouter()
    const [activeTabs, setActiveTabs] = useState(props.name)
    useEffect(() => {
        switch (activeTabs) {
            case 'home':
                router.push('/')
                break;
            case 'search':
                router.push('/search')
                break;
            case 'saved':
                router.push('/saved')
                break;
            case 'account':
                router.push('/account')
                break;
            default:
                router.push('/')
                break;
        }
    }, [activeTabs, router])
    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 === 'saved' ?
                    <aiFillHeart
                        size='35'
                        color='#000'
                        onClick={() => setActiveTabs('saved')}
                    /> :
                    <aiOutlineHeart
                        size='35'
                        color='#000'
                        onClick={() => setActiveTabs('saved')}
                    />}
                {activeTabs === 'account' ?
                    <riUser5Fill
                        size='35'
                        color='#000'
                        onClick={() => setActiveTabs('account')}
                    /> :
                    <riUser5Line
                        size='35'
                        color='#000'
                        onClick={() => setActiveTabs('account')}
                    />}
    )
}
export default BottomNav
				
			

And copy the css file

				
					.bottomNav {
  width: 100%;
  height: 50px;
  position: fixed;
  bottom: 0;
  border-top: 1px solid var(--grey-color);
  z-index: 3;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bnTab {
  width: 25%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

				
			

So this was the bottom navigation bar in next 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 🙂