Dock
macOS-style dock component for primary navigation with icons, labels, and badges
Basic Dock
Simple dock with navigation items
Show Code
Dock Positions
Different dock positions
Show Code
Dock Sizes
Different sizes for various contexts
Show Code
Dock with Badges
Dock items with notification badges
Show Code
Dock Variants
Different visual styles
Show Code
Usage Notes
- DockItem interface includes id, label, icon, active, disabled, badge, onClick, href
- Supports both button (onClick) and link (href) items
- Active items are highlighted with primary color and indicator dot
- Badges automatically position in top-right corner of items
- fixed=true adds CSS fixed positioning for overlay docks
- Hover animations include scale effects for better feedback
- Labels can be hidden with showLabels=false for icon-only docks
- Responsive design adapts layout based on position