<a id="dock"></a>

## Dock  
**Category**: Navigation
Bottom navigation bar with iOS-style dock behavior
### Examples

#### Basic Dock  
```python
Div(
    Button(
        Icon.home(cls="size-[1.2em]"),
        Span("Home", cls="dock-label"),                    
    ),
    Button(
        Icon.email(cls="size-[1.2em]"),
        Span("Inbox", cls="dock-label"),
        cls="dock-active"
    ),
    Button(
        Icon.settings(cls="size-[1.2em]"),
        Span("Settings", cls="dock-label"),
    ),
    cls="dock"
)
```

#### Custom Colors  
```python
Div(
    Button(
        Icon.home(cls="size-[1.2em]"),
        Span("Home", cls="dock-label"),                    
    ),
    Button(
        Icon.email(cls="size-[1.2em]"),
        Span("Inbox", cls="dock-label"),
        cls="dock-active"
    ),
    Button(
        Icon.settings(cls="size-[1.2em]"),
        Span("Settings", cls="dock-label"),
    ),
    cls="dock bg-neutral text-neutral-content"
)
```

#### Extra Small Dock  
```python
Div(
    Button(
        Icon.home(cls="size-[1.2em]"),                                    
    ),
    Button(
        Icon.email(cls="size-[1.2em]"),
        cls="dock-active"
    ),
    Button(
        Icon.settings(cls="size-[1.2em]"),
    ),
    cls="dock dock-xs"
)
```

#### Small Dock  
```python
Div(
    Button(
        Icon.home(cls="size-[1.2em]"),                                    
    ),
    Button(
        Icon.email(cls="size-[1.2em]"),
        cls="dock-active"
    ),
    Button(
        Icon.settings(cls="size-[1.2em]"),
    ),
    cls="dock dock-sm"
)
```

#### Medium Dock  
```python
Div(
    Button(
        Icon.home(cls="size-[1.2em]"),                                    
    ),
    Button(
        Icon.email(cls="size-[1.2em]"),
        cls="dock-active"
    ),
    Button(
        Icon.settings(cls="size-[1.2em]"),
    ),
    cls="dock dock-md"
)
```

#### Large Dock  
```python
Div(
    Button(
        Icon.home(cls="size-[1.2em]"),
        Span("Home", cls="dock-label"),                    
    ),
    Button(
        Icon.email(cls="size-[1.2em]"),
        Span("Inbox", cls="dock-label"),
        cls="dock-active"
    ),
    Button(
        Icon.settings(cls="size-[1.2em]"),
        Span("Settings", cls="dock-label"),
    ),
    cls="dock dock-lg"
)
```

#### Extra Large Dock  
```python
Div(
    Button(
        Icon.home(cls="size-[1.2em]"),
        Span("Home", cls="dock-label"),                    
    ),
    Button(
        Icon.email(cls="size-[1.2em]"),
        Span("Inbox", cls="dock-label"),
        cls="dock-active"
    ),
    Button(
        Icon.settings(cls="size-[1.2em]"),
        Span("Settings", cls="dock-label"),
    ),
    cls="dock dock-xl border border-base-300 relative"
)
```