Components

Zigzag Rail

A rail that follows the nesting depth of a list of links and highlights the ones that are in view.

Scrollspy

Source code

Click to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

Installation

About

UiZigZagRail wraps a list of links and draws a thin line beside them. The line shifts sideways as the nesting depth changes, which gives the zigzag. This is the same rail used by the table of contents on this site.

It is built to pair with Scrollspy in mode="multiple": every link that has data-active="true" gets a highlighted section on the rail.

Each link that the rail should follow needs:

  • a data-depth attribute with its nesting level (a missing value is treated as 0)
  • data-active="true" while active. UiScrollspy sets this for you on elements with data-scrollspy-anchor

The rail is decorative (aria-hidden) and does not change how the links behave for keyboards or screen readers.

The demos below set :history="false" on UiScrollspy. By default Scrollspy writes the active id into the URL hash, so only leave it on for the one spy that drives the page, such as a table of contents.

Usage

Introduction

Installation

Requirements

Setup

Usage

Basic example

With options

API

Dashed

Set dashed to render the track as a dashed line. The highlighted sections stay solid.

Overview

Features

Details

Pricing

FAQ

Custom selector

By default the rail follows [data-scrollspy-anchor]. Use selector for any other set of links.

<UiZigZagRail selector='[data-toc-link="true"]'>
  <!-- links with data-toc-link, data-depth and data-active -->
</UiZigZagRail>

Props

PropTypeDefaultDescription
selectorstring"[data-scrollspy-anchor]"CSS selector for the links the rail follows.
dashedbooleanfalseRender the track as a dashed line.
widthnumber20Width of the rail in px.
curveSpannumber8Vertical distance in px over which the line bends between depths.
classstringCustom class for the wrapper.

The component also exposes a measure() method that you can call if you change the links in a way the rail cannot observe.

Tree

A tree view widget displays a hierarchical list of items that can be expanded or collapsed to show or hide their child items, such as in a file system navigator.

Overview

Copy-paste patterns for agentic and chat interfaces, built from UI Thing components.