React Bits

Card Nav

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

Card Nav, a React Bits component

Use Card 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/CardNav-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.

  • Gooey Nav

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

  • Spotlight Card

    Card lit by a soft spotlight that follows the pointer, catches its edge and reaches nearby cards.