Syncfusion.Blazor.Navigations 35.1.42

Prefix Reserved
.NET 8.0 This package targets .NET 8.0. The package is compatible with this framework or higher. 
dotnet add package Syncfusion.Blazor.Navigations --version 35.1.42
                    


                    

                
NuGet\Install-Package Syncfusion.Blazor.Navigations -Version 35.1.42
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package. 
<PackageReference Include="Syncfusion.Blazor.Navigations" Version="35.1.42" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
<PackageVersion Include="Syncfusion.Blazor.Navigations" Version="35.1.42" />
                    


                            Directory.Packages.props
                        

                    

                
<PackageReference Include="Syncfusion.Blazor.Navigations" />
                    


                            Project file
For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package. 
paket add Syncfusion.Blazor.Navigations --version 35.1.42
                    


                    

                
#r "nuget: Syncfusion.Blazor.Navigations, 35.1.42"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package. 
#:package Syncfusion.Blazor.Navigations@35.1.42
#:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package. 
#addin nuget:?package=Syncfusion.Blazor.Navigations&version=35.1.42
                    


                            Install as a Cake Addin
                        

                    

                
#tool nuget:?package=Syncfusion.Blazor.Navigations&version=35.1.42
                    


                            Install as a Cake Tool

Syncfusion® Blazor Navigation components

A comprehensive suite of Blazor navigation and menu components for building application menus, sidebars, tabs, breadcrumbs, and step-based interfaces. Includes TreeView, Dropdown Tree, Tab, Menu Bar, Sidebar, Accordion, Breadcrumb, Toolbar, Context Menu, Carousel, AppBar, and Stepper components.

Using this package with an AI coding agent

Before generating Syncfusion code, ask your AI coding agent to run the Syncfusion setup using the following prompt:

Set up this project for Syncfusion before generating code. Fetch and follow the official instructions at https://ai.syncfusion.com, then report the detected platform, installed skill pack, MCP status, and any required licensing action.

The setup detects your project's platform and loads the appropriate Syncfusion skill pack. No Syncfusion account or MCP key is required to install or read Syncfusion agent skills.

Platform reference: https://ai.syncfusion.com/blazor/llms.txt

Supported components

This package includes the following components:

Blazor TreeView component

The Blazor TreeView component represents hierarchical data in a tree-like structure with advanced navigation and data management capabilities.

Key features

  • Hierarchical data: Display data in a tree structure with parent-child relationships
  • Load on demand: Lazy load child nodes for better performance
  • Multiple selection: Allows user to select one or multiple nodes
  • Drag and Drop: Supports drag and drop functionality for reordering nodes
  • Node editing: Edit node text in-place
  • Checkboxes: Support for checkboxes allows users to select more than one item
  • Templates: Support to define a custom structure for tree nodes.
  • Keyboard navigation: Full keyboard navigation support for accessibility

Blazor TreeView

Documentation

Blazor Dropdown Tree component

The Blazor Dropdown Tree component allows selection from hierarchical data displayed in a tree structure with single or multiple selection modes.

Key features

  • Hierarchical selection: Select from tree-structured data
  • Single/Multiple selection: Allows user to select single or multiple nodes
  • Checkboxes: Checkbox support for easy selection
  • Templates: Support to define a custom structure for tree nodes.
  • Data binding: Support for arrays and remote data
  • Keyboard navigation: Full keyboard navigation support for accessibility
  • UI customization: Custom CSS and themes

Blazor Dropdown Tree

Documentation

Blazor Tab component

The Blazor Tab component organizes related content into compact, easy-to-navigate tabs with customizable headers and animations.

Key features

  • Tab organization: Organize content into multiple tabs
  • Animations: Built-in animation effects for tab switching
  • Header styles: Customizable tab header appearance
  • Close buttons: Optional close button for each tab
  • Scrolling: Scrollbar or pop-up for many tabs
  • Templates: Rich content templates
  • Keyboard navigation: Full keyboard navigation support for accessibility
  • Responsive design: Adapts to different screen sizes

Blazor Tab

Documentation

Blazor Menu Bar component

The Blazor Menu Bar component serves as a navigation header with support for hierarchical menus, icons, and data binding.

