Skip to main content

​
Overview

Dock is a macOS-style dock component featuring magnifying icons on hover. Perfect for creating application launchers or navigation bars with a modern, interactive feel.

​
Usage

<template>
  <Dock :magnification="60" orientation="horizontal" direction="middle">
    <DockIcon>
      <IconComponent />
    </DockIcon>
    <DockSeparator />
    <DockIcon>
      <AnotherIcon />
    </DockIcon>
  </Dock>
</template>

​
API Reference

​
Dock

Prop NameTypeDescription
classstringAdditional classes to apply to the dock container.
magnificationnumberMagnification factor for the dock icons on hover (default: 60).
distancenumberDistance from the icon center where magnification applies.
directionstringAlignment of icons (top, middle, bottom) (default: middle).
orientationstringOrientation of Dock (vertical, horizontal) (default: horizontal).
Slot NameDescription
defaultDock Dock or other child components to be displayed.

​
DockIcon

Slot NameDescription
defaultComponent or icon to be displayed inside the dock icon.

​
Credits

  • Credits to macOS Dock for the design inspiration and the fantastic hover magnification effect.

Build docs developers (and LLMs) love

Get started for freeTalk to us