OnThisPage
"On this page": links to the page's sections, for an AppAside.
Usage
<AppAside>
<OnThisPage />
</AppAside>Details
Each Heading in AppMain adds itself to the shell's outline while the page renders, so the list is in the first response and works with JavaScript off; the headings get ids from their text. With script, <ib-on-this-page> marks the section in view (aria-current="location") and adds headings the server didn't see: ones in raw HTML (Prose, rendered Markdown) that have ids. With no headings it renders hidden, so the script can still fill it in.
Mode support
| Feature | Off | Static | Live |
|---|---|---|---|
| Everything | Partly | Yes | Yes |
Off: JavaScript disabled. Static: a static SSR page with IzzyBlazor's script. Live: an interactive page (Server, WebAssembly or Auto). With JavaScript off, the section in view isn't highlighted, and headings in raw HTML aren't listed.
Accessibility
- It renders a
navnamed by its heading, anh2reading "On this page" (Title). - Links to
Headingcomponents are in the server's response, so they work with JavaScript off; headings inside raw HTML, such asProse, are added by the script. - With script, the link to the section in view has
aria-current="location". - With no headings to list it's hidden, so there's no empty landmark.
Parameters
Plus 16 item props and 4 common props.
Full API