Skip to main content

Updated: Flowing Menu

By Steven Van ·

The full-height React menu now uses one liquid band with capsule and slab shapes, per-row notes and keyboard support, in JS or TS with CSS or Tailwind.

The Flowing Menu component in React Bits has been rebuilt around a single liquid band. The band glides and stretches between rows and leans toward the cursor, and an intro sweep plays when the menu appears. The change is described in the original announcement.

What is new

  • New capsule and slab shapes for the band
  • An editorial layout
  • Notes for each row
  • Keyboard support

How it works

Flowing Menu is a full-height menu. The liquid band moves between rows and reveals a scrolling marquee of each item. The component can be added with npx shadcn@latest add @react-bits/FlowingMenu-TS-TW, and it comes in JavaScript or TypeScript versions with plain CSS or Tailwind.

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

Original source

Read Updated: Flowing Menu on Creators Toolbox