Dock — dock

PREVIEW

USAGE

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

import { Dock } from '@oalacea/chaosui/navigation/dock';

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

<Dock items={items} />
<Dock items={items} position="left" variant="neon" />

PROPS

PropTypeDefault

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

DockItem[]-

maxScaleMaximum scale for hovered item

number1.5

spacingSpacing between items in px

number8

iconSizeBase icon size in px

number48

positionPosition of the dock

"bottom" | "top" | "left" | "right""bottom"

magnificationRangeMagnification range in px

number150

animationDurationAnimation duration in ms

number200

variantStyle variant

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