React Bits

Gooey Nav

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

Gooey Nav, a React Bits 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 React Bits 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.