Fluxo UIFluxo UIv0.4.1

Dock

A floating bar of icons with optional Mac-style magnification, auto-hide, and configurable visual treatments.

Basic Usage

Default Dock

Hover an icon to see magnification and a tooltip. Set mode='fixed' (default) in real apps; this demo uses mode='inline' to live inside the example.

Last activated: —
import { Dock } from 'fluxo-ui';

<Dock
  position="bottom"
  layout="pill"
  background="glass"
  mode="inline"
  items={[
    { id: 'home', icon: DashboardIcon, label: 'Home' },
    { id: 'docs', icon: FolderIcon, label: 'Docs' },
    { id: 'edit', icon: EditIcon, label: 'Edit', badge: 3 },
    { id: 'sep1', icon: ShareIcon, label: 'Share', separatorAfter: true },
    { id: 'settings', icon: SettingsIcon, label: 'Settings' },
  ]}
/>

Layouts × Backgrounds

Layouts × Backgrounds

Cross product of every layout and background treatment.

pill
rectangle
floating
attached
<Dock layout="pill" background="glass" mode="inline" items={items} />
<Dock layout="rectangle" background="solid" mode="inline" items={items} />
<Dock layout="floating" background="gradient" gradient={{ from: '#3b82f6', to: '#a855f7' }} mode="inline" items={items} />
<Dock layout="attached" background="transparent" mode="inline" items={items} />

Position & Orientation

Position & Orientation

Bottom and top render horizontally; left and right render vertically. Each side has its own anchor for tooltips.

position="bottom"
position="top"
position="left"
position="right"
<Dock position="bottom" mode="inline" items={items} />
<Dock position="top" mode="inline" items={items} />
<Dock position="left" mode="inline" items={items} />
<Dock position="right" mode="inline" items={items} />

Magnification

Magnification Controls

Tune the peak scale, falloff distance, and base icon size to match your app's feel. Set magnification to 1 to disable it.

1.60×80px40px
<Dock magnification={1.6} magnificationDistance={80} items={items} />
<Dock magnification={1} items={items} />

Import

import { Dock } from 'fluxo-ui';
import type { DockProps, DockItem, DockEdgePosition, DockLayout, DockBackground, DockMode } from 'fluxo-ui';

Props

itemsreq
Array<DockItem>

Dock items: { id, icon, label?, href?, onClick?, disabled?, badge?, separatorAfter? }

position
'bottom' | 'top' | 'left' | 'right'"'bottom'"

Edge of the viewport the dock attaches to

align
'start' | 'center' | 'end'"'center'"

Alignment along the dock axis

layout
'pill' | 'rectangle' | 'floating' | 'attached'"'pill'"

Visual treatment of the dock container

background
'glass' | 'solid' | 'gradient' | 'transparent'"'glass'"

Background treatment

gradient
{ from: string; to: string; angle?: number }

Gradient stops, used when background is 'gradient'

magnification
number"1.6"

Peak scale factor of hovered/focused item; 1 disables magnification

magnificationDistance
number"80"

Radius (px) over which magnification falls off

iconSize
number"40"

Base icon container size in px

gap
number"8"

Base gap between dock items in px

autoHide
boolean"false"

Slide off-screen and reveal on edge hover/focus

autoHideDelay
number"500"

Milliseconds before hiding after pointer leaves

triggerZone
number"12"

Px-thick hot zone along the edge that reveals an auto-hidden dock

showTooltips
boolean"true"

Show item labels as tooltips on hover/focus

mode
'fixed' | 'inline'"'fixed'"

'fixed' attaches the dock to the viewport edge; 'inline' renders it inside its parent layout

onItemClick
(id: string) => void

Fired when a dock item is activated

id
string

HTML id attribute

className
string

Additional CSS classes

ariaLabel
string

Accessible label for the dock toolbar (default: 'Dock')

Features

Mac-style Magnification

Smooth scale-on-hover with a configurable falloff distance — disable by setting magnification to 1.

4 Positions

Anchor to bottom, top, left, or right. Tooltips and badges adapt automatically.

Auto-Hide

Slide off-screen and reveal on edge hover/focus — great for distraction-free apps.

Inline or Fixed

mode="fixed" anchors to the viewport; mode="inline" keeps the dock inside its parent.