"Emphasize menu items with an underline as you navigate through the

Question

"Emphasize menu items with an underline as you navigate through the

I am using Gatsby with React and have a navigation menu with links. I would like to make it so that when a link is clicked, a border bottom appears to indicate the current page, rather than only on hover.

       <ul className="men" id="menu">
            <li className="menuSob">
              <Link className="menuItem" to="/about/">
                About Magnet
              </Link>
             </li>
             <li className="menuRep">
              <Link className="menuItem" to="/representacoes/">
                Representations
              </Link>
             </li>
             <li className="menuServ">
              <Link className="menuItem" to="/services/">
               Services
              </Link>
             </li>
             <li className="menuContent">
              <Link className="menuItem" to="/content/">
                Content
              </Link>
             </li>
             <li className="menuCont">
              <Link className="menuItem" to="/contact/">
                Contact
              </Link>
             </li>
       </ul>

javascript html css reactjs gatsby

Answer 1

Answer №1

With Gatsby Link, you can easily achieve this using either the activeClassName or activeStyle property. Here's an example:

   <li className="menuSob">
     <Link className="menuItem" to="/about/" activeClassName={`active`}>
            About Magnet
     </Link>
   </li>

In your .scss file, add the following:

.active{
  text-decoration: underline
}

To learn more, visit the Gatsby Link documentation. Gatsby builds on React routing, offering all its benefits along with additional features unique to Gatsby. For instance, by setting partiallyActive={true} in each <Link>, all paths under the route path will be considered "active". For example:

      <Link className="menuItem" to="/contact/" activeClassName={`active`} partiallyActive={true}>
        Contact
      </Link>

This will mark as "active" all paths under /contact (e.g., /contact/give-me-five, /contact/etc, and so forth).

Answer 2

With Gatsby Link, you can easily achieve this using either the activeClassName or activeStyle property. Here's an example:

   <li className="menuSob">
     <Link className="menuItem" to="/about/" activeClassName={`active`}>
            About Magnet
     </Link>
   </li>

In your .scss file, add the following:

.active{
  text-decoration: underline
}

To learn more, visit the Gatsby Link documentation. Gatsby builds on React routing, offering all its benefits along with additional features unique to Gatsby. For instance, by setting partiallyActive={true} in each <Link>, all paths under the route path will be considered "active". For example:

      <Link className="menuItem" to="/contact/" activeClassName={`active`} partiallyActive={true}>
        Contact
      </Link>

This will mark as "active" all paths under /contact (e.g., /contact/give-me-five, /contact/etc, and so forth).

"Emphasize menu items with an underline as you navigate through the

Answer №1

Similar questions

What separates npm run dev from npm run start when working with Next.js?

Encountering a problem while setting up a Node JS project with npm/npx using vite/react js, resulting in the error message: "node:internal/modules/cjs/loader:120

Custom shaped corrugated sheet in three dimensions

Stretch element to reach the edge of the container

When Apache proxypass is used, NextJS encounters unexpected errors

Passing parameters from a child component and router using ReactJS: A convenient method

Form Input Field with Real-Time JavaScript Validation

Is JSON.stringify failing to function correctly in Mozilla Firefox?

Creating a visually appealing layout by dividing HTML content into two columns within a WebView

Initiate monitoring for child component modifications

I am currently attempting to extract data from a JSON file by using key names for reference, but I am running into issues when dealing with nested keys

Having trouble sending data through a jQuery AJAX request?

Transform Ajax response into dropdown menu option

Exploring textboxes with jQuery loops

ReactJS state not being updated due to a nested Axios call

Alert classes are not included in bootstrap 5 npm package

How to use mousedown event in Three.js to create line drawings

Troubleshooting Safari compatibility issues with Twitter Direct Messages in Angular

Issue with the transparency of a model in three.js

Troubleshooting the "@material-ui/core" issue in React: Step-by-step guide