BubbleMenu — bubble-menu

PREVIEW

USAGE

case 'glass-button': return ; case 'neon-glow': return ; case 'floating-button': return ;

import { BubbleMenu } from '@oalacea/chaosui/navigation/bubble-menu';

const items = [
  { id: 'home', icon: <HomeIcon />, label: 'Home' },
  { id: 'search', icon: <SearchIcon />, label: 'Search' },
  { id: 'settings', icon: <SettingsIcon />, label: 'Settings', active: true }
];

<BubbleMenu items={items} />
<BubbleMenu items={items} variant="neon" bubbleSize={80} />

PROPS

PropTypeDefault

itemsMenu items {id, icon, label?, onClick?, href?, active?, disabled?}

BubbleMenuItem[]-

bubbleSizeSize of each bubble in px

number60

spacingSpacing between bubbles in px

number16

floatingEnable floating animation

booleantrue

alignAlignment of bubbles

"center" | "left" | "right""center"

variantStyle variant

"glass" | "solid" | "neon" | "pastel""glass"

animationSpeedAnimation speed multiplier

number1