Key features

  • Navigation header: Serves as main navigation for applications
  • Data binding: Support for arrays and remote data sources
  • Templates: Custom item and icon templates
  • Icons: Built-in icon positioning and support
  • Multilevel menus: Support for nested menu items
  • Horizontal/Vertical: Both layout orientations
  • Keyboard navigation: Full keyboard navigation support for accessibility
  • RTL support: Right-to-left text direction

Blazor Menu Bar

Documentation

Blazor Pager component

The Blazor Pager component has an option to split the data set into sectioned pages for a great experience by viewing them page by page through an intuitive UI. Navigation is the key role of this component and it can be done with built-in numeric elements and buttons that can also be customized with rich APIs.

Key features

  • DataSet: Easily split the data set into pages, to view them through an intuitive UI
  • Customization: Flexible and highly customizable interface
  • Responsive design: Mobile-first responsive design that adapts to any resolution
  • Component integration: Effortlessly integrates with components like DataGrid, Card, ListView, etc. to view the sectioned pages
  • Themes: Comes with industry standard themes such as Material, Fabric, Bootstrap, and more

Documentation

Blazor Sidebar component

The Blazor Sidebar component is an expandable and collapsible container for primary or secondary navigation content alongside main content.

Key features

  • Expandable/Collapsible: Toggle sidebar visibility
  • Side positioning: Place on left or right side
  • Any content: Support for HTML content and Blazor components
  • Animation: Smooth open/close animations
  • Auto-close: Optional automatic closing on item selection
  • Responsive: Adapts to different screen sizes
  • Templates: Custom content rendering
  • Accessibility: Full keyboard navigation support

Blazor Sidebar

Documentation

Blazor Accordion component

The Blazor Accordion component displays collapsible panels with headers that expand or collapse vertically, allowing one or more panels to be open simultaneously.

Key features

Blazor Accordion

Documentation

Blazor Breadcrumb component

The Blazor Breadcrumb component displays the current location within a hierarchical structure, helping users understand their position and navigate back to parent pages.

Key features

  • Hierarchical navigation: Supports to display navigation path for relative or absolute URLs.
  • Current location: Highlight current page in breadcrumb
  • Navigation links: Navigate to parent pages
  • Icons: Icon support in breadcrumb items
  • Templates: Support to custom design for Breadcrumb items
  • Data binding: Support for dynamic data
  • Keyboard navigation: Full keyboard navigation support for accessibility
  • Responsive: Adapts to different screen sizes

Blazor Breadcrumb

Documentation

Blazor Toolbar component

The Blazor Toolbar component provides a command interface with various command buttons and responsive modes for different screen sizes.

Key features

  • Command interface: Display buttons for frequently used commands
  • Responsive modes: Scrollable and pop-up modes for small screens
  • Template: Custom item templates
  • Button alignment: Align items based on priority
  • Icons: Built-in icon support
  • Keyboard navigation: Full keyboard navigation support for accessibility
  • Data binding: Support for dynamic data

Blazor Toolbar

Documentation

Blazor Context Menu component

The Blazor Context Menu component appears on right-click or touch-hold, providing contextual actions based on the clicked element.

Key features

  • Right-Click menu: Show menu on right-click or touch-hold
  • Multilevel menus: Support for multiple nested menu items
  • Templates: Custom item rendering
  • Data binding: Support for dynamic data sources
  • Icons: Built-in icon support
  • Event handlers: Attach events to menu items
  • Keyboard navigation: Full keyboard navigation support for accessibility
  • Customization: Custom CSS and themes

Blazor Context Menu

Documentation

The Blazor Carousel component displays images, content, and links in a slide show format, ideal for galleries and featured content.

Key features

  • Image slideshow: Display images in rotating carousel
  • Slide content: Include text, links, and custom content
  • Navigation: Previous/Next buttons and indicators
  • Auto-play: Automatic slide rotation with configurable intervals
  • Animations: Smooth transition effects between slides
  • Responsive: Adapts to different screen sizes
  • Templates: Custom slide templates
  • Keyboard navigation: Full keyboard navigation support for accessibility

Blazor Carousel

Documentation

Blazor AppBar component

The Blazor AppBar component displays information and actions related to the current application screen, including branding, titles, navigation, and actions.

