Hook Sidebar
A section list whose rail bends into the entry you are reading.
Overview
The hook sidebar is a vertical list of sections with a thin rail running down its left edge. Where the rail meets the active entry it hooks in toward the label, so the current place in the page is drawn as part of the line itself.
When to use it
It suits documentation, long settings pages and anything with a handful of named sections. Several sidebars can stack, one per group, with only the group that holds the selection showing its accent.
Why it exists
A highlighted row competes with the content for attention. A rail that bends toward the active entry marks it clearly while leaving the text itself untouched.
Motion
Selecting another entry springs the accent rail down or up to meet it, and the hook reforms beside the new label.
Hover preview
Hovering or tabbing to a different row draws a second, dimmer rail from the active entry toward it. It shows where a click would take you before you commit to it.
Following the page
Drive the value from the scroll position, as this demo does, and the rail tracks the section being read. With hrefs on the items it follows the current route instead.
Anatomy
An optional label heads the list. Below it, each entry is a button or a link, and the neutral rail, the hover rail and the accent rail with its hook are drawn along their left edge.
Dashed or solid
The rail is dashed by default, which keeps it light next to body text. Set dashed to false for a continuous line when the sidebar sits on its own.
Accent color
Pass any CSS color to color. It tints the accent rail, while the hover rail stays neutral so the two never get confused.
Accessibility
Entries are real buttons or links, so the list works with Tab, Enter and Space. The group label names the navigation for screen readers, and the rail is decorative and hidden from them.
Contrast
Inactive entries use a softer text color and the active one the full text color, so the accent only has to stand out as a line and never carries the text itself.
Credits
The hook sidebar comes from Rare UI by Swami Malode and is part of UI Lab, where it sits next to the bounce sidebar and the proximity sidebar.
Further reading
The bounce sidebar marks the active entry with a hopping dot, and the proximity sidebar turns the whole page into a minimap of dashes. Pick whichever matches how much space you have.