Alter the active nav-item's color using Reactjs

Question

Alter the active nav-item's color using Reactjs

Is there a way to dynamically change the color of the navbar text based on the page being browsed?

For instance, when on the homepage, I'd like the home icon to appear in blue.

https://i.sstatic.net/uTfwP.png

Take a look at my Menu.js file below:

import React from "react";
import { Link, withRouter } from "react-router-dom";

const Menu = () => {
  return (
    <div className="wrapper">
      <div className="row">
        <nav>
          <Link to="/home">
            <i className="fas fa-home"></i>
          </Link>
          <Link to="/search">
            <i className="fas fa-search"></i>
          </Link>
          <Link to="/notifications">
            <i className="fas fa-bell"></i>
          </Link>
          <Link to="/messages">
            <i className="fas fa-envelope"></i>
          </Link>
          <Link to="/profile">
            <i className="fas fa-user"></i>
          </Link>
          <Link to="/signout">
            <i className="fas fa-sign-out-alt"></i>
          </Link>
        </nav>
      </div>
    </div>
  );
};

export default withRouter(Menu);

I'm struggling to determine the current page location. Can you help?

javascript css reactjs react-router

Answer 1

Answer №1

As stated in the react-router documentation, activeClassName can be utilized to achieve this specific functionality.

For further information, visit this link

Illustration

<NavLink to="/faq" activeClassName="selected">
  FAQs
</NavLink>

Answer 2

As stated in the react-router documentation, activeClassName can be utilized to achieve this specific functionality.

For further information, visit this link

Illustration

<NavLink to="/faq" activeClassName="selected">
  FAQs
</NavLink>

Answer 3

Answer №2

Adin's suggestion was to follow this implementation: https://codesandbox.io/s/navbar-active-forked-6nep4

import React from "react";
import { Link, withRouter, NavLink } from "react-router-dom";

const Menu = () => {
  return (
    <div className="wrapper">
      <div className="row">
        <nav>
          <NavLink
            to="/home"
            activeStyle={{
              fontWeight: "bold",
              color: "blue"
            }}
          >
            <i className="fas fa-home"></i>
          </NavLink>
          <Link
            to="/search"
            activeStyle={{
              fontWeight: "bold",
              color: "blue"
            }}
          >
            <i className="fas fa-search"></i>
          </Link>
          <NavLink
            to="/notifications"
            activeStyle={{
              fontWeight: "bold",
              color: "blue"
            }}
          >
            <i className="fas fa-bell"></i>
          </NavLink>
          <NavLink
            to="/messages"
            activeStyle={{
              fontWeight: "bold",
              color: "blue"
            }}
          >
            <i className="fas fa-envelope"></i>
          </NavLink>
          <NavLink
            to="/profile"
            activeStyle={{
              fontWeight: "bold",
              color: "blue"
            }}
          >
            <i className="fas fa-user"></i>
          </NavLink>
          <NavLink
            to="/signout"
            activeStyle={{
              fontWeight: "bold",
              color: "blue"
            }}
          >
            <i className="fas fa-sign-out-alt"></i>
          </NavLink>
        </nav>
      </div>
    </div>
  );
};

export default withRouter(Menu);

Answer 4

Adin's suggestion was to follow this implementation: https://codesandbox.io/s/navbar-active-forked-6nep4

import React from "react";
import { Link, withRouter, NavLink } from "react-router-dom";

const Menu = () => {
  return (
    <div className="wrapper">
      <div className="row">
        <nav>
          <NavLink
            to="/home"
            activeStyle={{
              fontWeight: "bold",
              color: "blue"
            }}
          >
            <i className="fas fa-home"></i>
          </NavLink>
          <Link
            to="/search"
            activeStyle={{
              fontWeight: "bold",
              color: "blue"
            }}
          >
            <i className="fas fa-search"></i>
          </Link>
          <NavLink
            to="/notifications"
            activeStyle={{
              fontWeight: "bold",
              color: "blue"
            }}
          >
            <i className="fas fa-bell"></i>
          </NavLink>
          <NavLink
            to="/messages"
            activeStyle={{
              fontWeight: "bold",
              color: "blue"
            }}
          >
            <i className="fas fa-envelope"></i>
          </NavLink>
          <NavLink
            to="/profile"
            activeStyle={{
              fontWeight: "bold",
              color: "blue"
            }}
          >
            <i className="fas fa-user"></i>
          </NavLink>
          <NavLink
            to="/signout"
            activeStyle={{
              fontWeight: "bold",
              color: "blue"
            }}
          >
            <i className="fas fa-sign-out-alt"></i>
          </NavLink>
        </nav>
      </div>
    </div>
  );
};

export default withRouter(Menu);

Answer 5

Answer №3

I encountered a similar issue while working with the NavLink component. There is a property called activeClassName which can detect when the NavLinkis active and apply the specified style.

For example:

<NavLink to="/faq" activeClassName="selected">
  FAQs
</NavLink>

For more information, visit HERE

Answer 6

I encountered a similar issue while working with the NavLink component. There is a property called activeClassName which can detect when the NavLinkis active and apply the specified style.

For example:

<NavLink to="/faq" activeClassName="selected">
  FAQs
</NavLink>

For more information, visit HERE

Answer 7

Answer №4

To achieve this, utilize the history props method in your code:

import { useHistory } from 'react-router';

import { useHistory } from 'react-router';

var history = useHistory();

if (history.location.pathname == '<your route address>') {
   //insert your specific code here
}

Answer 8

To achieve this, utilize the history props method in your code:

import { useHistory } from 'react-router';

import { useHistory } from 'react-router';

var history = useHistory();

if (history.location.pathname == '<your route address>') {
   //insert your specific code here
}

Answer 9

Answer №5

Explore the React Router Documentation

When it comes to history objects, they usually come with the following properties and methods: location - (object) Represents the current location. May contain the following properties: pathname - (string) Indicates the path of the URL

Check out the updated CodeSandbox example through this link

import React from "react";
import { Link, withRouter } from "react-router-dom";

const activeTab = (history, path) => {
  if (history.location.pathname === path) {
    return { color: "#1fa2f1" };
  }
};

const Menu = ({ history }) => {
  return (
    <div className="wrapper">
      <div className="row">
        <nav>
          <Link style={activeTab(history, "/")} to="/home">
            <i className="fas fa-home"></i>
          </Link>
          <Link style={activeTab(history, "/search")} to="/search">
            <i className="fas fa-search"></i>
          </Link>
          <Link
            style={activeTab(history, "/notifications")}
            to="/notifications"
          >
            <i className="fas fa-bell"></i>
          </Link>
          <Link style={activeTab(history, "/messages")} to="/messages">
            <i className="fas fa-envelope"></i>
          </Link>
          <Link  style={activeTab(history, "/profile")} to="/profile">
            <i className="fas fa-user"></i>
          </Link>
          <Link style={activeTab(history, "/signout")}to="/signout">
            <i className="fas fa-sign-out-alt"></i>
          </Link>
        </nav>
      </div>
    </div>
  );
};

export default withRouter(Menu);

Edit:

An interesting benefit of using history instead of NavLink is that NavLink does not support nested routes while history does.

For instance:

"/profile/yogeshdecodes" - Navlink would activate this route.

"/profile/yogeshdecodes" - history wouldn't activate this route because history requires an exact match for activation.

Answer 10

Explore the React Router Documentation

When it comes to history objects, they usually come with the following properties and methods: location - (object) Represents the current location. May contain the following properties: pathname - (string) Indicates the path of the URL

Check out the updated CodeSandbox example through this link

import React from "react";
import { Link, withRouter } from "react-router-dom";

const activeTab = (history, path) => {
  if (history.location.pathname === path) {
    return { color: "#1fa2f1" };
  }
};

const Menu = ({ history }) => {
  return (
    <div className="wrapper">
      <div className="row">
        <nav>
          <Link style={activeTab(history, "/")} to="/home">
            <i className="fas fa-home"></i>
          </Link>
          <Link style={activeTab(history, "/search")} to="/search">
            <i className="fas fa-search"></i>
          </Link>
          <Link
            style={activeTab(history, "/notifications")}
            to="/notifications"
          >
            <i className="fas fa-bell"></i>
          </Link>
          <Link style={activeTab(history, "/messages")} to="/messages">
            <i className="fas fa-envelope"></i>
          </Link>
          <Link  style={activeTab(history, "/profile")} to="/profile">
            <i className="fas fa-user"></i>
          </Link>
          <Link style={activeTab(history, "/signout")}to="/signout">
            <i className="fas fa-sign-out-alt"></i>
          </Link>
        </nav>
      </div>
    </div>
  );
};

export default withRouter(Menu);

Edit:

An interesting benefit of using history instead of NavLink is that NavLink does not support nested routes while history does.

For instance:

"/profile/yogeshdecodes" - Navlink would activate this route.

"/profile/yogeshdecodes" - history wouldn't activate this route because history requires an exact match for activation.

Alter the active nav-item's color using Reactjs

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Edit:

Similar questions

Adding a text stroke to the <input type="text"/> element

What is the best way to retrieve multiple elements by class and change their innerHTML?

The switch statement is not functioning properly when the button is pressed

`Cannot Get jQuery ScrollTop Function to Work for 2nd Element`

Autocomplete like Google with arrow key functionality

What is the best way to customize the MenuProps of Material UI Select component using createTheme?

Using useEffect is not working for me to retrieve data from the API

Enhancing JSX Component with Transition Effect in React

"Enhancing button design with an adjacent image - the step-by

The page keeps refreshing repeatedly

What is preventing it from adhering entirely to the top when using position: fixed?

json evaluation causing an issue

What steps can I take to ensure this fading divider is responsive across all devices?

Having trouble with Vue 3 Composition API's Provide/Inject feature in Single File Components?

``The component in React crashes due to a disabled water filter

Guide to including user-defined headers in Angular's httpRequest

Develop a series of sequential tests for the playwright to execute

Record collection of elements - JavaScript Angular

Choose the tag and class then retrieve the custom attribute

Transitioning the color of links in Firefox causes flickering when switching between the hover and visited state