Table of Contents

Radzen Blazor Toc displays a table of contents for the current page.

You can link to any element of the current page by setting the Selector property of RadzenTocItem.

<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>

Sticky TOC link

To make the component stick to the top of a scrolling container, add Style="position: sticky; top: 0;".

Orientation link

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".

All the tools in one place

Code Less. Deliver More.

With Radzen Subscription you get the full toolkit. Get started now and save hours on every project.

task_alt

Complete Blazor development environment.

task_alt

Open technology stack. No vendor lock-in.

task_alt

Ready-to-use UI blocks and app templates.

task_alt

Advanced theming.

task_alt

Dedicated support backed by proven expertise.

task_alt

No hidden runtime costs.

Start Free See All Benefits

Radzen Blazor Components, © 2018-2025 Radzen.
Source Code licensed under MIT