Dock
Bottom navigation bar with iOS-style dock behavior
Class Reference
For iOS compatibility:
<meta name="viewport" content="viewport-fit=cover"> must be added to your layout's head section. Basic
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"
)Auto-import documentation coming soon...
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"
)Auto-import documentation coming soon...
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"
)Auto-import documentation coming soon...
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"
)Auto-import documentation coming soon...
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"
)Auto-import documentation coming soon...
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"
)Auto-import documentation coming soon...
Variants
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"
)Auto-import documentation coming soon...
Class Reference
| Class | Type | Description |
|---|---|---|
| dock | Component | Base container class |
| dock-label | Part | Text label for Dock Item |
| dock-active | Modifier | Makes the Dock Item look active |
| dock-xs | Size | Extra Small Dock |
| dock-sm | Size | Small Dock |
| dock-md | Size | Medium Dock [Default] |
| dock-lg | Size | Large Dock |
| dock-xl | Size | Extra Large Dock |
Do you have a question? ask the community
Do you see a bug? open an issue on GitHub
LLMs Context: Full Markdown | This Component