Astra

Gooey Nav

A navigation bar whose active pill breaks into goo that flows over to the item you pick.

Gooey Nav, a Astra component

Use Gooey Nav in your project

Choose JavaScript or TypeScript and plain CSS or Tailwind. Enable JavaScript for the interactive preview, customization controls and source tabs.

npx shadcn@latest add @react-bits/GooeyNav-TS-TW
How to install Astra components

Related components

  • Pill Nav

    A pill navigation bar where a fill rises through each link as its label rolls over, with a sliding active dot.

  • Card Nav

    A navigation bar that springs open into a row of cards, each with its own links.

  • Folder

    Folder that drops its flap open or swings open like a book, with pages you can pick.