Key features

  • Application header: Display app branding and title
  • Navigation: Include navigation elements
  • Action buttons: Display contextual actions
  • Customizable: Flexible layout and positioning
  • Responsive: Adapts to different screen sizes
  • Theming: Built-in themes and customization

Blazor AppBar

Documentation

Blazor Stepper component

The Blazor Stepper component guides users through a series of steps or stages in a process, with customizable step types and orientations.

Key features

  • Step navigation: Guide users through multi-step processes
  • Step types: Linear or non-linear navigation
  • Orientations: Horizontal and vertical layouts
  • Label positions: Customize label placement
  • Step status: Display step completion status
  • Templates: Custom step content templates
  • Responsive: Adapts to different screen sizes
  • Accessibility: Full keyboard navigation support

Blazor Stepper

Documentation

System requirements

  • .NET 8.0 or later (Blazor Web App, Blazor Server App, Blazor WebAssembly App and Blazor Hybrid App)
  • See full requirements: system requirements.

Installation

Install the Navigations package and the themes package, which provides the stylesheets referenced below:

dotnet add package Syncfusion.Blazor.Navigations
dotnet add package Syncfusion.Blazor.Themes

Add stylesheet and script references

For Blazor Server App / Blazor Web App, add these to Components/App.razor or App.razor. For Blazor WebAssembly App, add these to wwwroot/index.html.

<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

Quick start

Register the Syncfusion® Blazor service in Program.cs:

using Syncfusion.Blazor;

builder.Services.AddSyncfusionBlazor();

Accordion

<SfAccordion>
    <AccordionItems>
        <AccordionItem Header="Margeret Peacock" Content="Margeret Peacock was born on Saturday , 01 December 1990. Now lives at Coventry House Miner Rd., London,UK. Margeret Peacock holds a position of Sales Coordinator in our WA department, (Seattle USA). Joined our company on Saturday , 01 May 2010"></AccordionItem>
        <AccordionItem Header="Laura Callahan" Content="Laura Callahan was born on Tuesday , 06 November 1990. Now lives at Edgeham Hollow Winchester Way, London,UK. Laura Callahan holds a position of Sales Coordinator in our WA department, (Seattle USA). Joined our company on Saturday , 01 May 2010"></AccordionItem>
        <AccordionItem Header="Albert Dodsworth" Content="Albert Dodsworth was born on Thursday , 19 October 1989. Now lives at 4726 - 11th Ave. N.E., Seattle,USA.Albert Dodsworth holds a position of Sales Representative in our WA department, (Seattle USA). Joined our company on Friday , 01 May 2009"></AccordionItem>
    </AccordionItems>
</SfAccordion>

AppBar

@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Buttons

<div class="control-container">
    <SfAppBar ColorMode="AppBarColor.Primary">
        <SfButton CssClass="e-inherit" IconCss="e-icons e-menu"></SfButton>
        <span class="regular">Blazor AppBar</span>
        <AppBarSpacer></AppBarSpacer>
        <SfButton CssClass="e-inherit" Content="FREE TRIAL"></SfButton>
    </SfAppBar>
</div>

<style>
    .control-container .e-btn.e-inherit {
        margin: 0 3px;
    }
</style>

@using Syncfusion.Blazor.Navigations

<SfBreadcrumb>
    <BreadcrumbItems>
        <BreadcrumbItem IconCss="e-icons e-home" Url="https://blazor.syncfusion.com/demos/"/>
        <BreadcrumbItem Text="Components" Url="https://blazor.syncfusion.com/demos/datagrid/overview"/>
        <BreadcrumbItem Text="Navigations" Url="https://blazor.syncfusion.com/demos/menu-bar/default-functionalities"/>
        <BreadcrumbItem Text="Breadcrumb" Url="./breadcrumb/default-functionalities"/>
    </BreadcrumbItems>
</SfBreadcrumb>

@using Syncfusion.Blazor.Navigations

