site-map-wc

Information architecture visualization with two modes — an interactive tree with expand/collapse, or a visual org-chart with boxed nodes and connectors.

Overview

A web component that progressively enhances a nested <nav> with <ul>/<li> structure into an information architecture visualization. Without JavaScript, the nested list renders as a readable site structure. With JavaScript, two view modes are available:

Tree mode (default) — indented list with expand/collapse, page-type badges, and tree connector lines
Visual mode (data-view="visual") — org-chart-style boxed nodes with color-coded borders, connectors, and branch splitting

Both modes use the exact same HTML source.

Tree Mode

The default view renders an indented, collapsible tree. Nodes show page-type and template badges, status dots, and tree connector lines.

Visual Mode

Add data-view="visual" to render the same HTML as a flow-diagram-style org chart with color-coded boxed nodes, connectors, and branch splitting. Each page type gets a distinct border color and badge. The original <nav> is preserved (hidden) for screen reader access.

The two modes use identical HTML — switch between them by toggling the data-view attribute. This makes it easy to offer a "toggle view" button in your UI.

Attributes

Attribute	Type	Default	Description
`title`	string	—	Site map heading
`src`	string (URL)	—	JSON data URL
`data-view`	string	—	Set to `"visual"` for org-chart mode. Omit for tree mode.
`collapsed`	boolean	—	Start all nodes collapsed (tree mode only)
`compact`	boolean	—	Reduced spacing (both modes)

Node Attributes

Each <li> in the tree carries these data attributes, used by both view modes:

Attribute	Type	Description
`data-page-type`	string	`layout`, `section`, `dashboard`, `page`, `modal`, `redirect`
`data-template`	string	Template or view name (shown as badge)
`data-status`	string	`draft`, `ready`, `live`, `deprecated`

Page Types

Page types determine badge color in tree mode and border/background color in visual mode.

Type	Color	Use Case
`layout`	Purple	App shell, root layout wrapper
`section`	Blue	Navigation section grouping child pages
`dashboard`	Green	Data-heavy overview page
`page`	Gray	Standard content page
`modal`	Amber (dashed border)	Dialog or overlay view
`redirect`	Red	URL redirect (no template)

Data Mode

Events

Event	Detail	When
`site-map-wc:ready`	`{ nodeCount, depth }`	After setup (both modes)
`site-map-wc:select`	`{ href, pageType, template }`	Node clicked (both modes)

Accessibility

Tree mode is a full ARIA tree widget: role="tree" and role="treeitem", roving tabindex, arrow-key traversal, Home/End, Enter/Space.
Visual mode: SVG tree with keyboard navigation — ↓ enter child, ↑ go to parent, ←/→ move between siblings, Enter/Space toggle collapse. Original <nav> preserved (hidden) for screen readers.
Both modes display page count and depth in the header
Respects prefers-reduced-motion: reduce
Print styles expand all nodes and remove interactive controls

Tree widget vs disclosure navigation

<site-map-wc> is deliberately a full role="tree" widget because the use case — exploring and selecting nodes in an information-architecture graph — matches the ARIA tree pattern’s keyboard contract. For ordinary site navigation (docs sidebars, settings menus, nested link lists) the correct pattern is disclosure, not a tree.

Reach for nav.tree / the disclosure tree snippet when you want collapsible groups of links. Reach for <site-map-wc> only when you want the ARIA tree behavior and the IA-visualization layer on top. Don’t retrofit role="tree" onto nav.tree: partial ARIA is worse than none.

nav.tree — disclosure-navigation counterpart for docs sidebars and site menus
<flow-diagram> — User flows with decisions and branching (visual mode shares this style)
<glossary-wc> — Define terms used in page descriptions
<adr-wc> — Document architecture decisions that shape the IA
<user-journey> — Map how users navigate the site structure
UX Planning Pack

Welcome to Vanilla Breeze