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".
Supercharge your Blazor development with Radzen
Whether you prefer a standalone environment or integration directly within Visual Studio, Radzen provides a powerful toolkit to increase development speed, reduce repetitive coding, and focus on building exceptional applications.
Radzen Blazor Studio
Radzen Blazor Studio is a software development environment that empowers developers to design, build and deploy Blazor applications without the traditional hurdles.
Radzen Blazor for Visual Studio
Radzen Blazor for Visual Studio extension streamlines Blazor development within the Visual Studio environment. The Blazor extension you need to boost productivity!
Radzen Blazor Components, © 2018-2025 Radzen.
Source Code licensed under
MIT