Syncfusion.AspNetCore.Navigations 34.1.33

Syncfusion® ASP.NET Core Navigations Components

A comprehensive suite of ASP.NET Core navigation and menu components for building organized navigation structures. Includes Accordion, Menu, Tabs, Sidebar, Toolbar, TreeView, Ribbon, Breadcrumb, Carousel, AppBar, Context Menu, and Stepper components.

Supported Components

This package includes the following components:

• Accordion
• AppBar
• Breadcrumb
• Carousel
• Context Menu
• DropDown Tree
• Menu
• Sidebar
• Stepper
• Tab
• Toolbar
• TreeView

ASP.NET Core Accordion Component

The ASP.NET Core Accordion Component provides collapsible content panels for organizing information in a limited vertical space.

Key Features:

• Expand Modes: Single, Multiple, and Toggle expand modes
• Nested Accordion: Support for nested accordion panels
• Icon Support: Add prefix/suffix icons to accordion headers
• Animation: Configurable expand/collapse animation
• Lazy Load: Load panel content on demand
• Keyboard Navigation: Full keyboard and accessibility support

Documentation

• Getting Started
• API Reference
• Live Demos

ASP.NET Core AppBar Component

The ASP.NET Core AppBar Component provides an application-level top navigation bar for displaying branding, titles, actions, and navigation controls.

Key Features:

• Modes: Regular, Prominent, and Dense display modes
• Color Modes: Light, Dark, Inherit, and Primary colour variants
• Sticky Position: Pin the AppBar to the top of the viewport while scrolling
• Flexible Spacer: Use a spacer to push content to opposite ends of the bar
• Responsive: Adapts to different screen sizes and layouts

Documentation

• Getting Started
• API Reference
• Live Demos

ASP.NET Core Breadcrumb Component

The ASP.NET Core Breadcrumb Component renders a path-based navigation trail so users always know their location within the application hierarchy.

Key Features:

• URL Binding: Automatically generate breadcrumbs from the current page URL
• Custom Items: Define breadcrumb items with text, URL, and icons manually
• Overflow Modes: Collapsed, Scroll, Menu, and Hidden modes for long paths
• Separator: Configurable separator character or custom template between items
• Item Template: Render custom HTML for each breadcrumb item

Documentation

• Getting Started
• API Reference
• Live Demos

ASP.NET Core Carousel Component

The ASP.NET Core Carousel Component displays a slideshow of content items with navigation controls, indicators, and auto-play support.

Key Features:

• Auto Play: Automatic slide cycling with configurable interval
• Navigation Buttons: Previous/Next buttons with configurable visibility
• Indicators: Dot or progress-bar slide position indicators
• Animation Effects: Slide and Fade transition animations
• Item Templates: Render any HTML content per slide via text/x-template
• Touch Support: Swipe gestures on mobile devices
• Loop: Continuous cycling with loop property

Documentation

• Getting Started
• API Reference
• Live Demos

ASP.NET Core Context Menu Component

The ASP.NET Core Context Menu Component provides a right-click popup menu with nested items, icons, and separators attached to any target element.

Key Features:

• Target Binding: Attach the context menu to any element via the target CSS selector
• Nested Items: Multi-level hierarchical sub-menus
• Icons: Prefix icons on menu items using iconCss
• Separators: Visual dividers between item groups
• Enable/Disable: Conditionally enable or disable individual items
• Animation: Configurable open/close animation settings

Documentation

• Getting Started
• API Reference
• Live Demos

ASP.NET Core DropDown Tree Component

The ASP.NET Core DropDown Tree Component combines a text input with a hierarchical TreeView popup for selecting values from nested data structures.

Key Features:

• Hierarchical Data: Display parent-child relationships via id/pid field mapping
• Checkbox Selection: Multi-value selection using showCheckBox
• Multi-Select: Enable selection of multiple nodes with allowMultiSelection
• Filter Bar: Built-in search filter inside the popup via filterBarPlaceholder
• Custom Template: Render custom HTML for each tree node item
• Remote Data: Load tree data from a remote endpoint via DataManager

Documentation

• Getting Started
• API Reference
• Live Demos

ASP.NET Core Menu Component

The ASP.NET Core Menu Component renders a horizontal or vertical navigation menu bar with multi-level sub-menu support.

Key Features:

• Orientation: Horizontal and Vertical layout modes
• Multi-level: Unlimited depth nested sub-menus
• Icons: Prefix icons on menu items via iconCss
• Separators: Visual dividers between menu groups
• Hamburger Mode: Collapse to a hamburger icon on smaller screens
• Animation: Configurable open/close animation for sub-menus
• Scroll Menu: Scrollable menu for large item lists

Documentation

