Skip to main content
xoji

Dock
Info:Shell html svelte astro Success: coverage 38/38

The side rail: a vertical panel pinned to the left or right edge of the shell.

Live demo

live · @xoji/astro

Dock

Navigation rail — header, body, pinned footer

main content

Sides + widths — left/right · sm · lg

editor-style three-pane

Toned rails — every tone

Accents

Statuses

Named hues

Edge — side & thickness

The edge defaults to the inner divider side; reverseEdge pushes it to the outer side (to outer-edge a rail or keep a left/right pair consistently sided), and edgeWidth sets it thin, thick, or a bold accent spine.

Dock is the application's side rail: a flex column pinned to an edge, sized to one of three widths, holding navigation, an inspector, a tool palette, or any other persistent panel. It renders a complementary <aside> by default and a <nav> when nav is set, so a navigation rail carries the right landmark role.

A label names the landmark (applied as aria-label and shown as an optional uppercase header), so multiple docks on a page stay distinguishable to assistive technology. Header, body, and footer parts give the rail a stable internal rhythm; the footer pins to the bottom.

When to use

How this component composes with the rest of the set.

Drop a Button stack or a list of anchors into the body for a navigation rail; set nav so the landmark is correct.
Use the footer slot for a pinned account menu, theme switch, or status line.
Pair two docks (left + right) around a main content column for an editor-style three-pane shell.

Props

9 props, straight from the manifest.

PropTypeDefaultBindingsDescription
side DockSide
left right
left
html svelte astro
Which edge the rail sits against; flips the divider border to the inner edge.
size Size
sm md lg
md
html svelte astro
Rail width: sm (14rem), md (18rem), or lg (22rem).
tone FullTone
accent neutral danger success warn info accent-2 accent-3 accent-4 red orange yellow green blue purple brown pink cyan gray white black
—
html svelte astro
Colors the rail's divider edge in the chosen tone (any semantic role, accent variant, or named hue) for an accent rail. Omit it for the plain hairline.
reverseEdge boolean false
html svelte astro
Move the edge (the toned accent or the hairline) to the rail's outer side instead of the inner divider side — to outer-edge a rail or keep a left/right pair consistently sided.
edgeWidth "thin" | "thick" | "bold"
thin thick bold
—
html svelte astro
Edge thickness: thin (hairline), thick, or bold (a chunky accent spine). Omit to use the default — a hairline when untoned, thick when toned.
nav boolean false
html svelte astro
Renders a `<nav>` landmark instead of the default complementary `<aside>`.
label string —
html svelte astro
Names the landmark (applied as `aria-label`) and renders an optional uppercase header.
ariaLabel string —
svelte
An explicit accessible name; overrides `label` for the landmark without rendering a header.
hideHeader boolean false
html svelte astro
Drops the visible `label` header while keeping `label` as the dock's accessible name, for a bare nav or toc rail.

Appearance

Variants

left

 .xoji-dock

Pinned to the left edge with a divider on its right, the default.

right

 .xoji-dock--right

Pinned to the right edge with the divider on its left.

edge-out

 .xoji-dock--edge-out

Edge moved to the rail's outer side instead of the inner divider.

edge-bold

 .xoji-dock--edge-bold

A chunky accent spine instead of the default thin edge.

Sizes

sm
.xoji-dock--sm

Narrow rail, 14rem.

md

 default
.xoji-dock

Default rail, 18rem.

lg
.xoji-dock--lg

Wide rail, 22rem.

Anatomy

The named parts that make up the component, with their selectors.

dock

 .xoji-dock

The rail element (an <aside> or <nav>) carrying the side and size classes.
--font-sans --text-body --leading-normal --fg-1 --bg-1 --line --border-thin --space-2 --space-3 --space-4

header

 .xoji-dock__header

The optional uppercase title row, rendered from the label or the header slot.
--text-xs --weight-semibold --leading-tight --fg-2 --space-0 --space-1 --space-2

body

 .xoji-dock__body

The scrolling content column that holds the rail's items.
--space-1

footer

 .xoji-dock__footer

The bottom-pinned region, separated by a hairline rule.
--space-1 --space-3 --border-thin --line

Tokens & coverage

What the component consumes, checked live against what the algorithm produces.

Success:fully covered 38/38 consumed tokens produced default register: 276 tokens

Live coverage check against the xoji-default register (derive(xojiDefault, { anchors }) → coverComponent(manifest, register)). Every token this component consumes must be a key the algorithm produces.

--accent --accent-2 --accent-3 --accent-4 --bg-1 --black --blue --border-thick --border-thin --brown --cyan --danger --fg-1 --fg-2 --font-sans --gray --green --info --leading-normal --leading-tight --line --neutral --orange --pink --purple --red --space-0 --space-1 --space-2 --space-3 --space-4 --success --text-body --text-xs --warn --weight-semibold --white --yellow

Slots
default
html svelte astro

The rail's content: links, controls, or any panel markup.
header
html svelte astro

Custom header content, overriding the text rendered from label.
footer
html svelte astro

Bottom-pinned content, separated by a hairline rule.

Accessibility
Renders a native <nav> (when nav is set) or <aside> complementary landmark, so the rail is reachable via landmark navigation.
label applies an aria-label to the landmark; with multiple docks on a page this keeps each one distinguishable to assistive technology.
The binding warns at runtime when a dock has no label, aria-label, or aria-labelledby.
The header text is visual; the accessible name comes from the landmark's aria-label, not the rendered heading.

Code

Navigation rail and inspector

A left navigation <nav> and a right complementary inspector, each named for assistive tech.

 
<xoji-dock label="Navigation" nav side="left">
	<a href="/dashboard">Dashboard</a>
	<a href="/projects">Projects</a>
	<a href="/settings">Settings</a>
</xoji-dock>

<xoji-dock label="Inspector" side="right" size="sm">
	<p>Properties for the selected item appear here.</p>
	<small slot="footer">Last saved a moment ago.</small>
</xoji-dock>
 
<script lang="ts">
	import { Dock } from "@xoji/svelte";
</script>

<Dock label="Navigation" nav side="left">
	<a href="/dashboard">Dashboard</a>
	<a href="/projects">Projects</a>
	<a href="/settings">Settings</a>
</Dock>

<Dock label="Inspector" side="right" size="sm">
	<p>Properties for the selected item appear here.</p>
	{#snippet footer()}
		<small>Last saved a moment ago.</small>
	{/snippet}
</Dock>
 
---
import { Dock } from "@xoji/astro";
---

<Dock label="Navigation" nav side="left">
	<a href="/dashboard">Dashboard</a>
	<a href="/projects">Projects</a>
	<a href="/settings">Settings</a>
</Dock>

<Dock label="Inspector" side="right" size="sm">
	<p>Properties for the selected item appear here.</p>
	<small slot="footer">Last saved a moment ago.</small>
</Dock>