<div class="control-container">
    <SfCarousel>
        <CarouselItem>
            <figure class="img-container">
                <img src="https://cdn.syncfusion.com/blazor/images/carousel/bridge.png" alt="Golden Gate Bridge, San Francisco" style="height:100%;width:100%;" />
                <figcaption class="img-caption">Golden Gate Bridge, San Francisco</figcaption>
            </figure>
        </CarouselItem>
        <CarouselItem>
            <figure class="img-container">
                <img src="https://cdn.syncfusion.com/blazor/images/carousel/trees.png" alt="Spring Flower Trees" style="height:100%;width:100%;" />
                <figcaption class="img-caption">Spring Flower Trees</figcaption>
            </figure>
        </CarouselItem>
        <CarouselItem>
            <figure class="img-container">
                <img src="https://cdn.syncfusion.com/blazor/images/carousel/waterfall.png" alt="Oddadalen Waterfalls, Norway" style="height:100%;width:100%;" />
                <figcaption class="img-caption">Oddadalen Waterfalls, Norway</figcaption>
            </figure>
        </CarouselItem>
        <CarouselItem>
            <figure class="img-container">
                <img src="https://cdn.syncfusion.com/blazor/images/carousel/sea.png" alt="Anse Source d'Argent, Seychelles" style="height:100%;width:100%;" />
                <figcaption class="img-caption">Anse Source d'Argent, Seychelles</figcaption>
            </figure>
        </CarouselItem>
        <CarouselItem>
            <figure class="img-container">
                <img src="https://cdn.syncfusion.com/blazor/images/carousel/rocks.png" alt="Stonehenge, England" style="height:100%;width:100%;" />
                <figcaption class="img-caption">Stonehenge, England</figcaption>
            </figure>
        </CarouselItem>
    </SfCarousel>
</div>

<style>
    .control-container {
        background-color: #e5e5e5;
        height: 300px;
        margin: 0 auto;
        width: 500px;
    }

    .e-carousel .e-carousel-items .e-carousel-item .img-container {
        height: 100%;
    }

    .e-carousel .e-carousel-items .e-carousel-item .img-caption {
        bottom: 4em;
        color: #fff;
        font-size: 12pt;
        height: 2em;
        position: relative;
        padding: 0.3em 1em;
        text-align: center;
        width: 100%;
    }
</style>

Context Menu

<div id="target">Right click/Touch hold to open the ContextMenu </div>
<SfContextMenu Target="#target" TValue="MenuItem">
    <MenuItems>
        <MenuItem Text="Cut"></MenuItem>
        <MenuItem Text="Copy"></MenuItem>
        <MenuItem Text="Paste"></MenuItem>
    </MenuItems>
</SfContextMenu>

<style>
    #target {
        border: 1px dashed;
        height: 150px;
        padding: 10px;
        position: relative;
        text-align: justify;
        color: gray;
        user-select: none;
    }
</style>

@using Syncfusion.Blazor.Navigations

<SfDropDownTree TItem="EmployeeData" TValue="string" Placeholder="Select an employee" Width="500px">
    <DropDownTreeField TItem="EmployeeData" DataSource="Data" Id="Id" Text="Name" HasChildren="HasChild" ParentID="PId"></DropDownTreeField>
</SfDropDownTree>

@code {
    List<EmployeeData> Data = new List<EmployeeData>
    {
        new EmployeeData() {Id="1", Name = "Steven Buchanan", HasChild=true, Expanded=true},
        new EmployeeData() {Id="2", PId="1", Name = "Laura Callahan", HasChild=true},
        new EmployeeData() {Id="3", PId="2", Name = "Andrew Fuller", HasChild=true },
        new EmployeeData() {Id="4", PId="3", Name = "Anne Dodsworth" },
        new EmployeeData() {Id="5", PId="3", Name = "Lilly" }
    };
    public class EmployeeData
    {
        public string? Id { get; set; }
        public string? Name { get; set; }
        public bool HasChild { get; set; }
        public bool Expanded { get; set; }
        public string? PId { get; set; }
    }
}

