Breaking News: Grepper is joining You.com. Read the official announcement!

Navbar with active link (React-router-dom)

pra's play answered on May 31, 2022 Popularity 7/10 Helpfulness 2/10

answer Navbar with active link (React-router-dom)

related react-router-dom navlink active

Navbar with active link (React-router-dom)

Comment

import React from 'react';
import { NavLink } from 'react-router-dom';

const Header = () => {
  return (
    <div>
      <nav className="navbar navbar-expand-lg navbar-light bg-primary">
        <NavLink className="navbar-brand" to="/">Home</NavLink>
        <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span className="navbar-toggler-icon"></span>
        </button>
        <div className="collapse navbar-collapse" id="navbarNav">
          <ul className="navbar-nav ml-auto">
            <li className="nav-item">
              <NavLink className="nav-link" to="/register">Register</NavLink>
            </li>
            <li className="nav-item">
              <NavLink className="nav-link" to="/login" >Login</NavLink>
            </li>
            <li className="nav-item">
              <NavLink className="nav-link" to="/profile">Profile</NavLink>
            </li>
          </ul>
        </div>
      </nav>
    </div>
  );
}

export default Header;

In App.css file

add below code:

.navbar-nav .nav-link.active {
  color: orange !important;
}

Popularity 7/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: javascript navbar

Link to this answer
Share Copy Link

Contributed on Jun 10 2023

pra's play

0 Answers Avg Quality 2/10

Closely Related Answers

react-router-dom navlink active

Comment

<NavLink
  to="users"
  className={({ isActive }) => (isActive ? 'active' : 'inactive')}
>
  Users
</NavLink>

Popularity 10/10 Helpfulness 8/10 Language javascript

Source: ultimatecourses.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on May 31 2022

Confused Capybara

0 Answers Avg Quality 2/10

Navbar with active link (React-router-dom)

Contents

More Related Answers

Navbar with active link (React-router-dom)

Closely Related Answers

react-router-dom navlink active

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.