• Getting Started
• API Reference
• Live Demos

ASP.NET Core Sidebar Component

The ASP.NET Core Sidebar Component provides a collapsible side panel for navigation drawers, off-canvas menus, and contextual panels.

Key Features:

• Types: Push, Over, Slide, and Auto behaviour modes
• Position: Dock to the Left or Right side of the viewport
• Dock Mode: Collapse to a narrow docked state showing only icons
• Close on Click: Optionally close when the user clicks outside via closeOnDocumentClick
• Toggle API: Programmatically open, close, or toggle via .show(), .hide(), .toggle()
• Responsive: Automatically switch to overlay mode on smaller screens

Documentation

• Getting Started
• API Reference
• Live Demos

ASP.NET Core Stepper Component

The ASP.NET Core Stepper Component displays a step-by-step progress indicator for guiding users through multi-stage workflows and wizards.

Key Features:

• Step Icons: Custom icon per step via iconCss (Syncfusion icon classes)
• Step Labels: Descriptive label text below each step indicator
• Linear Mode: Enforce sequential step progression with the linear property
• Orientation: Horizontal and Vertical layout modes
• Active Step: Programmatically set the current active step via activeStep
• Step States: Visual states — NotStarted, InProgress, Completed, Skipped, and Error
• Step Changed Event: React to step transitions via the stepChanged event

Documentation

• Getting Started
• API Reference
• Live Demos

ASP.NET Core Tab Component

The ASP.NET Core Tab Component organises related content into tabbed panels for clean and accessible navigation within a single view.

Key Features:

• Overflow Modes: Scrollable, Popup, and Extended modes for handling many tabs
• Close Button: Allow individual tab dismissal with showCloseButton
• Header Icons: Add icons to tab headers alongside text labels
• Reorder: Drag and drop to reorder tabs
• Lazy Load: Render tab content on first activation only
• Keyboard Navigation: Full keyboard and ARIA accessibility support
• Selecting Event: Intercept and cancel tab switches via the selecting event

Documentation

• Getting Started
• API Reference
• Live Demos

ASP.NET Core Toolbar Component

The ASP.NET Core Toolbar Component provides a horizontal strip of command buttons, separators, spacers, and input controls for application action bars.

Key Features:

• Item Types: Button, Separator, Spacer, and Input item types
• Overflow Modes: Scrollable and Popup modes for small viewports
• Tooltip: Per-item tooltip text via tooltipText
• Prefix Icons: Icon-only or icon+text items via prefixIcon
• Templates: Embed any custom HTML control inside a toolbar item
• Keyboard Navigation: Arrow key navigation across toolbar items
• Enable/Disable: Conditionally enable or disable individual items

Documentation

• Getting Started
• API Reference
• Live Demos

ASP.NET Core TreeView Component

The ASP.NET Core TreeView Component renders a hierarchical tree structure with expand/collapse, checkboxes, drag-and-drop, and inline editing capabilities.

Key Features:

• Data Binding: Local flat/hierarchical data and remote data via DataManager
• Checkboxes: Multi-node selection with showCheckBox and cascading check state
• Drag and Drop: Reorder or move nodes between trees with allowDragAndDrop
• Inline Editing: Rename nodes in place with allowEditing
• Multi-Selection: Select multiple nodes with allowMultiSelection
• Node Templates: Render custom HTML inside each tree node
• Expand/Collapse: Programmatic control via expandAll(), collapseAll() methods
• Load on Demand: Fetch child nodes lazily for large datasets

Documentation

• Getting Started
• API Reference
• Live Demos

Common Setup

All Syncfusion ASP.NET Core controls share the same foundational setup steps.

1. Install NuGet Package

Install-Package Syncfusion.AspNetCore.Navigations

2. Register Tag Helper

Add the following to ~/Pages/_ViewImports.cshtml or ~/Views/_ViewImports.cshtml:

@addTagHelper *, Syncfusion.AspNetCore.Base
@addTagHelper *, Syncfusion.AspNetCore.Navigations

3. Add Stylesheet & Script References

In your layout file (~/Pages/Shared/_Layout.cshtml):

