BubbleMenu
bubble-menuOpens a full-screen arrangement of staggered pill-shaped navigation links from a bubble header.
Usage
Basic usage
logo Bubble + hamburger switch button, click the switch button to expand the full-screen capsule navigation. The built-in 5 examples are used by default; relative + height-fixing container anchor absolute is required for positioning.
<div className="relative h-96 overflow-hidden rounded-xl border">
<BubbleMenu logo={<span>Hulian</span>} />
</div>Custom menu items
items Customized capsules: label / href, rotation creates a sense of hand-made staggering, hoverStyles is set to hover to reverse color (it is recommended to eat chart token).
const items = [
{ label: "Home", href: "#", rotation: -6,
hoverStyles: { bgColor: "var(--color-chart-1)", textColor: "var(--color-primary-foreground)" } },
{ label: "Document", href: "#", rotation: 6,
hoverStyles: { bgColor: "var(--color-chart-2)", textColor: "var(--color-primary-foreground)" } },
{ label: "Contact", href: "#", rotation: -4,
hoverStyles: { bgColor: "var(--color-chart-3)", textColor: "var(--color-primary-foreground)" } },
];
<BubbleMenu logo={<span>Hulian</span>} items={items} />Entry rhythm
animationDuration adjusts the ejection time of a single capsule, staggerDelay adjusts the peak stagger delay of adjacent capsules, the smaller the more compact it is.
<BubbleMenu
logo={<span>Hulian</span>}
items={items}
animationDuration={0.3}
staggerDelay={0.05}
/>When to use
Use BubbleMenu for a highly expressive fullscreen primary navigation on a marketing site or portfolio. Use NavigationMenu or NavMenu for conventional multilevel navigation, Navbar for an application header, or CardNav for an expanding card menu.
Import
import { BubbleMenu } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| items | BubbleMenuItem[] | Built-in examples | Menu items. The five built-in labels and item labels are "\u9996\u9875" (“Home”), "\u5173\u4e8e" (“About”), "\u4f5c\u54c1" (“Work”), "\u535a\u5ba2" (“Blog”), and "\u8054\u7cfb" (“Contact”). |
| menuAriaLabel | string | "\u5207\u6362\u83dc\u5355" | Toggle accessible label; built-in Chinese means “Toggle menu.” |
| useFixedPosition | boolean | false | Fixed to the viewport when true, or absolute within the nearest positioned ancestor. |
| animationDuration | number | 0.5 | Pill entrance duration in seconds. |
| staggerDelay | number | 0.12 | Delay between adjacent pill entrances in seconds. |
| className | string | — | Root nav class name. |
| style | CSSProperties | — | Root inline styles. |
BubbleMenuItem is{ label, href, ariaLabel?, rotation?, hoverStyles? }; rotation resets on mobile, and hoverStyles supports{ bgColor?, textColor? }.
Events
| Event | Type | Description |
|---|---|---|
| onMenuClick | (isOpen: boolean) => void | Reports the next open state. |
Slots
| Slot | Type | Description |
|---|---|---|
| logo | ReactNode | Upper-left logo bubble. A string is treated as an image source; a ReactNode renders directly. |
Example
<div className="relative h-96 overflow-hidden rounded-xl"><BubbleMenu logo={<span>Hulian</span>} /></div>
const items = [
{ label: "Home", href: "#", rotation: -6, hoverStyles: { bgColor: "var(--color-chart-1)", textColor: "var(--color-primary-foreground)" } },
{ label: "Docs", href: "#", rotation: 6, hoverStyles: { bgColor: "var(--color-chart-2)", textColor: "var(--color-primary-foreground)" } },
];
<BubbleMenu logo={<span>Hulian</span>} items={items} />Usage guidelines
- With the default absolute positioning, provide a positioned ancestor. Use fixed positioning for a real viewport-level site header.
- The parent needs overflow-hidden to contain the expanded layer.
- Token colors require the
--color-prefix. Entrances degrade under reduced motion. - The root and fallback link labels are built-in Chinese
"\u4e3b\u5bfc\u822a"(“Primary navigation”) and"\u83dc\u5355\u94fe\u63a5"(“Menu link”).
Related
Navbar · BeianFooter · NavMenu · NavigationMenu · Menu · Menubar
Playground
<div className="relative h-96 overflow-hidden rounded-xl">
<BubbleMenu
logo={<span>Hulian</span>}
animationDuration={0.5}
staggerDelay={0.12}
useFixedPosition={false}
/>
</div>