# Table of Contents **Path:** Components/Layout [Back to Documentation Index](http://rubicblazor.skyconis.com/docs.md) --- Table of Contents RbToc (Table of Contents) is a navigation component for long-form content. It provides a sidebar with clickable links that scroll to corresponding sections, perfect for documentation pages, articles, and legal documents. Basic Usage Simple table of contents with navigation sidebar and content sections. Show code Documentation Example A typical documentation page with rich content. Click navigation items to scroll. Introduction Get started with RubicBlazor Welcome to RubicBlazor - a comprehensive UI component library for Blazor applications. Build beautiful, responsive web apps with ease. 50+ Components Themes Dark & Light Installation Setup in minutes Install the package using your preferred method: dotnet add package RubicBlazor Compatible with .NET 6, 7, and 8 Quick Start Your first component Add CSS to your index.html Import namespace in _Imports.razor Use components in your pages Support We're here to help GitHub Discord Docs ✕ Contents Reverse Layout Place the navigation sidebar on the left side instead of the default right. Show code Reverse Layout Navigation sidebar appears on the left side instead of right. Ideal for sidebar-first designs. Welcome Navigation on the left side The Reverse parameter flips the layout, placing navigation on the left. This is useful for sidebar-first designs or RTL language support. LTR Left-to-Right RTL Right-to-Left Features Same functionality, different layout All features work identically regardless of navigation position: Click navigation items to scroll Active section highlighting Nested sections supported Mobile responsive Usage Simple parameter Simply add the Reverse parameter: Works with all other RbToc parameters ✕ Contents Nested Sections Create hierarchical navigation with nested RbTocItem components. Show code Nested Sections RbTocItem can be nested to create hierarchical navigation structures. 1. Introduction API Reference Overview This document covers the complete API reference with nested subsections. Each section can contain multiple levels of depth. Click items in the navigation to jump to sections. 2. Components UI element categories Our component library includes various UI elements organized by category. Layout Components Grid, Container, Stack, Flex Form Components TextBox, Select, CheckBox, DatePicker Display Components Table, Card, List, Badge 3. Advanced Topics Customization options Deep dive into advanced features and customization options. Theming Customize colors, fonts, and spacing using CSS variables. Events Handle user interactions with event callbacks. ✕ Contents Styled Navigation Create styled individual navigation items . Show code Styled Navigation Items Apply custom classes to individual navigation items for visual differentiation. Getting Started Standard documentation section This is a regular navigation item with default styling. Section 2 Section 2 subtitle This is a regular navigation item with default styling. Section 3 Section 3 subtitle This is a regular navigation item with default styling. Breaking Changes This section contains breaking changes that require immediate attention! New in v2.0 Exciting new features added in the latest version! Deprecated API Deprecated This API is deprecated and will be removed in the next major version. ✕ Contents Use Cases Real-world examples: documentation pages, legal documents, tutorials, and more. Show code Product Documentation Professional documentation layout with rich content sections. Overview Learn what makes RubicBlazor special RubicBlazor is a modern UI component library designed for Blazor applications. Build stunning web interfaces with minimal effort. 50+ Components 100% Responsive Fast Performance Installation Get up and running in minutes Terminal $ dotnet add package RubicBlazor Ready to use! Compatible with .NET 6, 7, 8, and 9 Configuration Customize to fit your needs Theming Customize colors and styles Localization Multi-language support Support We're here to help GitHub Discord Twitter ✕ Contents Tutorial with Progress Step-by-step guide with visual progress indicators. Create Project Completed Create a new Blazor project using the .NET CLI or Visual Studio. dotnet new blazorwasm -n MyApp 2 Add Package In Progress You are here! Install the RubicBlazor package. dotnet add package RubicBlazor 3 Configure Locked Add CSS and JavaScript references to your project. Build! Locked Start building amazing applications with RubicBlazor components. ✕ Contents With Footer Navigation TOC with additional footer content for quick actions. Quick Start Get started with RubicBlazor in just a few steps. Our quick start guide will have you up and running in no time. 5 min read Beginner Components Explore our comprehensive library of 50+ UI components, each designed with accessibility and performance in mind. Buttons Forms Layout Data Examples Browse through practical examples and real-world use cases to learn how to use components effectively. Need help? Full Documentation Get Support ✕ Contents RTL Support Demonstrate table-of-contents navigation inside an RTL container. Show code المقدمة هذا المثال يوضح استخدام جدول المحتويات داخل حاوية RTL محلية. التركيب أضف ملفات الأنماط والسكريبتات المطلوبة ثم استورد مساحة الأسماء. الخطوات الأولى ابدأ بإنشاء صفحة تجريبية ثم أضف المكونات التي تريد اختبارها. الدعم استخدم المستندات والأمثلة لفهم سلوك التنقل داخل بيئات RTL. ✕ Contents ✕ Contents