<head>
    
    <link rel="stylesheet" href="_content/Syncfusion.AspNetCore.Themes/styles/fluent2.css" />

    

    
    <script src="_content/Syncfusion.AspNetCore.Navigations/scripts/sf-accordion.min.js"></script>

    
    <script src="_content/Syncfusion.AspNetCore.Navigations/scripts/sf-appbar.min.js"></script>

    
    <script src="_content/Syncfusion.AspNetCore.Navigations/scripts/sf-breadcrumb.min.js"></script>

    
    <script src="_content/Syncfusion.AspNetCore.Navigations/scripts/sf-carousel.min.js"></script>

    
    <script src="_content/Syncfusion.AspNetCore.Navigations/scripts/sf-context-menu.min.js"></script>

    
    <script src="_content/Syncfusion.AspNetCore.Navigations/scripts/sf-drop-down-tree.min.js"></script>

    
    <script src="_content/Syncfusion.AspNetCore.Navigations/scripts/sf-menu.min.js"></script>

    
    <script src="_content/Syncfusion.AspNetCore.Navigations/scripts/sf-sidebar.min.js"></script>

    
    <script src="_content/Syncfusion.AspNetCore.Navigations/scripts/sf-stepper.min.js"></script>

    
    <script src="_content/Syncfusion.AspNetCore.Navigations/scripts/sf-tab.min.js"></script>

    
    <script src="_content/Syncfusion.AspNetCore.Navigations/scripts/sf-toolbar.min.js"></script>

    
    <script src="_content/Syncfusion.AspNetCore.Navigations/scripts/sf-treeview.min.js"></script>
</head>

4. Register Script Manager

In your layout file (~/Pages/Shared/_Layout.cshtml), At the end of your <body> tag:

<ejs-scripts></ejs-scripts>

Quick Start

Step 1: Create a PageModel

Create ~/Pages/Index.cshtml.cs:

using Microsoft.AspNetCore.Mvc.RazorPages;

public class IndexModel : PageModel
{
    public void OnGet() { }
}

Step 2: Create the View

Create ~/Pages/Index.cshtml:

@page
@model IndexModel
@using Syncfusion.EJ2.Navigations