<SfMenu TValue="MenuItem">
    <MenuItems>
        <MenuItem Text="File">
            <MenuItems>
                <MenuItem Text="Open"></MenuItem>
                <MenuItem Text="Save"></MenuItem>
                <MenuItem Text="Exit"></MenuItem>
            </MenuItems>
        </MenuItem>
        <MenuItem Text="Edit">
            <MenuItems>
                <MenuItem Text="Cut"></MenuItem>
                <MenuItem Text="Copy"></MenuItem>
                <MenuItem Text="Paste"></MenuItem>
            </MenuItems>
        </MenuItem>
        <MenuItem Text="View">
            <MenuItems>
                <MenuItem Text="Toolbars"></MenuItem>
                <MenuItem Text="Zoomr"></MenuItem>
                <MenuItem Text="Full Screen"></MenuItem>
            </MenuItems>
        </MenuItem>
        <MenuItem Text="Tools">
            <MenuItems>
                <MenuItem Text="Spelling & Grammar"></MenuItem>
                <MenuItem Text="Customize"></MenuItem>
                <MenuItem Text="Options"></MenuItem>
            </MenuItems>
        </MenuItem>
        <MenuItem Text="Go"></MenuItem>
        <MenuItem Text="Help"></MenuItem>
    </MenuItems>
</SfMenu>

Pager

@using Syncfusion.Blazor.Data
@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Lists

<div class="col-lg-12 control-section sb-property-border">
 @{
    var listData = ListData.Skip(SkipValue).Take(TakeValue).ToList();
    <SfListView @ref="@List" DataSource="@listData" TValue="DataModel" HeaderTitle="Contacts" ShowHeader="true">
        <ListViewFieldSettings TValue="DataModel" Id="Id" Text="Name"></ListViewFieldSettings>
    </SfListView>
}
    <SfPager @ref="@Page" PageSize=5 NumericItemsCount=4 TotalItemsCount=25 ItemClick="Click">
    </SfPager>
</div>
@code {
    SfPager Page;
    public SfListView<DataModel> List { get; set; }
    public int SkipValue;
    public int TakeValue = 5;
    List<DataModel> ListData = new List<DataModel>();
    protected override void OnInitialized()
    {
        base.OnInitialized();
        ListData.Add(new DataModel { Name = "Nancy, Berlin, France" });
        ListData.Add(new DataModel { Name = "Andrew, Madrid, Germany" });
        ListData.Add(new DataModel { Name = "Janet, London, Brazil" });
        ListData.Add(new DataModel { Name = "Margaret, Marseille, Belgium" });
        ListData.Add(new DataModel { Name = "Steven, Cholchester, Switzerland" });
        ListData.Add(new DataModel { Name = "Laura , Tsawassen, Venezuela" });
        ListData.Add(new DataModel { Name = "Robert, Tacoma, Austria" });
        ListData.Add(new DataModel { Name = "Michael, Redmond, Mexico" });
        ListData.Add(new DataModel { Name = "Albert, Kirkland, USA" });
        ListData.Add(new DataModel { Name = "Nolan, London, Sweden" });
        ListData.Add(new DataModel { Name = "Jennifer, Berlin, Finland" });
        ListData.Add(new DataModel { Name = "Carter, Madrid, Italy" });
        ListData.Add(new DataModel { Name = "Allison, Marseille, Spain" });
        ListData.Add(new DataModel { Name = "John, Tsawassen, UK" });
        ListData.Add(new DataModel { Name = "Susan, Redmond, Ireland" });
        ListData.Add(new DataModel { Name = "Lydia, Cholchester, Portugal" });
        ListData.Add(new DataModel { Name = "Kelsey, London, Canada" });
        ListData.Add(new DataModel { Name = "Jessica, Kirkland, Denmark" });
        ListData.Add(new DataModel { Name = "Robert, Berlin, Austria" });
        ListData.Add(new DataModel { Name = "Shelley, Tacoma, Poland" });
        ListData.Add(new DataModel { Name = "Vanjack, Tsawassen, Norway" });
        ListData.Add(new DataModel { Name = "shelley, Cholchester, Argentina" });
        ListData.Add(new DataModel { Name = "Lydia, Kirkland, Finland" });
        ListData.Add(new DataModel { Name = "Jessica, Madrid, Sweden" });
        ListData.Add(new DataModel { Name = "Nolan, London, UK" });
        ListData.Add(new DataModel { Name = "Jennifer, Redmond, Italy" });
    }
    public void Click(PagerItemClickEventArgs args)
    {
        SkipValue = (args.CurrentPage * Page.PageSize) - Page.PageSize;
        TakeValue = Page.PageSize;
    }
    public class DataModel
    {
        public string Name { get; set; }
        public string Id { get; set; }
    }
}

@using Syncfusion.Blazor.Navigations

