React Bits

Pill Nav

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

Pill Nav, a React Bits component

Use Pill 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/PillNav-TS-TW
How to install React Bits components

Related components

  • Gooey Nav

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

  • Card Nav

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

  • Flex Carousel

    An infinite image row that flows through invisible liquid glass at its edges.