Updated: Card Nav
By Steven Van ·
The React Bits navigation component gains hover-to-open, a stacked small-screen layout and a light mode, in JavaScript or TypeScript with CSS or Tailwind.
Card Nav has been rebuilt in React Bits. The updated component is a navigation bar that springs open into a row of cards, each with its own links.
What changed
- A springy open animation.
- Cards that rise, unfold or fade in.
- Link arrows that slide.
- Opening on hover.
- A stacked layout for small screens.
- A light mode.
Installing it
The component is available in JavaScript or TypeScript, with plain CSS or Tailwind. The TypeScript and Tailwind version installs with npx shadcn@latest add @react-bits/CardNav-TS-TW.
React Bits
An open-source collection of 200+ animated, interactive React components and micro-interactions.
View React Bits →