Browse components
Flowing Menu
Full-width menu rows; hovering one wipes in a marquee of text and images from the edge you entered.
Installation
npx shadcn@latest add @glint-ui/flowing-menuFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/flowing-menu.json
Usage
import { FlowingMenu } from "@/components/ui/flowing-menu";
<div className="h-[28rem]">
<FlowingMenu
items={[
{ label: "Work", href: "/work", image: "/work.jpg" },
{ label: "Studio", href: "/studio", image: "/studio.jpg" },
]}
/>
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | ReactNode | — | Array of { label, href?, image }. |
| speed | number | 14 | Seconds for one marquee loop. |
| bandColor | string | "#d9f75c" | Background of the revealed band. |
| bandTextColor | string | "#0b0d06" | Text color inside the band. |
| className | string | — | Extra classes for the root element. |