Next.js Discord

Discord Forum

Nav Tabs With Link, Tailwind CSS - Best way to set active tab [Solved]

Answered
Basset Artésien Normand posted this in #help-forum
Open in Discord
Basset Artésien NormandOP
Hi All.
Looking for help creating nav tabs. How can i manage the state ( which i want stored in URL param )

Here is my current code:

'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'

export default function Tabs() {
  const pathname = usePathname()

  return (
    <ul
      className="flex justify-evenly rounded-3xl p-1 dark:bg-zinc-800"
      data-tabs="tabs"
      role="tablist"
      aria-label="tabs"
    >
      <li className="flex w-full cursor-pointer items-center justify-center rounded-3xl hover:bg-zinc-700">
        <Link href={`${pathname}/watchlist`} role="tab">
          <p className="text-sm text-slate-200">Watchlist</p>
        </Link>
      </li>
      <li className=" flex w-full cursor-pointer items-center justify-center rounded-3xl hover:bg-zinc-700">
        <Link href={`${pathname}/watched`} role="tab">
          <p className="text-sm text-slate-200">Watched</p>
        </Link>
      </li>
    </ul>
  )
}
Answered by Ray
try this
'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'

export default function Tabs() {
  const pathname = usePathname()

  return (
    <ul
      className="flex justify-evenly rounded-3xl p-1 dark:bg-zinc-800"
      data-tabs="tabs"
      role="tablist"
      aria-label="tabs"
    >
      <li className="flex w-full cursor-pointer items-center justify-center rounded-3xl hover:bg-zinc-700">
        <Link href={`/dashboard/movies/watchlist`} role="tab">
          <p className={`text-sm text-slate-200 ${pathname.includes('watchlist') ? 'text-red-500' : ''}`}>Watchlist</p>
        </Link>
      </li>
      <li className=" flex w-full cursor-pointer items-center justify-center rounded-3xl hover:bg-zinc-700">
        <Link href={`/dashboard/movies/watched`} role="tab">
          <p className={`text-sm text-slate-200 ${pathname.includes('watched') ? 'text-red-500' : ''}`}>Watched</p>
        </Link>
      </li>
    </ul>
  )
}
View full answer

18 Replies

what do you mean by managing the state stored in URL param?
Basset Artésien NormandOP
Hi Ray.
Thanks for responding.
I basically just mean i want to set an active tab and it be aligned with the URL.
Also wondering if I can also set a transition when selecting the tabs
This is kind of where i am at the moment.
@Basset Artésien Normand This is kind of where i am at the moment.
Ray
oh ok, so you got it now?
Basset Artésien NormandOP
thats just hover state. I want to be able to click and it sets the active tab and also updates the url
current url is this for examples : http://localhost:3000/dashboard/movies/watched
but if i click the tab again it just adds it to the end
Ray
you shouldnt use pathname as href there
Basset Artésien NormandOP
also the default when browsing to /movies, should be to goto /movies/watchlist
@Basset Artésien Normand also the default when browsing to /movies, should be to goto /movies/watchlist
Ray
try this
'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'

export default function Tabs() {
  const pathname = usePathname()

  return (
    <ul
      className="flex justify-evenly rounded-3xl p-1 dark:bg-zinc-800"
      data-tabs="tabs"
      role="tablist"
      aria-label="tabs"
    >
      <li className="flex w-full cursor-pointer items-center justify-center rounded-3xl hover:bg-zinc-700">
        <Link href={`/dashboard/movies/watchlist`} role="tab">
          <p className={`text-sm text-slate-200 ${pathname.includes('watchlist') ? 'text-red-500' : ''}`}>Watchlist</p>
        </Link>
      </li>
      <li className=" flex w-full cursor-pointer items-center justify-center rounded-3xl hover:bg-zinc-700">
        <Link href={`/dashboard/movies/watched`} role="tab">
          <p className={`text-sm text-slate-200 ${pathname.includes('watched') ? 'text-red-500' : ''}`}>Watched</p>
        </Link>
      </li>
    </ul>
  )
}
Answer
Basset Artésien NormandOP
works a treat
damn you are helpful
but then if i want to make this reusable so i can pass in the tabname for example, wouldnt i want to get the current pathname from somewhere
Basset Artésien NormandOP
i saw this as an example but where am i getting the href from
Ray
I think you should pass it as you said you want to reuse it somewhere?