Table of Contents

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>

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

Save Hours on Every Project

With Radzen Blazor subscription you get the full toolkit, including:

support

Dedicated support backed by proven expertise

palette

Premium themes and theme editor

widgets

Ready-to-use UI blocks

dashboard_customize

Complete app templates

format_shapes

Visual design-time-experience

Start Free See Subscription Plans

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