How can I add active to bootstrap navbar in react?

Question

I've been trying to add an active class to whichever component the user is on. I'm not sure how to use activeClassName.

JSX code:

import React, { Component } from 'react';
import '../css/nav.scss';
import { Link, NavLink } from 'react-router-dom';
import 'react-bootstrap';
class Navbar extends Component {
  state = {};
  render() {
    return (
      <nav class="navbar sticky-top navbar-expand-lg">
        <Link to="/">
          <a class="navbar-brand" href="#">
            Web_Env
          </a>
        </Link>
        <button
          class="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarNavDropdown"
          aria-controls="navbarNavDropdown"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item">
              <a class="nav-link" href="#">
                Create post
              </a>
            </li>
          </ul>
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <NavLink to="/login" style={{ textDecoration: 'none' }}>
                <a
                  className="nav-link"
                  href="#"
                  activeClassName="nav-link--active"
                >
                  Login
                </a>
              </NavLink>
            </li>
            <li class="nav-item">
              <NavLink to="/register" style={{ textDecoration: 'none' }}>
                <a className="nav-link" href="">
                  Register
                </a>
              </NavLink>
            </li>
          </ul>
        </div>
      </nav>
    );
  }
}

export default Navbar;

Css code:

$color1: #aceca1;
$bgcolor1: #629460;
.navbar {
  background-color: $bgcolor1 !important;
  .navbar-brand {
    color: lighten($color1, 10%);
    font-weight: bold;
    font-size: 2em;
  }
  a.nav-link {
    color: $color1;
    font-size: 1.1em;
    transition: 200ms;
  }
  a.nav-link .active {
    color: white;
    font-size: 1.3em;
  }
  a.nav-link:hover {
    color: white !important;
    transform: scale(1.1);
    text-decoration: none !important;
  }
}

How can I change the styling of the anchor tag depending on which page the user is on. For example if they are in register then the register in the navbar will be bold and have a bigger font.

Does this answer your question? [How do I add an active class to a Link from React Router?](https://stackoverflow.com/questions/34418254/how-do-i-add-an-active-class-to-a-link-from-react-router) — SuleymanSah, Dec 28 '19 at 09:45

hotpink · Accepted Answer · 2019-12-28T09:52:00.447

  <li className="nav-item">
    <NavLink
      to="/register"
      className="nav-link"
      activeClassName="nav-link--active"
    >
      Register
    </NavLink>
  </li>;

You can remove the anchor tags. Please note that I kept the nav-link--active class from your example, but your stylesheet currently does not seem to have a rule set for that class. Also note that you are using the class keyword in your example. This is a reserved keyword. Inside any React component CSS classes should be applied with the className prop.

Alternatively you can do this:

  <li className="nav-item">
    <NavLink
      to="/register"
      className="nav-link"
      activeStyle={{ fontWeight: 'bold' }}
    >
      Register
    </NavLink>
  </li>;

score 0 · Answer 2 · edited Jan 02 '20 at 15:19

0

This should do:

<a className="nav-link" href="">
  { window.location.href.search("register") > -1 ? <b> Register </b> : Register }
</a>

With window.location.href you get the current address, if it matches "register" then the text will show bold.

You can use this same logic to apply diferent styles depending on your location address.

edited Jan 02 '20 at 15:19

carlesgg97

4,184
1
8
24

answered Dec 28 '19 at 09:41

yuri

3,182
2
16
26

score 0 · Answer 3 · answered Feb 13 '21 at 19:05

I think what works best is using a NavLink class because it gives this active property by default.

First import it

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

Use an activeClassName to get the active class property and set it to active.

<NavLink to="/" activeClassName="active">
     Home
</NavLink>

<NavLink to="/store" activeClassName="active">
     Store
</NavLink>

<NavLink to="/about" activeClassName="active">
     About Us
</NavLink>

Style your class in the css by the property active.
```
.active{
    background-color: red;
 }
```

How can I add active to bootstrap navbar in react?

3 Answers3