navbar active class

[prisma junco]

Hi @strange coral. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

To implement an active classname in a navbar using Next.js, you can utilize the usePathname hook to determine if a link is active and then conditionally apply a class to the active link. Here's an example based on the information provided in the extracts:

'use client'
 
import { usePathname } from 'next/navigation'
import Link from 'next/link'
 
export function Navigation({ navLinks }) {
 const pathname = usePathname()
 
 return (
 <>
 {navLinks.map((link) => {
 const isActive = pathname === link.href
 
 return (
 <Link
 className={isActive ? 'text-blue' : 'text-black'}
 href={link.href}
 key={link.name}
 >
 {link.name}
 </Link>
 )
 })}
 </>
 )
}

In this example, the usePathname hook is used to get the current pathname. Then, for each link in the navLinks array, it checks if the current pathname matches the href of the link. If it does, it applies the 'text-blue' class to indicate that the link is active; otherwise, it applies the 'text-black' class.

This approach is detailed in the Next.js documentation under the section Checking Active Links (https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating).

Alternatively, you can also use the useSelectedLayoutSegment hook to create an active link component that changes style depending on the active segment, which is particularly useful for nested routes. Here's an example:

'use client'
 
import Link from 'next/link'
import { useSelectedLayoutSegment } from 'next/navigation'
 
export default function BlogNavLink({
 slug,
 children,
}) {
 const segment = useSelectedLayoutSegment()
 const isActive = slug === segment
 
 return (
 <Link
 href={`/blog/${slug}`}
 style={{ fontWeight: isActive ? 'bold' : 'normal' }}
 >
 {children}
 </Link>
 )
}

This example is provided in the Next.js documentation under the section Creating an active link component (https://nextjs.org/docs/app/api-reference/functions/use-selected-layout-segment).

Both hooks, usePathname and useSelectedLayoutSegment, are part of the Next.js API and are designed to be used in client-side components.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@strange coral kapa.ai is still learning and improving, please let us know how it did by reacting below

[strange coral]

<SiveNavItem href="/settings" active={pathname === '/settings'}>
<SettingsIcon />
</SiveNavItem>
this is my code. but i want to capter all other urls that has a '/settings' in it

@prisma junco <SiveNavItem href="/settings" active={pathname === '/settings'}>
<SettingsIcon />
</SiveNavItem>
this is my code. but i want to capter all other urls that has a '/settings' in it

[prisma junco]

Let me check the knowledge base for you. One moment! :books:

---

To capture all URLs that contain /settings and not just the exact match, you can modify your code to check if the pathname includes the /settings substring. Here's how you can adjust your <SiveNavItem> component based on the information provided:

'use client'

import { usePathname } from 'next/navigation'

function MyNavbarComponent() {
  const pathname = usePathname();
  const isActive = pathname.includes('/settings');

  return (
    <SiveNavItem href="/settings" active={isActive}>
      <SettingsIcon />
    </SiveNavItem>
  );
}

In this example, the usePathname hook from next/navigation is used to get the current pathname. The isActive variable is set to true if the pathname includes the /settings substring. This way, the active prop of <SiveNavItem> will be true for /settings, as well as for any other URL that includes /settings, such as /settings/profile or /settings/notifications.

Remember to use the usePathname hook within a client component, as indicated in the Next.js documentation for usePathname (https://nextjs.org/docs/app/api-reference/functions/use-pathname).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: