TwOnThisPage

Give TwOnThisPage a list of OnThisPageItems, each pairing the Id of an element on the page with the text of its link. The link to the section being read is highlighted as the page scrolls. The example lists this page's own sections, so scroll the page to see it follow along. It is the same component as the "On this page" list beside every page of these docs.

<TwOnThisPage Items="@_sections" BasePath="/on-this-page" Class="max-w-xs" />

@code {
    private readonly List<OnThisPageItem> _sections =
    [
        new("basic-usage", "Basic usage"),
        new("link-paths", "Link paths"),
        new("title-and-heading-level", "Title and heading level"),
        new("hidden-title", "Hidden title"),
        new("fixed-headers", "Fixed headers")
    ];
}

Every Blazor app has a <base href>, which makes a bare #section link point at the site root instead of the current page. Set BasePath to the current page's path so each link becomes /your-page#section.

<TwOnThisPage Items="@_sections" BasePath="/on-this-page" Class="max-w-xs" />

The heading defaults to "On this page", translated into the app's language. Set Title to change it, and HeadingLevel so it fits the page's heading outline. The navigation landmark is named after the heading, so screen reader users can find it in their list of landmarks.

<TwOnThisPage Items="@_sections" BasePath="/on-this-page" Title="Contents" HeadingLevel="3" Class="max-w-xs" />

Set HideTitle to leave the visible heading out, for example when the list sits under a heading of your own. The landmark keeps its name through aria-label, so it is still announced.

<TwOnThisPage Items="@_sections" BasePath="/on-this-page" HideTitle Class="max-w-xs" />

A section counts as the one being read once its top passes a line 140 pixels below the top of the viewport. Raise Offset when a fixed header covers more of the page than that, or lower it for a page with nothing fixed at the top.

<TwOnThisPage Items="@_sections" BasePath="/on-this-page" Offset="240" Class="max-w-xs" />

The list is a navigation landmark holding ordinary links. The link to the section being read is announced as the current location.

Styling is controlled by TwBlazorTheme.Components (a TwOnThisPageTheme), configured via the AddTwBlazor() options callback described on the Get Started page. Every property is a set of Tailwind classes, so changes are picked up by your own Tailwind build.