Radzen Blazor Toc displays a table of contents for the current page.
These demos showcase a table of contents component with element linking using Selector property on RadzenTocItem, sticky positioning with CSS, and horizontal/vertical orientation options with responsive visibility control.
<h3 id="toc">Table of Contents</h3>
<RadzenText Anchor="current-page#heading">Heading</RadzenText>
<RadzenToc Selector="#toc">
<RadzenTocItem Selector="#toc" Text="Table of Contents" />
<RadzenTocItem Selector="#heading" Text="Heading" />
</RadzenToc>
To make the component stick to the top of a scrolling container, add Style="position: sticky; top: 0;".
RadzenToc supports a horizontal layout with built-in styling. Just set Orientation="Orientation.Horizontal" to enable it. In this demo the horizontal TOC is hidden on devices with screen width less than 1024px using utility CSS classes class="rz-display-none rz-display-md-flex".