Dock

The Dock component is a flexible navigation bar component for displaying a row of interactive actions or destinations. It supports multiple sizes, active state management, and custom content for each item. Use DockItem for each button or action and DockLabel for labels or descriptions.

⚠️ You must use <meta name="viewport" content="viewport-fit=cover"> in your <head> for responsivness of the dock in iOS.

Basic Usage

⚠️ Note: the examples uses absolute positioning. Normally the Dock uses position:fixed.

Home
Inbox
Settings
Code Example
Basic.vue
 Components 
The Dock components include the following:
  • Dock - The root wrapper for dock navigation.
  • DockItem - Represents a single actionable item in the dock.
  • DockLabel - Label for a dock item.
Dock
The Dock component is the root navigation bar. It manages the active state, supports sizing, and provides context for its children.
Dock Props  Type  Description 
size
string
Sets the size of the dock (xs, sm, md, lg, xl).
   
xs
boolean
Enables extra small dock size.
   
sm
boolean
Enables small dock size.
   
md
boolean
Enables medium dock size.
   
lg
boolean
Enables large dock size.
   
xl
boolean
Enables extra large dock size.
Dock Slots  Description 
default
The default slot. Place one or more DockItem components as children.
DockItem
The DockItem component represents a button or action in the dock. It manages its own registration and active state within the dock context.
DockItem Props  Type  Description 
active
boolean
Sets the item as active.
DockItem Slots  Description 
default
The icon, label, or custom content for the dock item.
DockLabel
The DockLabel component provides a label or description for a dock item, typically placed below the icon.
DockLabel Slots  Description 
default
The label or content to display.
Examples
Basic Dock
A dock with three items, with the second item active and labels below icons.
Home
Inbox
Settings
 Code Example 
Basic.vue
Extra Small Dock
A dock with the xs size prop and no labels.
 Code Example 
ExtraSmall.vue
Medium Dock with Labels
A dock with medium size and labels.
Home
Inbox
Settings
 Code Example 
MediumWithLabels.vue
Large Dock with Custom Colors
A dock with large size and custom background/text classes.
Home
Inbox
Settings
 Code Example 
LargeCustomColors.vue
DaisyUI Kit 🌼