Handbook scrollspy directory, Pattern Paste Canonical: https://patternpaste.com/pattern/handbook-scrollspy-directory.html Interactive (https://patternpaste.com/interactive/) Scrollspy Rail (https://patternpaste.com/interactive/scrollspy-rail/) Catalogue access Needs plugin (https://patternpaste.com/docs/install-pattern-paste/) # Handbook scrollspy directory A reference directory: twelve entries in a narrow reading column beside a wide, unnumbered index of their titles that stays in view and marks the entry being read. Needs the companion plugin, which comes with your access; without it, or without motion, the masthead is followed by the twelve entries as a plain stack. States no colour and no font of its own. Start here ## What you change first - Replace the twelve entries; each title becomes its index label, so keep it short and specific. - Add, remove or reorder the groups named Section in List View; the index follows. Past about sixteen, split the page. - Set a Group's HTML anchor on any entry another page links to, so the link survives a renamed title. - Turn numbering on in the block inspector if your entries do have an order, such as steps of a policy. - Keep entry titles at h3 below the h2 masthead, or move both levels for the page around it. The signature moment ## A wide index of twelve entries stays beside a narrow reading column The rail is the bigger half of the idea. Its twelve titles are the table of contents a visitor scans first, wide enough that no label wraps at desktop, while each entry is three or four paragraphs in a measure kept to about 38rem. The reading line sits high (24%), so an entry is marked as soon as its title arrives, not halfway through it: a visitor jumping in from the index wants the entry marked on arrival, not a screen later. Theme handoff ## What comes from where ### From your theme Every font and every colour. It states no ground, so it sits on your page's own; headings and body chain to contrast, the eyebrow to role-label then contrast. Body copy needs 4.5:1, the large h2 3:1. Headings are on the theme's ladder (x-large for the h2, large for each entry title), because their job is hierarchy. ### Set by this pattern A padded full-width Group with a 1100px ceiling; a 320px rail and a 96px gap; entry copy capped at 38rem so a line stays readable even though the column could run wider; the masthead outside the block at 44rem; numbering off; a 24% reading line. Full pattern notes ## Why it works, and how it is built Open a topic for the complete design reasoning, editing guidance and implementation notes. Design rationaleComposition, intent and nearest alternatives ### The signature moment: A wide index of twelve entries stays beside a narrow reading column The rail is the bigger half of the idea. Its twelve titles are the table of contents a visitor scans first, wide enough that no label wraps at desktop, while each entry is three or four paragraphs in a measure kept to about 38rem. The reading line sits high (24%), so an entry is marked as soon as its title arrives, not halfway through it: a visitor jumping in from the index wants the entry marked on arrival, not a screen later. ### Why this is not services-scrollspy-index or case-scrollspy-anatomy Services is five long chapters of equal weight behind a narrow numbered rail: the rail is a quiet aid to a sales argument read in order. This is the inverse density. Twelve look-up entries nobody reads in order, a rail more than half again as wide carrying the labels as the primary navigation, no numbers because a handbook entry has no rank, and an early reading line because a visitor arrives at one entry from the index. Case is a photo essay, image-led and paced by pictures. This carries no image at all; it is a look-up reference where the visitor arrives with one question, finds it in the index and leaves. Make it yoursVariations and the edits to make first ### What you change first - Replace the twelve entries; each title becomes its index label, so keep it short and specific. - Add, remove or reorder the groups named Section in List View; the index follows. Past about sixteen, split the page. - Set a Group's HTML anchor on any entry another page links to, so the link survives a renamed title. - Turn numbering on in the block inspector if your entries do have an order, such as steps of a policy. - Keep entry titles at h3 below the h2 masthead, or move both levels for the page around it. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme Every font and every colour. It states no ground, so it sits on your page's own; headings and body chain to contrast, the eyebrow to role-label then contrast. Body copy needs 4.5:1, the large h2 3:1. Headings are on the theme's ladder (x-large for the h2, large for each entry title), because their job is hierarchy. ### What it decides for itself A padded full-width Group with a 1100px ceiling; a 320px rail and a 96px gap; entry copy capped at 38rem so a line stays readable even though the column could run wider; the masthead outside the block at 44rem; numbering off; a 24% reading line. Technical notesBlock mechanics, responsive behaviour and constraints ### What needs the plugin The companion plugin builds the index from the entry titles, marks the entry at the reading line and fills the progress rule. Without it, the masthead and twelve entries remain a plain stack of headings and paragraphs. Reduced motion keeps the index and its anchors, still, with no current-entry reaction. On a phone (below 782px) the rail becomes a two-column index above the entries, six rows of 44px tap targets; keep titles to three or four words so none needs a third line. 31KB of core-block markup, 6 blocks (group, heading, list, list-item, paragraph, patternpaste/scrollspy-rail), and nothing else: paste it into the block editor and it becomes editable blocks wearing your theme. Start free trial to copy (https://patternpaste.com/account/#plan) What you copy is yours forever. Cancel whenever. Back to the library (https://patternpaste.com/patterns/) Catalogue access ### £70 a year Save £50 Or £10 a month All patterns, variations and theme downloads. What you copy is yours forever. Cancel whenever. Start with three days of full access on sign-up, no card. Start free trial (https://patternpaste.com/account/#plan) Sign in (https://patternpaste.com/account/) Everything you copy is yours to keep, forever, on any site; access to the rest of the library runs while you subscribe. Cancel any time; access runs to the end of the period you have paid for, and there is no pro-rata refund. Prices are in pounds and are the full price in the UK, the US and eleven other countries; elsewhere the checkout adds your local VAT or sales tax. The terms name every country. #### Use it for - Member and tenant handbooks - Policy and house-rules indexes - Glossaries and plain-English references #### Before you paste Install the Pattern Paste plugin first, then paste. This section embeds one of its blocks: the plugin comes with your access, downloads from your account, and takes a minute. Paste without it and the section arrives as a plain stack of your headings, text and images, with none of the motion. How to install it (https://patternpaste.com/docs/install-pattern-paste/). Requires a block theme on WordPress 6.7 to 7.0. Classic themes and page builders are outside our supported setup. Adaptive patterns use the block theme’s colour, spacing and typography presets; styled variations declare their own colours or type. How we test patterns (https://patternpaste.com/how-we-test/) #### What's inside Blocks group, heading, list, list-item, paragraph, patternpaste/scrollspy-rail Core only NO Chains 28, deepest 3 rungs currentColor no spacing 60, 80 color black, contrast, role-label font-size large, medium, x-large Continue exploring ## Next in Interactive Explore all 36 interactive patterns (https://patternpaste.com/interactive/)Also in Single articles (https://patternpaste.com/patterns/single-articles/) Shot in Twenty Twenty-Five Editorial Editorial Needs plugin ### Case scrollspy anatomy A case study told as a photo essay: a compact masthead, then four sections that each open on a large captioned photograph and several paragraphs of story, ending in a results ledger. 7 blocks Open preview (https://patternpaste.com/pattern/case-scrollspy-anatomy.html) Shot in Twenty Twenty-Five Features Features Needs plugin ### Services scrollspy index A text-led services section with a narrow numbered index beside five generous service chapters. 8 blocks Open preview (https://patternpaste.com/pattern/services-scrollspy-index.html) Shot in Twenty Twenty-Five Gallery Gallery Editorial Needs plugin ### Case stack panels Five case-study panels on a dark band: a short masthead, then five prints dealt over one another as you scroll, each one a photograph in a wide cinematic crop with its client, its year and one line of outcome on the plate beneath it. 7 blocks Open preview (https://patternpaste.com/pattern/case-stack-panels.html)