Dock
v0.0.10
mix mishka.ui.gen.component dock
Overview of the Phoenix LiveView Dock Component
The Mishka Chelekom Dock component is a versatile Phoenix LiveView navigation element designed for the bottom (or top) of the viewport. It works as a static section, a sticky bar, an edge-to-edge fixed bottom navigation, or a centered floating pill, with everything you need for mobile-style navigation patterns.
Items support icons, labels, badges, an active state, and any of the navigate/patch/href link helpers (or render as a plain button when none are given). All colors and shadows resolve to the Chelekom CSS-variable tokens, so the dock automatically follows your priv/mishka_chelekom/config.exs overrides.
Base Color & Variant
The default base variant is a clean, neutral dock that works in both light and dark themes.
Base Color & Variant
<.dock id="dock-base">
<:item icon="hero-home" label="Home" navigate="/" active />
<:item icon="hero-inbox" label="Inbox" navigate="/inbox" />
<:item icon="hero-cog-6-tooth" label="Settings" navigate="/settings" />
</.dock>Default variant
Solid background using any chelekom color: natural, white, primary, secondary, dark, success, warning, danger, info, silver, misc, dawn.
Default variant
<.dock id="dock-default" variant="default" color="primary">
<:item icon="hero-home" label="Home" navigate="/" />
<:item icon="hero-inbox" label="Inbox" navigate="/inbox" active />
<:item icon="hero-cog-6-tooth" label="Settings" navigate="/settings" />
</.dock>
<.dock id="dock-default-natural" variant="default" color="natural" />
<.dock id="dock-default-success" variant="default" color="success" />
<.dock id="dock-default-danger" variant="default" color="danger" />Shadow variant
Same color palette as default but with a chelekom-tokened drop shadow for depth.
Shadow variant
<.dock id="dock-shadow" variant="shadow" color="primary">
<:item icon="hero-home" label="Home" navigate="/" active />
<:item icon="hero-inbox" label="Inbox" navigate="/inbox" />
<:item icon="hero-cog-6-tooth" label="Settings" navigate="/settings" />
</.dock>Bordered variant
Soft tinted background with a same-color border. The active item gets an additional subtle background to highlight selection.
Bordered variant
<.dock id="dock-bordered" variant="bordered" color="success">
<:item icon="hero-home" label="Home" navigate="/" active />
<:item icon="hero-inbox" label="Inbox" navigate="/inbox" />
<:item icon="hero-cog-6-tooth" label="Settings" navigate="/settings" />
</.dock>Gradient variant
Uses the chelekom gradient tokens for a vibrant background.
Gradient variant
<.dock id="dock-gradient" variant="gradient" color="misc">
<:item icon="hero-home" label="Home" navigate="/" />
<:item icon="hero-inbox" label="Inbox" navigate="/inbox" active />
<:item icon="hero-cog-6-tooth" label="Settings" navigate="/settings" />
</.dock>Size prop
Controls icon size, label size, and minimum item height. Five steps: extra_small, small, medium, large, extra_large.
Size prop
<.dock id="dock-xs" size="extra_small">...items...</.dock>
<.dock id="dock-sm" size="small">...items...</.dock>
<.dock id="dock-md" size="medium">...items...</.dock>
<.dock id="dock-lg" size="large">...items...</.dock>
<.dock id="dock-xl" size="extra_large">...items...</.dock>Rounded prop
Rounded prop
<.dock id="dock-r-none" rounded="none">...</.dock>
<.dock id="dock-r-small" rounded="small">...</.dock>
<.dock id="dock-r-medium" rounded="medium">...</.dock>
<.dock id="dock-r-large" rounded="large">...</.dock>
<.dock id="dock-r-extra_large" rounded="extra_large">...</.dock>
<.dock id="dock-r-full" rounded="full">...</.dock>Padding prop
Padding prop
<.dock id="dock-p-xs" padding="extra_small">...</.dock>
<.dock id="dock-p-sm" padding="small">...</.dock>
<.dock id="dock-p-md" padding="medium">...</.dock>
<.dock id="dock-p-lg" padding="large">...</.dock>
<.dock id="dock-p-xl" padding="extra_large">...</.dock>Space prop
Gap between items inside the dock.
Space prop
<.dock id="dock-s-xs" space="extra_small">...</.dock>
<.dock id="dock-s-sm" space="small">...</.dock>
<.dock id="dock-s-md" space="medium">...</.dock>
<.dock id="dock-s-lg" space="large">...</.dock>
<.dock id="dock-s-xl" space="extra_large">...</.dock>Border prop
Border thickness. It only applies when the variant has a visible border (base, bordered).
Border prop
<.dock id="dock-b-xs" border="extra_small" variant="base">...</.dock>
<.dock id="dock-b-sm" border="small" variant="base">...</.dock>
<.dock id="dock-b-md" border="medium" variant="base">...</.dock>
<.dock id="dock-b-lg" border="large" variant="base">...</.dock>
<.dock id="dock-b-xl" border="extra_large" variant="base">...</.dock>Max width prop
Constrains the inner item row width. Useful when the dock container itself is full-width (e.g., fixed positions) but you want the items grouped in the center.
Max width prop
<.dock id="dock-mw-md" max_width="medium">...</.dock>
<.dock id="dock-mw-lg" max_width="large">...</.dock>
<.dock id="dock-mw-full" max_width="full">...</.dock>Position prop
Choose how the dock attaches to the viewport. The toggleable demos below activate the dock so you can see it in real position. Click again to hide.
Position prop
Static (default, sits inline in the page flow):
<.dock id="dock-static" position="static">...</.dock>
<.dock id="dock-sticky-bottom" position="sticky_bottom">...</.dock>
<.dock id="dock-sticky-top" position="sticky_top">...</.dock>
<.dock id="dock-fixed-bottom" position="fixed_bottom">...</.dock>
<.dock id="dock-fixed-top" position="fixed_top">...</.dock>
<.dock id="dock-fixed-bottom-center" position="fixed_bottom_center">...</.dock>
<.dock id="dock-fixed-top-center" position="fixed_top_center">...</.dock>Show labels prop
Set show_labels={expr} for an icons-only dock. Pairs nicely with rounded="full".
Show labels prop
<.dock id="dock-no-labels" show_labels={false} rounded="full" size="large">
<:item icon="hero-home" label="Home" navigate="/" active />
<:item icon="hero-magnifying-glass" label="Search" navigate="/search" />
<:item icon="hero-user" label="Profile" navigate="/profile" />
</.dock>Active item
Mark a single item as active to highlight it. The active item gets full opacity, a slightly larger icon, and an aria-current="page" attribute for accessibility.
Active item
<.dock id="dock-active-state">
<:item icon="hero-home" label="Home" navigate="/" />
<:item icon="hero-inbox" label="Inbox" navigate="/inbox" active />
<:item icon="hero-cog-6-tooth" label="Settings" navigate="/settings" />
</.dock>Item badge
Each item accepts a badge string (e.g., "3", "9+", or a dot). The badge anchors at the top-right of the icon.
Item badge
<.dock id="dock-with-badge">
<:item icon="hero-home" label="Home" navigate="/" />
<:item icon="hero-inbox" label="Inbox" navigate="/inbox" badge="3" active />
<:item icon="hero-bell" label="Alerts" navigate="/alerts" badge="9+" />
</.dock>Item color override
Pass color on an individual item to override the dock's color for that single entry. Useful for the bordered variant.
Item color override
<.dock id="dock-item-color" variant="bordered">
<:item icon="hero-home" label="Home" navigate="/" color="primary" />
<:item icon="hero-heart" label="Saved" navigate="/saved" color="danger" />
<:item icon="hero-bolt" label="Quick" navigate="/quick" color="warning" />
</.dock>Item link helpers
Items render as a Phoenix link when you pass navigate, patch, or href. With none of those, the item renders as a plain button so you can wire it to phx-click.
Item link helpers
<.dock id="dock-item-links">
<:item icon="hero-home" label="Navigate" navigate="/" />
<:item icon="hero-arrow-path" label="Patch" patch="/" />
<:item icon="hero-link" label="External" href="https://mishka.tools" />
<:item icon="hero-cursor-arrow-rays" label="Action" />
</.dock>Class customization hooks
Every layer has a class hook for full Tailwind escape: class, item_class, icon_class, label_class, active_class, inner_wrapper_class. Item-level versions also exist (icon_class, label_class, badge_class).
Class customization hooks
<.dock
id="dock-classes"
class="bg-natural-bordered-bg-light dark:bg-natural-bordered-bg-dark"
item_class="hover:bg-base-hover-light dark:hover:bg-base-hover-dark"
icon_class="text-primary-light dark:text-primary-dark"
label_class="font-semibold"
active_class="text-primary-light dark:text-primary-dark"
>
<:item icon="hero-home" label="Home" navigate="/" active />
<:item icon="hero-inbox" label="Inbox" navigate="/inbox" />
<:item icon="hero-cog-6-tooth" label="Settings" navigate="/settings" />
</.dock>Frosted-glass / Android dock recipe
Use the fixed_bottom_center position with backdrop-blur and translucent base tokens to get the modern Android / iOS dock look. Click the button to toggle.
Frosted-glass / Android dock recipe
<.dock
id="dock-glass"
position="fixed_bottom_center"
variant="base"
rounded="full"
padding="small"
space="medium"
border="none"
show_labels={false}
class={[
"!bottom-8 px-3",
"!bg-white/60 dark:!bg-base-bg-dark/60 backdrop-blur-xl backdrop-saturate-150",
"!border !border-base-border-light/40 dark:!border-base-border-dark/40",
"!shadow-xl",
"!text-base-text-light dark:!text-base-text-dark"
]}
>
<:item icon="hero-home" label="Home" navigate="/" active />
<:item icon="hero-newspaper" label="News" navigate="/blog" />
<:item icon="hero-squares-2x2" label="Apps" navigate="/chelekom" />
<:item icon="hero-bell" label="Notifications" navigate="/" badge="3" />
<:item icon="hero-user" label="Profile" navigate="/" />
</.dock>Attributes
| Name | Type | Default | Values | Required | Description |
|---|---|---|---|---|---|
id
|
string
| — | — | Yes | A unique identifier is used to manage state and interaction |
class
|
any
| — | — | No | Custom CSS class for additional styling |
item_class
|
any
| — | — | No | Custom CSS class applied to every item |
icon_class
|
any
| — | — | No | Custom CSS class applied to every item icon |
label_class
|
any
| — | — | No | Custom CSS class applied to every item label |
active_class
|
any
| — | — | No | Extra class applied to active items |
inner_wrapper_class
|
string
| — | — | No | Custom CSS class for the inner wrapper |
variant
|
string
|
base
|
defaultshadowborderedgradientbase
| No | Determines the style |
color
|
string
|
natural
|
basenaturalwhiteprimarysecondarydarksuccesswarningdangerinfosilvermiscdawn
| No | Determines color theme |
border
|
string
|
extra_small
| — | No | Determines border style |
rounded
|
string
|
none
|
extra_smallsmallmediumlargeextra_largefullnone
| No | Determines the border radius |
padding
|
string
|
small
|
extra_smallsmallmediumlargeextra_largenone
| No | Determines padding for the dock container |
space
|
string
|
extra_small
|
extra_smallsmallmediumlargeextra_large
| No | Space between items |
size
|
string
|
medium
|
extra_smallsmallmediumlargeextra_large
| No | Determines size (icon + label scale) |
max_width
|
string
|
full
|
extra_smallsmallmediumlargeextra_largefull
| No | Determines the inner wrapper max width |
position
|
string
|
static
| — | No | Position: static, sticky_bottom, sticky_top, fixed_bottom, fixed_top, fixed_bottom_center, fixed_top_center |
show_labels
|
boolean
|
true
| — | No | Whether labels render under the icons |
font_weight
|
string
|
font-medium
| — | No | Determines custom class for the font weight |
rest
|
global
| — | — | No | Global attributes can define defaults which are merged with attributes provided by the caller |
Slots
| Name | Required | Description |
|---|---|---|
item
| Yes | Specifies an item entry of the dock |
inner_block
| No | Optional content rendered after the items |
Attributes of the item slot
| Name | Type | Default | Values | Required | Description |
|---|---|---|---|---|---|
icon
|
string
| — | — | No | Icon displayed in the item |
label
|
string
| — | — | No | Label rendered under the icon, kept as screen reader text when labels are hidden |
badge
|
string
| — | — | No | Optional badge text or count rendered above the icon |
active
|
boolean
| — | — | No | Marks the item as active |
navigate
|
string
| — | — | No | Defines the path for navigation within the application using a `navigate` attribute. |
patch
|
string
| — | — | No | Specifies the path for navigation using a LiveView patch. |
href
|
string
| — | — | No | Sets the URL for an external link. |
class
|
any
| — | — | No | Custom CSS class for additional styling |
icon_class
|
any
| — | — | No | Custom CSS class for the icon |
label_class
|
any
| — | — | No | Custom CSS class for the label |
badge_class
|
any
| — | — | No | Custom CSS class for the badge |
color
|
string
| — | — | No | Per-item color override |
Options
Each option takes one or more of its values, separated by commas.
| Option | Values |
|---|---|
--variant
|
defaultshadowborderedgradientbase
|
--color
|
basenaturalwhiteprimarysecondarydarksuccesswarningdangerinfosilvermiscdawn
|
--size
|
extra_smallsmallmediumlargeextra_large
|
--padding
|
extra_smallsmallmediumlargeextra_largenone
|
--rounded
|
extra_smallsmallmediumlargeextra_largefullnone
|
--space
|
extra_smallsmallmediumlargeextra_large
|
--module
| A module name of your own |
What it generates
mix mishka.ui.gen.component dock