Flowing Menu
Pro
Big menu rows where a scrolling band flows in from the edge the pointer enters.
Customize
14s
#ff784f
Art
Installation
Flowing Menu is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy flowing-menu.tsx into components/ui and run npm install motion.
Usage
import { FlowingMenu } from "@/components/ui/flowing-menu";
<FlowingMenu
items={[
{ label: "Mountains", href: "/trips/mountains", art: <img src="/art/peaks.jpg" alt="" /> },
{ label: "Coast", href: "/trips/coast", art: <img src="/art/coast.jpg" alt="" /> },
]}
speed={14}
/>Props
6 properties| Property | Type | Default | Description |
|---|---|---|---|
| items | { label, href, art? }[] | — | Rows in order. art is a small image or illustration repeated in the band. |
| speed | number | 14 | Seconds for the band to scroll one full loop. |
| colors | { text?, band?, bandText?, border? } | — | Row text, band background, band text and divider colors. |
| onNavigate | (href, event) => void | — | Called on a plain left click with the default navigation prevented. |
| label | string | "Menu" | Accessible name of the nav. |
| className | string | — | Extra classes for the nav. |
Dependencies: motion