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: "#discover", text: "Discover", image: "/a.jpg" },
{ link: "#build", text: "Build", image: "/b.jpg" },
{ link: "#ship", 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: "#home", text: "Home" },
{ link: "#products", text: "Product" },
{ link: "#about", 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. |
FlowingMenuItem is { link, text, image? }; text is both the main title and marquee copy. Without image, only text repeats. The component also inherits nav props except children.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: "#discover", text: "Discover", image: "/a.jpg" },
{ link: "#build", text: "Build", image: "/b.jpg" },
]}
speed={18}
repeat={4}
/>
</div>