`, the one child of the rail, around the list and the actions: from 80rem it is the sticky box, inside the rail, so it never covers the footer, and it scrolls by itself, with room at its start for a focus ring
- `.luz-page-rail__onpage`: On the `
` of the list, a direct child of `__inner`: it scopes the reset of the fold and its title, and is the hook for a script
- `.luz-page-rail__fold`: On a native ``. Write `open`, so the list shows without a script. Where the rail is above the content, a script may close it when the page loads
- `.luz-page-rail__title`: On the ``: "On this page", semibold. It names the ``
- `.luz-page-rail__list`: On the ``: no bullets, a rule at its start
- `.luz-page-rail__link` with `.luz-sidebar__link`: On each ``: text on the page, 28px tall. The link marked `aria-current="true"` gets a start border in the brand colour
- `.luz-page-rail__sub`: On a nested ``: the `h3` of an `h2`, indented
- `.luz-page-rail__actions`: A column of links under a rule: copy, edit, report
### How it works
CSS from `components/page-rail.css` of `@luz-ds/catalog`, on the catalog's sidebar link and its scroll spy.
- Below 80rem the rail is drawn above the content, under the header. From 80rem it is a column as tall as the content, and its inner box is sticky, at `--luz-page-rail-top` from the top of the window: it stops at the end of the rail, so it never covers the footer under it. The inner box is as tall as the window at most, and scrolls by itself when the list is longer.
- A link carries the catalog's `.luz-sidebar__link`, so the catalog's script marks the section in view with `aria-current="true"`. The rail redraws the link as text on the page: the mark is the weight and a start border, never the colour alone.
- The list names each `h2` of the page and, nested under it, each `h3`. Nothing is nested deeper.
- "Copy page as Markdown" is a link to the page's Markdown file; copying it with a script is yours. The rail is left out of print.
### Without JavaScript
The list and the actions are links and a native ``, so they work. No link is marked as current: the mark comes from the catalog's script.
### Keyboard and ARIA
- **Order:** the rail is between the sidebar and the content in the source, so Tab reaches it before the text: the list, then the actions. The skip link goes to the content, past the rail.
- **Keys:** Enter or Space on "On this page" folds the list. Tab reaches each link; Enter goes to its section.
- **Names:** the `` is a landmark named "About this page"; the `` is named by its summary, "On this page".
### When to use
Use the rail on pages with several sections, so a reader sees the shape of the page and jumps to a part of it.
- A page with three or more sections, long enough to scroll.
- Actions that belong to the page and not to the site: edit, report, copy.
### When not to use
Do not use the rail on a short page: a list of two links is more to read than the page.
- It lists the sections of one page. The pages of the site go in the sidebar.
- Nest no deeper than an `h3`. For the contents beside an article, use [the CMS table of contents](https://nandovejer.github.io/luz/docs/catalog/toc/).