Home > database >  How to keep NavLink active even though other links are clicked?
How to keep NavLink active even though other links are clicked?

Time:09-21

In a React project, I'm trying to keep NavLink active even though any other links are clicked and navigated to it. Please refer to the code below for better clarity.

const LeftMenu = () => {
  return (
    <div className="side-navbar active-nav d-flex justify-content-between flex-wrap flex-column">
      <div>
        <ul className="btn-toggle-nav list-unstyled fw-normal small">
          <li className="nav-item-dropdown">
            <span className="mx-3">
              <NavLink to={companyShares} className="dropdown-nav-link px-3">
                COMPANY SHARES
              </NavLink>
            </span>
          </li>

          <li className="nav-item-dropdown">
            <span className="mx-3">
              <NavLink to={companyTech} className="dropdown-nav-link px-3">
                COMPANY TECH
              </NavLink>
            </span>
          </li>
        </ul>
      </div>
    </div>
  );
};

When clicked on button in a page, navigates to another screen, the side menu loses active background color. My intention is to make it active, whatever other links are clicked. What could be the best solution?

Please refer to codesandbox link --> enter image description here

  • Related