Updated: Pill Nav
By Steven Van ·
The rebuilt React Bits navbar adds a sliding active dot, a small-screen menu and a light mode, in JavaScript or TypeScript with CSS or Tailwind.
React Bits has rebuilt its Pill Nav component, a pill navigation bar where a fill rises through each link as its label rolls over. The updated version changes the hover animation and adds new display options.
What changed
- A smoother rising fill and rolling labels on hover
- A sliding active dot that marks the current link
- A gliding pill option
- A menu that folds in on small screens
- A light mode
Installation
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/PillNav-TS-TW. The component page has an interactive preview, customization controls and source tabs, which need JavaScript enabled.
React Bits
An open-source collection of 200+ animated, interactive React components and micro-interactions.
View React Bits →