Astra

Card Nav

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

Card Nav, a Astra 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 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.

  • 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.