How to create a simple selected navbar link in react

How to create a simple selected navbar link in react

This is something I recently learnt and thought it could be helpful, here it is:


The following is a step by step process of how to achieve the above:.

Packages Used📦

You should be familiar with the following

  • React-router-dom
  • Material UI


  • First we create our project :
npx create-react-app simpleNav
  • After the project is created cd into it and install the two packages
npm i react-router-dom
npm i @material-ui/core
  • I like my projects to have a separate routes file called routes.js which would contain the following in this case:
export const LANDING = "/"; 

export const PERSONAL = "/for_me";
  • Create the Landing.js pages as component:
import React from 'react'

function Landing() {
    return (


export default Landing
  • Create the Personal.js pages as component:
import React from 'react'

function Personal() {
    return (


export default Personal
  • Now create the Navbar with the nav links:
import { Box, IconButton, makeStyles } from '@material-ui/core'
import { Settings } from '@material-ui/icons';
import React from 'react'
import { NavLink } from 'react-router-dom'
import * as ROUTES from '../constants/routes';

const useStyles = makeStyles({
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        paddingTop: "1rem",

        position: "sticky",
        zIndex: "1",
        top: "0",

        background: "rgba(255, 255, 255, 0.9)"

        flex : "1",
        display : "flex",
        justifyContent : "center",
        alignItems : "center"

        backgroundColor: "#8378DB",
        borderRadius: "15px 15px 0 0",
        color: "white !important", 

        textDecoration: "none",
        cursor: "pointer",
        padding: ".25em",
        fontSize: "1.65em",
        color: "#8378DB",
        margin: "0 1rem",


        color: "#8378DB"

function Nav() {

    const classes = useStyles()

    return (
        <Box className = {classes.root}>

            <Box className  ={classes.nav}>
                    activeClassName = {classes.activeNavLink}
                    className = {classes.navLink}
                    to = {ROUTES.PERSONAL}
                    For me
                    activeClassName ={classes.activeNavLink}
                    className = {classes.navLink}
                    to = {ROUTES.LANDING}

            <IconButton className={classes.settingsButton}>
                <Settings className = {classes.settingsIcon}/>


export default Nav
  • Finally in the App.js import the routes file and define the routes as so:
import './App.css';
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

//navbar containing navlinks
import Nav from './components/Nav'

//pages to naviagate
import Personal from './pages/Personal';
import Explore from './pages/Explore';

function App() {

  return (
    <div className="app">

            <Route exact path ={ROUTES.LANDING} component = {Explore}/>
            <Route exact path ={ROUTES.PERSONAL} component = {Personal}/>


export default App;

Conclusion 🥂

Following up to this point you successfully created a navbar with the selected link effect, nicely done

Share this