DEV Community

loading...
Cover image for How to create a simple selected navbar link in react

How to create a simple selected navbar link in react

Nabil Alamin
some random dude
Originally published at arndom.hashnode.dev ・2 min read

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

image.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
Enter fullscreen mode Exit fullscreen mode
  • After the project is created cd into it and install the two packages
npm i react-router-dom
Enter fullscreen mode Exit fullscreen mode
npm i @material-ui/core
Enter fullscreen mode Exit fullscreen mode
  • 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";

Enter fullscreen mode Exit fullscreen mode
  • Create the Landing.js pages as component:
import React from 'react'

function Landing() {
    return (
        <div>

        </div>
    )
}

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

function Personal() {
    return (
        <div>

        </div>
    )
}

export default Personal
Enter fullscreen mode Exit fullscreen mode
  • 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

Enter fullscreen mode Exit fullscreen mode
  • 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;

Enter fullscreen mode Exit fullscreen mode

Conclusion 🥂

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

end giph

Discussion (3)

Collapse
hackhit profile image
Miguel Hernandez

Muchas gracias me estoy iniciando en react y me sirvio mucho tu explicacion. Muchas muchas gracias. MH desde Venezuela

Collapse
arndom profile image
Nabil Alamin Author

Encantado de ayudar, MH

Collapse
hackhit profile image
Miguel Hernandez

Muchisimas gracias!!!