Create a Responsive Navbar using ReactJS and CSS Module

 

Hey Learners, today in this article you'll learn how to create a Resonsive Navbar using ReactJS and CSS. I'm going to create a Navbar component that will not going to be a just simple Navigation bar, it's a advanced and fully functional Navbar that consist of active state of navigation element, Glassomorphic design, React Hooks and much more. So I'm sure here that after completing this article your many concepts of react is going to be furnished.

In this article you don't required any additional module or package for the Navigation bar. Yes but for the icons I'm using font-awesome module but you have other option though. If you want to go with me so just install the font-awesome module using below command on your terminal.

Install Font-awesome

npm install --save font-awesome

Basic Setup :-  For creating this Navigation bar you just need to have a basic react app setup. If you want to know more about that how can you setup react app? you can check for other reference otherwise keep continue with me.

Now create a Navbar folder inside your components folder. In Navbar folder create two files Navbar.jsx and Navbar.module.css.

So here few of you may worry about our Navbar.module.css file. Right? don't worry it's not a rocket science. let's have a brief intro about it.

What is a CSS Module?

A CSS module is, in simple words, a CSS file. But with a key difference: by default, when imported, every class name and animation inside a CSS module is scoped locally to the component that is importing it. This allows you to use virtually any valid name for your classes, without worrying about conflicts with other class names in your application. CSS modules also allow you to extend one or more classes, inheriting their styles. This concept is called class composition.

How to use CSS Modules?

• Create a css file name with .module.css extension.
• Add styling inside the file using classes, id etc. But don't use hyphen(-) in the class name.
• Import the file in your Js file using ( import styles from './Navbar.module.css';
• Use the className for any element as follow :- <section className={styles.section_container}>.....</section>

If you wan't to know more about CSS module follow this tutorial  .

Now open your Navbar.jsx file which will located in the following path src/components/Navbar.

Step-1: 

Let's import react Hooks, font-awesome and a logo image that can be located in your folder structure.

import React,{useState,useCallback} from 'react';
import styles from './Navbar.module.css';
import 'font-awesome/css/font-awesome.min.css';
import LogoImage from '../images/logo.jpg';

Step-2:

Now create a dynamic data set for your navbar using object inside Array as follow. If you want to add any additional value in the object you can do it by your own.

const menuItems =[
    {
        id:0,
        text: "Home",
        link:"/#",
        symbol:"fa fa-home",
    },
    {
        id:1,
        text: "Services",
        link:"/#services",
        symbol:"fa fa-server",
    },
    {
        id:2,
        text: "Projects",
        link:"/#projects",
        symbol:"fa fa-newspaper-o",
    },
    {
        id:3,
        text: "TechStack",
        link:"/#topSkill",
        symbol:"fa fa-stack-overflow",
    },
    {
        id:4,
        text: "Contact",
        link:"/#contact",
        symbol:"fa fa-phone-square",
    },

]

You can create this data set in a separate file and import it in your Navbar.jsx file that's your choice.

Step-3:

Now inside your Navbar.jsx file create a Navbar component and write down following code. In the following code by using comment I have explain each step and functionality used in the component to render a Navbar.

export const Navbar = () => {
    const [active, setActive] = useState(0); //setting first navlink id as initial active state
    return (
        <nav>
            <div className={styles.nav_container}>
                <div className={styles.nav_column}>
                   <img src={LogoImage} alt="logo"/>
                </div>
                <div className={styles.nav_column}>
                    {/* accessing menuItems from array using map function */}
                   {menuItems.map((item,index) => (
                        <li key={index}>
                            {/* navlink component */}
                            <NavLink 
                             {...item} //passing item as props
                            setActive={setActive} //passing state function setActive as Props
                            isActive={active === item.id} //passing the currently clicked/active item
                             />
                        </li> 
                   ))}
                </div>
                <div className={styles.nav_column}>
                    <a rel="noreferrer" href="https://www.fiverr.com/yogeshbisht23?up_rollout=true" target="_blank">Hire me!</a>
                </div>
            </div>
        </nav>
    )
}

Step-4:

Now it's time to create our NavLink component which we called inside our Navbar component. Write down following code for NavLink component, which is also well commented for explaination.

const NavLink = ({id, text, link, symbol, setActive, isActive}) =>(//here accessing id, text, link and symbol from the item props
    <a onClick={useCallback(() => setActive(id),[id, setActive]) //passing (id) and (setActive) to callback on click a.link
    }
    className={isActive ? styles.active : ""} href={link}> {/* setting the className active on isActive value */}
        <i className={symbol}></i>{text}</a> 
)

Step-5:

It's time to style our Navbar component using CSS module. So open Navbar.module.css file, which will located in the following path src/components/Navbar and paste the following code in the CSS file.

.nav_container{
    display:flex;
    justify-content: space-around;
    align-items:center;
    height:60px;
    background-color: #0c0d0c;
    position: fixed;
    width:100%;
    position: -webkit-sticky;
	top: 0;
    z-index:1;
}
.nav_column{
    color:#f1f1f1;
    background: none;
}
.nav_column:nth-child(1) img{
    height:3.025rem;
    width:3.025rem;
    border-radius:50%;
}
.nav_column:nth-child(2){
    display: flex;
    justify-content: space-around;
    align-items: center;
    backdrop-filter: blur(17px) saturate(173%);
    -webkit-backdrop-filter: blur(17px) saturate(173%);
    background: linear-gradient(to left, rgba(42, 44, 44, 0.5),rgba(115, 119, 119, 0.5));
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.125);
    padding:0rem 0.62rem;

}
.nav_column li{
    list-style-type: none;
    padding:0.75rem 0.43rem;
    margin:0rem 0.62rem;
    background:none;
}
.nav_column a{
    color:#f1f1f1;
    text-decoration:none;
    font-size:0.87rem;
    background:none;
    user-select: none;
    
}
.nav_column .active{
    color:#04a93d;
    font-size:1rem;
}
.nav_column i{
    padding:0rem 0.31rem;;
    font-size:1rem;
    background:none;
    user-select: none;
}
.nav_column:nth-child(3) a{
    background-color:#04a93d;
    padding:0.5rem 1.87rem;
    border-radius:0.31rem;
    font-size:1.12rem;
}

@media(max-width:950px){
    .nav_container{
        justify-content: space-between;
        padding:0rem 1rem;
    }
    .nav_column:nth-child(2){
        position:fixed;
        bottom:0;
        left:0;
        border-radius:0;
        z-index:10;
        width:100vw;
    }
    .nav_column:nth-child(2) li{
        display:block;
        margin:0rem 0.31rem;
    }
    .nav_column a{
        font-size:0.75rem;
        font-weight:300;
    }
    .nav_column i{
        font-size:1.5rem;
    }
    

}

So finally we have reached to the end of this session.

Now Just add Navbar component in your App.js file as follow-

const App = () => {
    return (
        <Fragment>
            <Navbar/>
        </Fragment>
    )
}

export default App;

That's all , We have developed all logics as well as styling for our Navbar using React and create a Attractive Responsive Navbar suing ReactJS and CSS module. If you face any issue regarding this Article please let me know in the comment section below.