How to style active navigator item in the navbar?

Question

I am working with Reactjs using html, css, and javascript. I want to style active navigator item in the navbar with white border. That is mean the border will stay in the item while the page of this item is open.

import React, { useState } from "react";
import { Link } from "react-router-dom";
import "./Navbar.css";
import { navItems } from "./NavItems";
import Dropdown from "./Dropdown";
    
function Navbar() {
  const [dropdown, setDropdown] = useState(false);


  return (
    <>
      <nav className="navbar">
        <ul className="nav-items">
          {navItems.map((item) => {
            if (item.id === "C3") {
              return (
                <li
                  key={item.id}
                  className={item.cName}
                  id={window.location.pathname === item.path? "C10":""}
                  onMouseClick={() => setDropdown(true)}
                  onMouseEnter={() => setDropdown(true)}
                  onMouseLeave={() => setDropdown(false)}
                >
                  <Link to={item.title}>{item.title}</Link>
                  {dropdown && <Dropdown />}
                </li>
              );
            }
            return (
              <li key={item.id} 
              className={item.cName}
              id={window.location.pathname === item.path? "C10":""}
              >
              
                <Link to={item.path}>{item.title}</Link>
              </li>
            );
          })}
        </ul>

      </nav>
    </>
  );
}

export default Navbar;

This is the CSS file

  
.nav-item a:hover {
    border: solid 2px white;
  }


#C10{
  border: solid 2px white;
}

I try to use this method in CSS file.

.nav-item a:active {
    border: solid 2px white;
  }

and I use this method in CSS file and JS file also but it does not work!

id={window.location.pathname === item.path? "C10":""}
#C10{
  border: solid 2px white;
}

`a:active` is only for when an element is clicked and not for when a page is active — FUZIION, Nov 10 '22 at 08:48
Does this answer your question? [Active link with React-Router?](https://stackoverflow.com/questions/41131450/active-link-with-react-router) — FUZIION, Nov 10 '22 at 08:50
id={window.location.pathname === item.path? "C10":""} #C10{ border: solid 2px white; } This method does not work! — Maram Althobity, Nov 10 '22 at 08:52

score 0 · Accepted Answer · answered Nov 10 '22 at 08:52

0

If you want to style an active <Link/> you have to use a <Navlink/> instead.

Check the doc: https://reactrouter.com/en/main/components/nav-link

answered Nov 10 '22 at 08:52

PepeW

477
1
8
24

score 0 · Answer 2 · answered Nov 10 '22 at 08:56

As William said you are better off using the actual <NavLink/> elements then programming plain html in React. However you can also create a function that adds the active class to the li item when it's selected.

See this example:

const links = ['https://google.com', 'https://google.be', 'https://google.nl'];
const [active, setActive] = useState(null);

<ul>
  {links.map((link) => (
    <li className="nav-item">
      <a 
        href={`#${link}`} 
        className={`nav-link ${active == link && 'm-active'}`}
        onClick={() => setActive(link)}
      >{link}</a>
    </li>
  ))}
</ul>

How to style active navigator item in the navbar?

2 Answers2