# TreeList **Path:** Components/Data Display [Back to Documentation Index](http://rubicblazor.skyconis.com/docs.md) --- TreeList RbTreeList is a hierarchical list component for organizing and presenting nested data in a compact, expandable format. It supports nested items, icons, multiple variants, and color themes. Basic Usage Simple tree list with expandable items. Show code Simple TreeList Basic tree list with expandable sections. Section 1 Item 1.1 Item 1.2 Item 1.3 Section 2 Item 2.1 Item 2.2 Section 3 Item 3.1 Item 3.2 Item 3.3 With Border and Rounded Tree list with border and rounded corners. Getting Started Installation Configuration Quick Start Components Buttons Forms Layout API Reference Methods Events Selection Keep a single selected item in local state and update it through item click events. Show code Interactive Color Selector Default Primary Secondary Success Warning Danger Info Messages Inbox Sent Drafts Archive 2025 2026 Selected item: Inbox Variants Different visual styles: Normal, Filled, and Outlined. Show code Normal Variant Default tree list style with subtle background. Dashboard Overview Analytics Reports Settings Profile Security Filled Variant Tree list with filled background color. Dashboard Overview Analytics Reports Settings Profile Security Outlined Variant Tree list with outlined style. Dashboard Overview Analytics Reports Settings Profile Security Color Options Tree list with different color themes. Success Item 1 Item 2 Warning Item 1 Item 2 Danger Item 1 Item 2 Nested Items Tree list items can contain child items to create hierarchical structures. Show code Multi-Level Nesting Tree list items can be nested to create hierarchical structures. Documents Work Projects Project A Project B Project C Reports Q1 Report Q2 Report Personal Photos Notes Downloads Software Media Deep Nesting Tree lists support deep nesting for complex hierarchies. Root Category A Subcategory A1 Item A1-1 Item A1-2 Subcategory A2 Item A2-1 Category B Subcategory B1 Item B1-1 Item B1-2 Item B1-3 Auto Expand Control expansion behavior with ExpandToSelected and StartExpandLevel. Show code With ExpandToSelected Automatically expands parent items to show selected child items. Settings Account Profile Security Privacy Preferences Theme Language Help FAQ Contact With StartExpandLevel Control which levels are expanded by default. With StartExpandLevel="2", levels 0 and 1 are auto-expanded. Level 0 - Auto Expanded Level 1 - Auto Expanded Level 2 - Collapsed Level 3 Item Level 2 Item Level 1 Item Another Level 0 Child Item 1 Child Item 2 Icons Add icons to tree list items using IconCls or custom IconContent. Show code Using IconCls Add icons to tree list items using FontAwesome classes. Home Dashboard Activity Users All Users Add User Roles Settings General Security Notifications Custom IconContent Use custom content for icons with IconContent parameter. Files Documents Images Videos Favorites Bookmarks Saved Items Mixed Icons with Filled Variant Combine icons with filled variant and colors. Inbox Primary Social Promotions Sent Recent All Trash Empty Trash States Tree list items can be disabled or readonly. Show code Disabled Items Tree list items can be disabled to prevent interaction. Available Section Active Item 1 Active Item 2 Disabled Child Disabled Section Item 1 Item 2 Another Available Item A Item B Mixed States with Colors Combine disabled state with different colors and variants. Enabled Item 1 Item 2 Disabled Item 1 Item 2 With Click Handler Handle click events on tree list items. Click Me Child 1 Child 2 Disabled Child Last clicked: None Custom Label Content Use LabelContent for rich labels with badges and additional elements. Messages 5 Unread 3 Starred 2 Notifications New System Updates RTL Support Present nested Arabic labels inside a local RTL container while keeping mixed Latin node text readable. Show code هيكل المستندات ملف العميل الهوية الوطنية العنوان الوطني العقود عقد الخدمة الأساسي ملحق الأسعار المرفقات المالية فاتورة يوليو إشعار السداد السجل الداخلي ملاحظات المراجع Reference Codes ✕ Contents