<div class="container mt-5">
    <h2>Navigations Components Demo</h2>

    
    <div class="mb-5">
        <h5>Carousel</h5>
        <ejs-carousel id="carousel" cssClass="demo-carousel">
            <e-carousel-items>
                <e-carousel-item template="#slide1"></e-carousel-item>
                <e-carousel-item template="#slide2"></e-carousel-item>
                <e-carousel-item template="#slide3"></e-carousel-item>
            </e-carousel-items>
        </ejs-carousel>
        <script id="slide1" type="text/x-template"><div style="background:#4a90e2;height:180px;display:flex;align-items:center;justify-content:center;color:#fff;border-radius:6px;"><h3>Slide 1</h3></div></script>
        <script id="slide2" type="text/x-template"><div style="background:#27ae60;height:180px;display:flex;align-items:center;justify-content:center;color:#fff;border-radius:6px;"><h3>Slide 2</h3></div></script>
        <script id="slide3" type="text/x-template"><div style="background:#8e44ad;height:180px;display:flex;align-items:center;justify-content:center;color:#fff;border-radius:6px;"><h3>Slide 3</h3></div></script>
        <style>.demo-carousel { height: 180px; }</style>
    </div>

    
    <div class="mb-5">
        <h5>Context Menu</h5>
        @{
            var ctxItems = new List<object> {
                new { text = "Cut",   iconCss = "e-icons e-cut"   },
                new { text = "Copy",  iconCss = "e-icons e-copy"  },
                new { text = "Paste", iconCss = "e-icons e-paste" },
                new { separator = true },
                new { text = "Delete", iconCss = "e-icons e-delete" }
            };
        }
        <div id="ctxTarget" style="border:2px dashed #4a90e2;padding:30px;text-align:center;border-radius:6px;">
            Right-click here
        </div>
        <ejs-contextmenu id="contextMenu" target="#ctxTarget" items="ctxItems"></ejs-contextmenu>
    </div>

    
    <div class="mb-5">
        <h5>DropDown Tree</h5>
        @{
            var ddtData = new List<object> {
                new { id = "1",    name = "Documents", hasChild = true },
                new { id = "1-1", pid = "1", name = "Resume.docx"     },
                new { id = "1-2", pid = "1", name = "Report.pdf"      },
                new { id = "2",    name = "Images",    hasChild = true },
                new { id = "2-1", pid = "2", name = "Photo.png"       }
            };
        }
        <ejs-dropdowntree id="ddTree" placeholder="Select a file..." style="width:350px">
            <e-dropdowntree-fields dataSource="ddtData" id="id" parentValue="pid"
                                   hasChildren="hasChild" text="name" value="id">
            </e-dropdowntree-fields>
        </ejs-dropdowntree>
    </div>

    
    <div class="mb-5">
        <h5>Menu</h5>
        @{
            var menuItems = new List<object> {
                new { text = "File", items = new List<object> {
                    new { text = "New" }, new { text = "Open" },
                    new { separator = true }, new { text = "Save" }
                }},
                new { text = "Edit", items = new List<object> {
                    new { text = "Cut" }, new { text = "Copy" }, new { text = "Paste" }
                }},
                new { text = "View" },
                new { text = "Help" }
            };
        }
        <ejs-menu id="menu" items="menuItems"></ejs-menu>
    </div>

    
    <div class="mb-5">
        <h5>Sidebar</h5>
        <div style="position:relative; min-height:150px; overflow:hidden;">
            <ejs-sidebar id="sidebar" width="220px" type="Push">
                <e-content-template>
                    <div style="padding:16px;">
                        <p><strong>Navigation</strong></p>
                        <ul class="list-unstyled">
                            <li>🏠 Home</li><li>📊 Reports</li><li>⚙️ Settings</li>
                        </ul>
                        <ejs-button id="closeSidebar" content="Close" cssClass="e-outline" width="100%"></ejs-button>
                    </div>
                </e-content-template>
            </ejs-sidebar>
            <div style="padding:16px;">
                <ejs-button id="toggleSidebar" content="☰ Toggle Sidebar" cssClass="e-info"></ejs-button>
            </div>
        </div>
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                var sb = document.getElementById('sidebar').ej2_instances[0];
                document.getElementById('toggleSidebar').onclick = function () { sb.toggle(); };
                document.getElementById('closeSidebar').onclick  = function () { sb.hide();   };
            });
        </script>
    </div>

    
    <div class="mb-5">
        <h5>Stepper</h5>
        <ejs-stepper id="stepper">
            <e-stepper-steps>
                <e-stepper-step iconCss="e-icons e-people"      label="Account"></e-stepper-step>
                <e-stepper-step iconCss="e-icons e-lock"        label="Security"></e-stepper-step>
                <e-stepper-step iconCss="e-icons e-credit-card" label="Payment"></e-stepper-step>
                <e-stepper-step iconCss="e-icons e-check-box"   label="Confirm"></e-stepper-step>
            </e-stepper-steps>
        </ejs-stepper>
    </div>

    
    <div class="mb-5">
        <h5>Tab</h5>
        <ejs-tab id="tab">
            <e-tabs>
                <e-tab header="@(new TabHeader { Text = "Home" })"   content="Welcome to the Home tab."></e-tab>
                <e-tab header="@(new TabHeader { Text = "Profile" })" content="Manage your profile settings here."></e-tab>
                <e-tab header="@(new TabHeader { Text = "Settings" })" content="Configure application preferences."></e-tab>
            </e-tabs>
        </ejs-tab>
    </div>

    
    <div class="mb-5">
        <h5>Toolbar</h5>
        <ejs-toolbar id="toolbar">
            <e-toolbar-items>
                <e-toolbar-item prefixIcon="e-icons e-cut"   text="Cut"   tooltipText="Cut"></e-toolbar-item>
                <e-toolbar-item prefixIcon="e-icons e-copy"  text="Copy"  tooltipText="Copy"></e-toolbar-item>
                <e-toolbar-item prefixIcon="e-icons e-paste" text="Paste" tooltipText="Paste"></e-toolbar-item>
                <e-toolbar-item type="Separator"></e-toolbar-item>
                <e-toolbar-item prefixIcon="e-icons e-bold"   text="Bold"   tooltipText="Bold"></e-toolbar-item>
                <e-toolbar-item prefixIcon="e-icons e-italic" text="Italic" tooltipText="Italic"></e-toolbar-item>
                <e-toolbar-item type="Spacer"></e-toolbar-item>
                <e-toolbar-item prefixIcon="e-icons e-search" text="Search" tooltipText="Search"></e-toolbar-item>
            </e-toolbar-items>
        </ejs-toolbar>
    </div>

    
    <div class="mb-5">
        <h5>TreeView</h5>
        @{
            var treeData = new List<object> {
                new { id = 1,  name = "Australia", hasChild = true, expanded = true },
                new { id = 2,  pid = 1, name = "New South Wales" },
                new { id = 3,  pid = 1, name = "Victoria"        },
                new { id = 4,  name = "India",     hasChild = true },
                new { id = 5,  pid = 4, name = "Tamil Nadu"      },
                new { id = 6,  pid = 4, name = "Karnataka"       }
            };
        }
        <ejs-treeview id="treeview">
            <e-treeview-fields dataSource="treeData"
                               id="id" parentID="pid"
                               text="name" hasChildren="hasChild"
                               expanded="expanded">
            </e-treeview-fields>
        </ejs-treeview>
    </div>
</div>

Step 3: Run the Application

Press Ctrl+F5 to run the application in your browser.

Support

• Submit a support ticket
• Community forums
• Feature requests

License

This is a commercial product and requires a paid license for possession or use. Review the Syncfusion® EULA.

• Purchase a license
• Start a free 30-day trial

About Syncfusion®

Syncfusion® provides 1600+ UI 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