# Updated: Pill Nav

By Steven Van · 2026-10-13

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](<https://creatorstoolbox.com/resources/react-bits>) component, a pill navigation bar where a fill rises through each link as its label rolls over. The [updated version](<https://reactbits.dev/components/pill-nav>) 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](<https://reactbits.dev/favicon.ico>)

React Bits

An open-source collection of 200+ animated, interactive React components and micro-interactions.

[View React Bits →](<https://creatorstoolbox.com/resources/react-bits>)

Sources

[Original source](<https://reactbits.dev/components/pill-nav>)

[Read Updated: Pill Nav on Creators Toolbox](<https://creatorstoolbox.com/blog/react-bits-updated-pill-nav>)

---
Canonical source: https://creatorstoolbox.com/blog/react-bits-updated-pill-nav