# daisyUI Documentation - Dock Component

dock (also know as Bottom navigation or Bottom bar) is a UI element that provides navigation options to the user. Dock sticks to the bottom of the screen.

## Classes and Usage

### Core Classes:
- **dock** - The main dock component
- **dock-label** - Text label for Dock Item
- **dock-active** - Makes the Dock Item look active
- **dock-xs** - Extra Small Dock
- **dock-sm** - Small Dock
- **dock-md** - Medium Dock [Default]
- **dock-lg** - Large Dock
- **dock-xl** - Extra Large Dock

## Examples

### Basic Dock

```html
<div class="dock">
  <button>
    <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="currentColor" stroke-linejoin="miter" stroke-linecap="butt"><polyline points="1 11 12 2 23 11" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="2"></polyline><path d="m5,13v7c0,1.105.895,2,2,2h10c1.105,0,2-.895,2-2v-7" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></path><line x1="12" y1="22" x2="12" y2="18" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></line></g></svg>
    <span class="dock-label">Home</span>
  </button>
  
  <button class="dock-active">
    <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="currentColor" stroke-linejoin="miter" stroke-linecap="butt"><polyline points="3 14 9 14 9 17 15 17 15 14 21 14" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="2"></polyline><rect x="3" y="3" width="18" height="18" rx="2" ry="2" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></rect></g></svg>
    <span class="dock-label">Inbox</span>
  </button>
  
  <button>
    <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="currentColor" stroke-linejoin="miter" stroke-linecap="butt"><circle cx="12" cy="12" r="3" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></circle><path d="m22,13.25v-2.5l-2.318-.966c-.167-.581-.395-1.135-.682-1.654l.954-2.318-1.768-1.768-2.318.954c-.518-.287-1.073-.515-1.654-.682l-.966-2.318h-2.5l-.966,2.318c-.581.167-1.135.395-1.654.682l-2.318-.954-1.768,1.768.954,2.318c-.287.518-.515,1.073-.682,1.654l-2.318.966v2.5l2.318.966c.167.581.395,1.135.682,1.654l-.954,2.318,1.768,1.768,2.318-.954c.518.287,1.073.515,1.654.682l.966,2.318h2.5l.966-2.318c.581-.167,1.135-.395,1.654-.682l2.318.954,1.768-1.768-.954-2.318c.287-.518.515-1.073.682-1.654l2.318-.966Z" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></path></g></svg>
    <span class="dock-label">Settings</span>
  </button>
</div>
```

### Dock with Different Sizes

```html
<!-- Extra Small -->
<div class="dock dock-xs">
  <!-- dock items -->
</div>

<!-- Small -->
<div class="dock dock-sm">
  <!-- dock items -->
</div>

<!-- Medium (default) -->
<div class="dock dock-md">
  <!-- dock items -->
</div>

<!-- Large -->
<div class="dock dock-lg">
  <!-- dock items -->
</div>

<!-- Extra Large -->
<div class="dock dock-xl">
  <!-- dock items -->
</div>
```

## Features

- Bottom navigation or bottom bar UI element
- Sticks to the bottom of the screen
- Responsive design with different size options
- Active state indicator for current selection
- SVG icons support
- Requires viewport meta tag for iOS responsiveness

This component is particularly useful for mobile applications where you need persistent navigation at the bottom of the screen.