Dock

New version v0.0.9 🚀

A flexible bottom navigation bar (also called Bottom Bar). Combine variants, colors, sizes and positions to ship anything from an inline action bar to an Android-style floating pill.

Installation:

mix mishka.ui.gen.component dock

Source: View Source

Package: Mishka Chelekom

Tags:

Component Stateless

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 — 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.

For fixed and sticky examples below, click the toggle button to activate / deactivate the example so it doesn't permanently overlap the docs page.

Base Color & Variant

The default base variant is a clean, neutral dock that works in both light and dark themes.

<.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.

<.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.

<.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.

<.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.

<.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.

<.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

<.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

<.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.

<.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 — only applies when the variant has a visible border (base, bordered).

<.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.

<.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.

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=false for an icons-only dock. Pairs nicely with rounded="full".

<.dock id="dock-no-labels" show_labels={false} rounded="full" size="large">
  <:item icon="hero-home" navigate="/" active />
  <:item icon="hero-magnifying-glass" navigate="/search" />
  <:item icon="hero-user" 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.

<.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.

<.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.

<.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.

<.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).

<.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.

<.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" navigate="/" active />
  <:item icon="hero-newspaper" navigate="/blog" />
  <:item icon="hero-squares-2x2" navigate="/chelekom" />
  <:item icon="hero-bell" navigate="/" badge="3" />
  <:item icon="hero-user" navigate="/" />
</.dock>

Dock Component Props

Name	Type	Required	Description
id	string	Yes	A unique identifier used to manage state and interaction.
variant	string	No	Determines the style. Values: base, default, shadow, bordered, gradient. Default is base.
color	string	No	Color theme. Values: base, natural, white, primary, secondary, dark, success, warning, danger, info, silver, misc, dawn. Default is natural.
size	string	No	Icon and label scale. Values: extra_small, small, medium, large, extra_large. Default is medium.
rounded	string	No	Border radius. Values: none, extra_small, small, medium, large, extra_large, full. Default is none.
padding	string	No	Padding for the dock container. Values: none, extra_small, small, medium, large, extra_large. Default is small.
space	string	No	Space between items. Values: extra_small, small, medium, large, extra_large. Default is extra_small.
border	string	No	Border thickness. Values: none, extra_small, small, medium, large, extra_large. Default is extra_small.
max_width	string	No	Constrains the inner items wrapper width. Values: extra_small, small, medium, large, extra_large, full. Default is full.
position	string	No	Viewport attachment. Values: static, sticky_bottom, sticky_top, fixed_bottom, fixed_top, fixed_bottom_center, fixed_top_center. Default is static.
show_labels	boolean	No	Whether labels render under icons. Default is true.
font_weight	string	No	Tailwind font-weight class. Default is font-medium.
class	any	No	Custom CSS class for the outer nav. Default is nil.
item_class	any	No	Class applied to every item. Default is nil.
icon_class	any	No	Class applied to every item icon. Default is nil.
label_class	any	No	Class applied to every item label. Default is nil.
active_class	any	No	Extra class merged onto active items. Default is nil.
inner_wrapper_class	string	No	Class for the items ul wrapper. Default is nil.
item	slot	Yes	Defines each entry. Item attributes: icon, label, badge, active, navigate / patch / href, color, class, icon_class, label_class, badge_class.

Dock CLI Arguments

Name	Type	Options	Recommended?
`--variant`	string	default - shadow - bordered - gradient - base	Yes
`--color`	string	base - natural - white - primary - secondary - dark - success - warning - danger - info - silver - misc - dawn	Yes
`--size`	string	extra_small - small - medium - large - extra_large	Yes
`--padding`	string	extra_small - small - medium - large - extra_large - none	Yes
`--rounded`	string	extra_small - small - medium - large - extra_large - full - none	Yes
`--space`	string	extra_small - small - medium - large - extra_large	Yes
`--max_width`	string	extra_small - small - medium - large - extra_large - full	Yes
`--only`	string	dock	Yes
`--module`	string	Something	NO