Sidebar

Pro

App and docs sidebars: a folding rail, a workspace switcher, a mail shell, and a docs tree.

4 variants

DocsA docs layout with a live filtering nav tree, version switcher, and a gliding on this page outline.

Live block · sample data

When to use

Product or API documentation with a nav tree and page outline.
Docs that need a version switcher and a filterable tree.
Pages where the on this page outline should follow scroll.

When not to use

Use tree-view for a plain hierarchy outside a docs layout.
Use sidebar-rail for app navigation.
Use command-palette for global search across docs.

Installation

Pro source and install commands unlock with a Pro plan.

Usage

Use this for product or API documentation. Load the tree and pages from your content source, route page changes through your router, and point the version switcher at your versioned builds.

example.tsx

1import { DocsSidebar } from "@/components/arc/blocks/docs-sidebar/docs-sidebar";2 3export default function DocsPage() {4  return (5    <DocsSidebar6      defaultCollapsed={false}7      onCollapsedChange={(collapsed) => localStorage.setItem("docs-rail", String(collapsed))}8    />9  );10}

Built fromSearch field Dropdown menu Code block Copy button Badge Avatar Button

API reference

`DocsSidebar`

A docs layout with a filterable nav tree, version switcher, page content with code blocks, and an on this page outline that tracks scroll. The tree, pages, and versions are sample content.

PropTypeDefaultDescription

defaultCollapsedbooleanfalseStart with the navigation collapsed to its icon rail.

onCollapsedChange(collapsed: boolean) => void–Called when the navigation collapses or expands, from the toggle or the [ shortcut.

Keyboard interactions

[: Toggles the icon rail when focus is not in a text field, menu, or dialog.
Arrow UporDown, HomeorEnd: Move through the nav tree.
Arrow LeftorRight: Collapse or expand a nav group.
Enter: In the filter field, opens the first matching page.
Escape: Clears the filter.

Accessibility

The rail toggle exposes aria-expanded and aria-keyshortcuts="[".
Filter results are announced as a count in a polite status region.
The nav tree supports arrow key movement from the search field into the list.

Motion

The outline indicator glides to the heading in view, and the sidebar folds to a rail on a spring.
Nav groups expand by height as the filter opens matching branches.
Reduced motion makes the glide and folds instant.

Responsive behavior

At 1000px container width and above the outline gets its own 200px column; below 740px it becomes a collapsible bar above the article.
Below 620px the rail is dropped and the nav tree folds behind a menu button above the content.

Performance

Scroll spy is batched to one requestAnimationFrame per scroll, and ResizeObservers remeasure on width changes.
The nav tree is not virtualized; very large trees rely on the filter.

Notes for AI

Give your coding assistant the Markdown reference instead of screenshots.

Use for product or API documentation.
Load the tree and pages from your content source, route page changes through your router, and point the version switcher at your versioned builds.
Composes Arc search-field, dropdown-menu, code-block, copy-button, badge, avatar, and button.

/components/blocks/sidebar/markdown

The full library index for assistants is at /llms.txt.

Sidebar

Pro

App and docs sidebars: a folding rail, a workspace switcher, a mail shell, and a docs tree.

4 variants

DocsA docs layout with a live filtering nav tree, version switcher, and a gliding on this page outline.

Live block · sample data

Halden docs

Search docs

Verify signatures

Every webhook request is signed, so you can confirm it came from Halden and wasn't changed on the way.

Ava MitchellUpdated Sep 18, 2026

How signing works

Each request carries a Halden-Signature header with a timestamp and an HMAC-SHA256 signature. The signature covers the timestamp and the raw request body, computed with your endpoint's signing secret.

Request headerhttp

Halden-Signature: t=1758451200,v1=5257a869e7ecebeda32affa62cdca3fa51cad7e77a0e56ff536d0ce8e108d8bd

Find your signing secret

Each endpoint has its own secret that starts with whsec_. You'll find it under Developers → Webhooks, in the endpoint's details.

Rolling a secret keeps the previous one valid for 24 hours, so events sent during a deploy still verify.

Verify with the SDK

Pass the raw body, not parsed JSON. Parsing and serializing again changes the whitespace, and the signature no longer matches.

app/webhooks/route.tsts

import { verifyWebhook } from "@halden/node";

const secret = process.env.HALDEN_WEBHOOK_SECRET!;

export async function POST(request: Request) {
  const body = await request.text();
  const event = verifyWebhook(body, request.headers, secret);

  if (event.type === "order.paid") await fulfil(event.data.order);
  return new Response(null, { status: 204 });
}

Verify without the SDK

If there's no SDK for your language, verification takes four steps.

Split the header on commas and read t and v1.
Join t, a period, and the raw body into one string.
Compute an HMAC-SHA256 of that string with your signing secret.
Compare the result with v1.

Compare signatures in constant time

Use timingSafeEqual or your language's equivalent. A plain string comparison stops at the first byte that differs, which can reveal how much of a forged signature was right.

verify.tsts

import { createHmac, timingSafeEqual } from "node:crypto";

const expected = createHmac("sha256", secret).update(`${t}.${body}`).digest();
const valid = timingSafeEqual(expected, Buffer.from(v1, "hex"));

Reject old events

Refuse requests whose timestamp is more than 5 minutes old, so a captured request can't be replayed later. The SDKs use a 300 second tolerance; pass tolerance to change it.