Dock Navigation
Pill-shaped primary navigation rail. Renders vertically as a side dock on desktop and horizontally as a bottom bar on mobile, with an optional dropdown CTA at the head, anchor avatar at the tail, and icons that switch to their fill variant when active.
Install
import { DockNavigation } from '$lib/components/ui/dock-navigation'; Vertical (default)
The side-rail layout used by the Bloom App prototype. The CTA button at the head opens a Dropdown.Menu with the quick-action list; each nav item is a Button with a Tooltip on the opposite side; the avatar at the tail anchors the user profile route. Active items get a filled icon, a muted background pill, and primary text.
<script lang="ts">
import { DockNavigation } from '$lib/components/ui/dock-navigation';
import * as Tooltip from '$lib/components/ui/tooltip';
const items = [
{ href: '/feed', icon: 'home-line', label: 'Feed' },
{ href: '/discover', icon: 'compass-line', label: 'Discover' },
{ href: '/wallet', icon: 'wallet-line', label: 'Wallet' },
{ href: '/settings', icon: 'settings-line', label: 'Settings' }
];
const ctaItems = [
{ icon: 'qr-code-line', label: 'Receive', onSelect: () => {} },
{ icon: 'send-plane-line', label: 'Send', onSelect: () => {} },
{ icon: 'arrow-left-right-line', label: 'Swap', onSelect: () => {}, separatorBefore: true }
];
</script>
<Tooltip.Provider>
<DockNavigation
cta={{ items: ctaItems }}
{items}
avatar={{ href: '/profile', fallback: 'K', label: 'Profile' }}
/>
</Tooltip.Provider>Horizontal
Pass orientation="horizontal" to flip the rail into a
thumb-reachable bottom bar — the same primitive switches its flex direction and re-points the
CTA dropdown and tooltips to top instead of right. The avatar moves to the
trailing edge with ml-auto.
<DockNavigation
orientation="horizontal"
cta={{ items: ctaItems }}
{items}
avatar={{ href: '/profile', fallback: 'K', label: 'Profile' }}
/>Minimal (no CTA, no avatar)
Both cta and avatar are optional. When omitted the rail collapses to a
pure list of icon buttons — useful for a secondary section nav or a small editor sidebar.
<DockNavigation {items} />API reference
Each item is a SvelteKit anchor; the active state is computed against the live $page.url.pathname. Wrap the dock in Tooltip.Provider once at the app root — repeat providers are not needed per dock instance.
| Prop | Type | Default | Description |
|---|---|---|---|
DockNavItem[] | — | Required. Each item is { href, icon, label }. The icon is a Remix icon name (e.g. "home-line"); on active routes it renders the fill variant. | |
{ items: DockNavCtaItem[] } | undefined | — | Optional dropdown menu at the head of the rail. Each entry is { icon, label, onSelect, separatorBefore? } — separatorBefore inserts a DropdownMenu.Separator above the row. | |
DockNavAvatarConfig | undefined | — | Optional anchor at the tail. { href, src?, fallback, label } — falls back to the Avatar fallback text when src is missing or fails. Renders an active ring against the dock surface. | |
'vertical' | 'horizontal' | 'vertical' | Layout direction. Vertical = side rail (default), horizontal = bottom bar — also swaps the CTA dropdown and tooltips to side="top". | |
string | — | Merged onto the root nav via tailwind-merge. Useful for width or margin overrides. |