FlowingMenu
flowing-menuPairs navigation rows with looping text or image marquees on pointer entry.
Usage
Basic usage
Vertical menu items, when the pointer slides in from the nearest upper/lower edge, a marquee (text + picture) is unveiled from the same side to cover the entire row, and returns when leaving. It needs to be placed in a fixed-height container.
<div className="h-80 overflow-hidden rounded-xl border">
<FlowingMenu
items={[
{ link: "#", text: "Discover", image: "/a.jpg" },
{ link: "#", text: "Build", image: "/b.jpg" },
{ link: "#", text: "Ship", image: "/c.jpg" },
]}
/>
</div>Plain text (no pictures)
item When image is not passed, the ticker only runs text, separated by a small horizontal bar, and does not render image blocks.
<FlowingMenu
items={[
{ link: "#", text: "Home" },
{ link: "#", text: "Product" },
{ link: "#", text: "About" },
]}
/>Speed and copies
speed The larger the marquee, the slower it is; repeat controls the number of repeats within a single item, filling it up and ensuring seamless circulation (minimum 2).
<FlowingMenu items={items} speed={30} repeat={6} />When to use
Use FlowingMenu for a full-height portfolio or brand directory with large vertical items that reveal a text/image marquee from the pointer's entry direction. Use BubbleMenu for fullscreen pills, CardNav for expanding cards, or NavigationMenu and NavMenu for conventional multilevel navigation.
Import
import { FlowingMenu } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| items * | FlowingMenuItem[] | - | Menu entries. |
| speed | number | 18 | Seconds for the marquee to travel one viewport; larger is slower. |
| repeat | number | 4 | Text repetitions per block for continuous coverage. |
The component also inherits ComponentPropsWithoutRef<"nav"> except children, so className and style pass through.
FlowingMenuItem
| Name | Type | Default | Description |
|---|---|---|---|
| link * | string | - | Link destination. |
| text * | string | - | Copy used as both the main title and the marquee text. |
| image | string | - | Image repeated inside the marquee. Without it only text repeats and no image block renders. |
Example
<div className="h-80 overflow-hidden rounded-xl border border-border">
<FlowingMenu items={[{ link: "#discover", text: "Discover", image: "/a.jpg" }, { link: "#build", text: "Build", image: "/b.jpg" }]} />
</div>
<FlowingMenu items={[{ link: "#home", text: "Home" }]} speed={30} repeat={6} />Usage guidelines
- Place the nav in an explicitly sized, overflow-hidden container so items have vertical space and the marquee stays clipped.
- Marquee and reveal effects degrade under reduced motion.
- No other known caveats.
Related
Navbar · BeianFooter · NavMenu · NavigationMenu · Menu · Menubar
Playground
<div className="h-80 overflow-hidden rounded-xl border border-border">
<FlowingMenu
items={[
{ link: "#", text: "Discover", image: "/a.jpg" },
{ link: "#", text: "Build", image: "/b.jpg" },
]}
speed={18}
repeat={4}
/>
</div>