<div id="header" style="height:45px;text-align: center;color:white;background-color:midnightblue;font-size:1.2rem;line-height:45px;">
    Header
</div>

<SfSidebar Width="250px">
    <ChildContent>
        <div style="text-align: center;" class="text-content"> Sidebar </div>
    </ChildContent>
</SfSidebar>

<div class="text-content" style="text-align: center;">Main content</div>

<style>
    .e-sidebar {
        background-color: #f8f8f8;
        color: black;
    }

    .text-content {
        font-size: 1.5rem;
        padding: 3rem;
    }
</style>

Stepper

<SfStepper>
    <StepperSteps>
        <StepperStep></StepperStep>
        <StepperStep></StepperStep>
        <StepperStep></StepperStep>
        <StepperStep></StepperStep>
        <StepperStep></StepperStep>
    </StepperSteps>
</SfStepper>

Tab

<SfTab>
    <TabItems>
        <TabItem Content="Twitter is an online social networking service that enables users to send and read short 140-charactermessages called tweets.Registered users can read and post tweets, but those who are unregistered can only readthem.Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in SanFrancisco and has more than 25 offices around the world.Twitter was created in March 2006 by Jack Dorsey,Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity,with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billionsearch queries per day.">
            <ChildContent>
                <TabHeader Text="Twitter"></TabHeader>
            </ChildContent>
        </TabItem>
        <TabItem Content="Facebook is an online social networking service headquartered in Menlo Park, California. Its website waslaunched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students EduardoSaverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.">
            <ChildContent>
                <TabHeader Text="Facebook"></TabHeader>
            </ChildContent>
        </TabItem>
        <TabItem Content="WhatsApp Messenger is a proprietary cross-platform instant messaging client for smartphones that operatesunder a subscription business model.It uses the Internet to send text messages, images, video, user location andaudio media messages to other users using standard cellular mobile numbers. As of February 2016, WhatsApp had a userbase of up to one billion,[10] making it the most globally popular messaging application.WhatsApp Inc., based inMountain View, California, was acquired by Facebook Inc.on February 19, 2014, for approximately US$19.3 billion.">
            <ChildContent>
                <TabHeader Text="Whatsapp"></TabHeader>
            </ChildContent>
        </TabItem>
    </TabItems>
</SfTab>

Toolbar

<SfToolbar>
    <ToolbarItems>
        <ToolbarItem Text="Cut"></ToolbarItem>
        <ToolbarItem Text="Copy"></ToolbarItem>
        <ToolbarItem Text="Paste"></ToolbarItem>
        @* To separate the Toolbar items *@
        <ToolbarItem></ToolbarItem>
        <ToolbarItem Text="Bold"></ToolbarItem>
        <ToolbarItem Text="Underline"></ToolbarItem>
        <ToolbarItem Text="Italic"></ToolbarItem>
        <ToolbarItem Text="Color-Picker"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

TreeView

@using Syncfusion.Blazor.Navigations

<SfTreeView TValue="MailItem">
    <TreeViewFieldsSettings TValue="MailItem" Id="Id" DataSource="@MyFolder" Text="FolderName" ParentID="ParentId" HasChildren="HasSubFolders" Expanded="Expanded"></TreeViewFieldsSettings>
</SfTreeView>

@code{
    public class MailItem
    {
        public string? Id { get; set; }
        public string? ParentId { get; set; }
        public string? FolderName { get; set; }
        public bool Expanded { get; set; }
        public bool HasSubFolders { get; set; }
    }
    List<MailItem> MyFolder = new List<MailItem>();
    protected override void OnInitialized()
    {
        base.OnInitialized();
        MyFolder.Add(new MailItem
        {
            Id = "1",
            FolderName = "Inbox",
            HasSubFolders = true,
            Expanded = true
        });
        MyFolder.Add(new MailItem
        {
            Id = "2",
            ParentId = "1",
            FolderName = "Categories",
            Expanded = true,
            HasSubFolders = true
        });
        MyFolder.Add(new MailItem
        {
            Id = "3",
            ParentId = "2",
            FolderName = "Primary"
        });
        MyFolder.Add(new MailItem
        {
            Id = "4",
            ParentId = "2",
            FolderName = "Social"
        });
        MyFolder.Add(new MailItem
        {
            Id = "5",
            ParentId = "2",
            FolderName = "Promotions"
        });
    }
}

