How to set isActive on active link in a map loop using NEXTUI navbar?

August 29, 2022

I’m using the new NEXTUI navbar: https://nextui.org/docs/components/navbar

I want to set isActive property on the active link and there isn’t much help to get from Google so I hope someone here have used it or knows how to do so. I’m using Next.js

A portion of the code:

<Navbar.Content
  enableCursorHighlight
  activeColor="primary"
  hideIn="xs"
  variant="highlight-rounded"
>

  {navigation.map((item, index) => (
    <Navbar.Link key={index} href={item.link}>
      {item.title}
    </Navbar.Link>
  ))}

</Navbar.Content>

EDIT: When I add isActive in the map loop, it effects all. I want to set isActiveon the clicked (active link) one at a time. If I didn’t loop my nav links (which is coming from backend) I could set IsActive property on one but then its just that one that have isActive even if I click on other links.

>Solution :

You have to use a specific condition in your map to check if you are on the correct route.

For example: you can use the next/router and compare it to the link property of the item.

 const { asPath } = useRouter();
.
.
.
//inside return body 
....
 {navigation.map((item, index) => {
    if(asPath === item.link)
   return(<Navbar.Link isActive key={index} href={item.link}>
      {item.title}
    </Navbar.Link>);
  });
  else
 return(<Navbar.Lin key={index} href=. {item.link}>
      {item.title}
    </Navbar.Link>);
  })
}