CODEWITHSUNDEEP
javascripthtmlcssreactjsnavbar
LeGOATJames23
LeGOATJames23

Reputation: 121

ReactJS Navbar isActive

I am trying to have a rotated square sit under the navbar links to indicate which page you are on. The issue I'm having is that the square remains under the "home" page at all times. So if I click on one of the other links (say "About"), the square will appear under "About" but is also still under "Home".

My .css and .jsx for navbar are below...

import {Link, NavLink} from 'react-router-dom'

import './navbar.css'
import {links} from '../data'
import {GoThreeBars} from 'react-icons/go'
import Logo from '../images/example-logo.png'


const Navbar = () => {
  return (
    <nav>
        <div className='container nav__container'>
            <Link to='/' className='logo'>
                <img src={Logo} alt="Nav logo" />
            </Link>
            <ul className='nav__links'>
                {
                    links.map(({name, path}, index) => {
                        return (
                            <li>
                                <NavLink to={path} className={({isActive}) => isActive ? 'active-nav': ''} >{name}</NavLink>
                            </li>
                        )
                    })
                }
            </ul>
            <button className='nav__toggle-btn'>
                <GoThreeBars/>
            </button>
        </div>
    </nav>
  )
}

export default Navbar

CSS...

nav {
    height: 5rem;
    width: 100vw;
    background:var(--color-primary);
    display: grid;
    place-items: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
}

.nav__toggle-btn {
    display: none;
}

.nav__container {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.logo {
    width: 5%;
}

.nav__links {
    display: flex;
    gap: 3.5rem;
    align-items: center;
}

.nav__links a {
    transition: var(--transition);
}

.nav__links a:hover {
    color: var(--color-secondary);
}

.active-nav {
    position: relative;
}

.active-nav::after {
    content: '';
    display: block;
    width: 1.2rem;
    height: 1.2rem;
    background: var(--color-primary);
    position: absolute;
    left: calc(50% - 0.6rem);
    transform: rotate(45deg);
    margin-top: 0.9rem;
}

Upvotes: 0

Views: 498

Answers (3)

LeGOATJames23
LeGOATJames23

Reputation: 121

Not sure if it would just be best to delete this question, but the issue I was having was because of an issue in my data.js file that contains the info for my links. In the list, I had the path for my "Home page" equal to "/". So any time I was anywhere on the webpage, it always had 'home' being active. I had to change the path to '/home' and it fixed the issue.

Upvotes: 0

Asif Jalil
Asif Jalil

Reputation: 762

Just change this line.

<li>
  <NavLink to={path} activeClassName="active-nav" >{name}</NavLink>
</li>

Upvotes: 1

Teresa Loafman
Teresa Loafman

Reputation: 71

Check out this article.

Specifically this:

Note: we have to add exact props to the nav link with the home route else it will keep the route of the homepage always active.

Upvotes: 1

Related Questions