Astro Rendering | Astro Lounge | Page 1

woeful hollow May 6, 2026, 11:12 PM

#

Hi all! so I've trying to build portofolio website using Astro + React + UnoCSS + GSAP, but I can't understand why does my nav blinking like this when changing page, it re-renders everytime I navigate, maybe someone here can point me out what did I do wrong? thanks in advance

#

// Navbar.tsx

type Props = {
  activeUrl: string
}

const MENU = [
  { name: 'Home', path: '/' },
  { name: 'Blog', path: '/blog' },
  { name: 'Projects', path: '/projects' },
  { name: 'About', path: '/about' }
]

function isActive(activeUrl: string, path: string) {
  if (path === '/') return activeUrl === '/'
  return activeUrl === path || activeUrl.startsWith(path + '/')
}

function classNames(...classes: (string | false | undefined)[]) {
  return classes.filter(Boolean).join(' ')
}

const componentStyles = {
  nav: 'max-w-content mx-auto sticky top-6 z-10 px-4',

  container: `
    relative w-fit flex gap-1 p-1.5
    rounded-lg
    bg-[#cfcfcf]/50
    backdrop-blur-md backdrop-saturate-150
    font-geist
  `,

  link: `
    relative px-3 py-1.5
    text-sm font-600
    rounded-md
    transition-all duration-300 ease-in-out
    hover:bg-white/50
    focus-visible:outline-none
    focus-visible:ring-2 focus-visible:ring-black/40
  `,

  active: `
    text-black
  `,

  inactive: `
    text-black/25
    hover:text-black
  `
}

export default function Navbar({ activeUrl = '/' }: Props) {
  return (
    <nav className={componentStyles.nav}>
      <div className={componentStyles.container}>
        {MENU.map(({ name, path }) => {
          const active = isActive(activeUrl, path)

          return (
            <a
              key={path}
              href={path}
              aria-current={active ? 'page' : undefined}
              className={classNames(
                componentStyles.link,
                active ? componentStyles.active : componentStyles.inactive
              )}
            >
              {name}
            </a>
          )
        })}
      </div>
    </nav>
  )
}

#

// BaseLayout.astro

---
import { ClientRouter } from 'astro:transitions'
import "../styles/global.css";

import { Navbar } from '../components'
---
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Astro</title>
    <ClientRouter />
  </head>
  <body class="bg-base text-neutral-900 font-sans">
    <Navbar client:load transition:persist activeUrl={Astro.url.pathname} />
    <main class="max-w-content mx-auto px-4">
      <slot />
    </main>
  </body>
</html>

gloomy vigil May 7, 2026, 4:35 AM

#

At a glance I would guess it has to do with transitions. Check the docs here, you'll see a little box with known limitations: https://docs.astro.build/en/guides/view-transitions/#maintaining-state

Docs

View transitions

Enable seamless navigation between pages in Astro with view transitions.

woeful hollow May 7, 2026, 4:49 AM

#

it seems so, but as you can see from my code above, i did use transitions:persist for the Navbar component, but still.

i've tried re-creating the Navbar in vue and plain astro, the same thing still happening everytime i change the page.

wrapping the island component and adding transitions:persist to it also didn't work

#Astro Rendering