Support and feedback

Explore other popular Syncfusion Blazor components curated from UI components, standalone SDKs, and document solution suites.

UI components Standalone UI SDK's Document processing
Blazor DataGrid Blazor Gantt Chart Blazor DOCX Editor
Blazor TreeGrid Blazor Diagram Blazor Document
Blazor Map Blazor Scheduler Blazor PDF Viewer
Blazor File Manager Blazor RichTextEditor Blazor Spreadsheet Editor

License

This is a commercial product and requires a paid license for possession or use. Syncfusion licensed software, including this component, is subject to the terms and conditions of the Syncfusion EULA. You can purchase a license here or start a free 30-day trial here.

About Syncfusion

Founded in 2001 and headquartered in Research Triangle Park, N.C., Syncfusion has more than 29,000 customers and more than 1 million users, including large financial institutions, Fortune 500 companies, and global IT consultancies.

Today, we provide 1800+ components and frameworks for web, mobile, and desktop development across multiple platforms:

Web: Blazor | ASP.NET Core | ASP.NET MVC | JavaScript | Angular | React | Vue

Mobile: Flutter | MAUI | UWP

Desktop: WinForms | WPF | WinUI

Learn more at www.syncfusion.com.

sales@syncfusion.com | Toll Free: 1-888-9-DOTNET

Product Compatible and additional computed target framework versions.
.NET net8.0 is compatible.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed.  net9.0 is compatible.  net9.0-android was computed.  net9.0-browser was computed.  net9.0-ios was computed.  net9.0-maccatalyst was computed.  net9.0-macos was computed.  net9.0-tvos was computed.  net9.0-windows was computed.  net10.0 is compatible.  net10.0-android was computed.  net10.0-browser was computed.  net10.0-ios was computed.  net10.0-maccatalyst was computed.  net10.0-macos was computed.  net10.0-tvos was computed.  net10.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages (35)

Showing the top 5 NuGet packages that depend on Syncfusion.Blazor.Navigations:

Package Downloads
Syncfusion.Blazor.Grid

Syncfusion® Blazor DataGrid component for rendering high-performance, feature-rich tabular UI in .NET Blazor applications. Includes virtualization, paging, sorting, filtering, grouping, editing, templates, and export (Excel/PDF).
Syncfusion.Blazor.RichTextEditor

Syncfusion® Blazor Rich Text Editor component for composing and formatting HTML content in .NET Blazor apps. Supports toolbar, markdown, paste cleanup, formats, and extensible plugins.
Syncfusion.Blazor.Schedule

Syncfusion® Blazor Scheduler component for managing appointments and calendars in .NET Blazor apps. Supports multiple views, recurrence, time zones, resource grouping, drag-and-drop, and export.
Syncfusion.Blazor.TreeGrid

Syncfusion® Blazor TreeGrid component for displaying hierarchical tabular data in .NET Blazor apps. Supports row hierarchy, sorting, filtering, paging, editing, virtualization, and export.
Syncfusion.Blazor.WordProcessor

This package provides the functionality to utilize the features of Syncfusion® Blazor Word Processor (Document Editor) component and more.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last Updated
35.1.42 4,231 10/27/2026
35.1.41 8,576 10/20/2026
35.1.40 11,719 10/13/2026
35.1.39 5,101 10/6/2026
35.1.37 12,522 9/29/2026
34.2.9 15,361 9/21/2026
34.2.8 11,666 9/14/2026
34.2.7 11,558 9/8/2026
34.2.6 14,493 8/31/2026
34.2.5 9,135 8/25/2026
34.2.4 19,927 8/17/2026
34.2.3 17,530 8/11/2026
34.2.2 26,224 8/5/2026
34.1.33 20,292 7/27/2026
34.1.32 18,880 7/21/2026
34.1.31 20,615 7/14/2026
34.1.30 6,698 7/9/2026
34.1.29 25,306 7/6/2026
33.2.15 37,284 6/23/2026
33.2.13 14,126 6/16/2026
Loading failed

https://blazor.syncfusion.com/documentation/release-notes/35.1.42/?utm_source=nuget&utm_medium=listing