Flowing Menu
Menu rows where a colored marquee band flows across on hover or focus.
hoverloopa11y
Styled with ONONC's design tokens — shadcn add installs them for you.
Customize
Layout
Row height72px
Corner radius0px
Motion
Marquee speed12s
Label repeats8
Colors
Band color
Band text
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | FlowingMenuItem[] | 4 links | Rows to render ({ label, href? }); omit href to render a button. |
rowHeight | number | 72 | Height of each row in pixels. |
speed | number | 12 | Seconds for one full marquee loop. |
accent | string | "#8b5cf6" | Hover band background (hex). |
accentText | string | "#0b0d18" | Text color on the hover band (hex). |
repeat | number | 8 | Times the label repeats within one marquee track. |
radius | number | 0 | Corner radius of the outer container, in pixels. |
label | string | "Flowing menu" | Accessible name for the nav element. |