How to Add a Menu with Active Item Highlighting with React?

Sometimes we want to add a menu with the active menu item highlighted in our React app.

In this article, we’ll look at how to add a menu with active items highlighting with React.

Add a Menu with Active Item Highlighting

To add a menu with the active item highlighting in our React app, we can listen to the mouseenter and mouseleave events.

We add the highlight to the item that’s hovered over when the mouseenter event is emitted.

And when the mouseleave event is emitted, we clear the highlights on all items.

We set the onMouseEnter prop to the mouseenter event handler and set the onMouseLeave prop to the mouseleave event handler.

To do this, we write:

import { useState } from "react";

export default function App() {
  const [hoveredItem, setHoveredItem] = useState("");
  const resetHover = () => setHoveredItem("");

  return (
    <div className="App">
      <style>
        {`
          .hovered {
            color: red;
          }
        `}
      </style>
      <ul>
        <li
          className={hoveredItem === "apple" ? "hovered" : undefined}
          onMouseEnter={() => setHoveredItem("apple")}
          onMouseLeave={resetHover}
        >
          apple
        </li>
        <li
          className={hoveredItem === "orange" ? "hovered" : undefined}
          onMouseEnter={() => setHoveredItem("apple")}
          onMouseLeave={resetHover}
        >
          orange
        </li>
        <li
          className={hoveredItem === "grape" ? "hovered" : undefined}
          onMouseEnter={() => setHoveredItem("apple")}
          onMouseLeave={resetHover}
        >
          grape
        </li>
        <li
          className={hoveredItem === "pear" ? "hovered" : undefined}
          onMouseEnter={() => setHoveredItem("apple")}
          onMouseLeave={resetHover}
        >
          pear
        </li>
        <li
          className={hoveredItem === "banana" ? "hovered" : undefined}
          onMouseEnter={() => setHoveredItem("apple")}
          onMouseLeave={resetHover}
        >
          banana
        </li>
      </ul>
    </div>
  );
}

We have the hoveredItem state to keep track of which item is highlighted.

And we have the resetHover function to call setHoveredItem function with an empty string to reset hoveredItem ‘s value.

Below that, we have the style tag with the styles for the hovered class, which has the styles that are applied when we highlight an item.

Then we have the li elements with the className applied dynamically.

We apply the hovered class when the hoveredItem value is the same as the value that we pass into the setHoveredItem function.

The onMouseEnter prop is set to a function that sets the hoveredItem state.

And the onMouseLeave prop is set to the resetHover function to reset the hoveredItem value when our mouse leaves the li element.

Now when we hover over an item, we should see the item that our mouse hovered over becomes red.

When our mouse leaves the item, then the items turn back to black.

Conclusion

We can add a menu with active items highlighting with React easily.

To do this, we just listen to the mouseenter and mouseleave events and applies the class to add the highlight accordingly.