How to create a simple selected navbar link in react
Tags: tutorial, react, webdev
Published: 2021-07-24 17:23:54

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

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627142686654/rlGAuBNA5.png)

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

## Details  

- 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 (
        <div>

        </div>
    )
}

export default Landing
``` 
- Create the ***Personal.js*** pages as component:

```
import React from 'react'

function Personal() {
    return (
        <div>

        </div>
    )
}

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({
    root:{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        paddingTop: "1rem",

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

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

    nav:{
        flex : "1",
        display : "flex",
        justifyContent : "center",
        alignItems : "center"
    },

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

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

    settingsButton:{
        marginRight:"2rem"
    },

    settingsIcon:{
        color: "#8378DB"
    }
})

function Nav() {

    const classes = useStyles()

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

            <Box className  ={classes.nav}>
                <NavLink
                    exact
                    activeClassName = {classes.activeNavLink}
                    className = {classes.navLink}
                    to = {ROUTES.PERSONAL}
                >
                    For me
                </NavLink>
                <NavLink
                    exact
                    activeClassName ={classes.activeNavLink}
                    className = {classes.navLink}
                    to = {ROUTES.LANDING}
                >
                    Explore
                </NavLink>
            </Box>
             
            <IconButton className={classes.settingsButton}>
                <Settings className = {classes.settingsIcon}/>
            </IconButton>

        </Box>
    )
}

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">
        <Router>
          <Nav/>
          
          <Switch>
            <Route exact path ={ROUTES.LANDING} component = {Explore}/>
            <Route exact path ={ROUTES.PERSONAL} component = {Personal}/>
          </Switch>

        </Router>
    </div>
  );
}

export default App;

``` 

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

![end giph](https://media.giphy.com/media/XD4BoRtenzE1eTIHzZ/giphy.gif)