Syncfusion.AspNetMvc.Navigations 34.1.30

Syncfusion® ASP.NET MVC Navigations Components

A comprehensive suite of ASP.NET MVC 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 MVC Accordion Component

The ASP.NET MVC 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 MVC AppBar Component

The ASP.NET MVC 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 MVC Breadcrumb Component

The ASP.NET MVC 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 MVC Carousel Component

The ASP.NET MVC 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 MVC Context Menu Component

The ASP.NET MVC 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 MVC DropDown Tree Component

The ASP.NET MVC 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 MVC Menu Component

The ASP.NET MVC 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 MVC Sidebar Component

The ASP.NET MVC 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 MVC Stepper Component

The ASP.NET MVC 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 MVC Tab Component

The ASP.NET MVC 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 MVC Toolbar Component

The ASP.NET MVC 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 MVC TreeView Component

The ASP.NET MVC 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

These setup steps are required only once for your application, regardless of which Syncfusion components you use.

1. Install Base NuGet Package

Install-Package Syncfusion.AspNetMvc.Navigations

2. Add Namespace Reference

Edit Web.config under the Views folder and add the Syncfusion.EJ2 namespace:

<namespaces>
    <add namespace="Syncfusion.EJ2"/>
</namespaces>

3. Add Stylesheet & Script References

In your layout file (~/Views/Shared/_Layout.cshtml), add the following in the <head> section:

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewBag.Title - Syncfusion Application</title>
    
    
    <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/34.1.30/fluent2.css" />
    
    
    <script src="https://cdn.syncfusion.com/ej2/34.1.30/dist/ej2.min.js"></script>
</head>

4. Register Script Manager

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

<body>
    @RenderBody()
    
    
    @Html.EJS().ScriptManager()
</body>

Quick Start

Step 1: Add ASP.NET MVC Navigations control

Add the Syncfusion® ASP.NET MVC Navigations control ~/Views/Home/Index.cshtml page:

@Html.EJS().Tab("tab")
    .Items(items =>
    {
        items.Add()
            .Header(new Syncfusion.EJ2.Navigations.TabHeader { Text = "Tab 1" })
            .Content("Content")
            .Add();
    })
    .Render()


@Html.EJS().Accordion("accordion")
    .Items(items =>
    {
        items.Add()
            .Header("Item 1")
            .Content("Content")
            .Add();
    })
    .Render()


@Html.EJS().Menu("menu")
    .Items(items =>
    {
        items.Add().Text("File").Add();
    })
    .Render()


@Html.EJS().TreeView("treeview")
    .DataSource((IEnumerable<object>)ViewBag.TreeData)
    .Fields(new Syncfusion.EJ2.Navigations.TreeViewFieldSettings
    {
        Text = "Name",
        Value = "Id",
        Child = "Children"
    })
    .Render()


<div class="container">
    @Html.EJS().Sidebar("sidebar")
        .Target(".container")
        .Render()

    <div class="content">
        Content area
    </div>
</div>


@Html.EJS().Breadcrumb("breadcrumb")
    .Items(item =>
    {
        item.Text("Home").Add();
    })
    .Render()


@Html.EJS().Stepper("stepper")
    .Steps(step =>
    {
        step.Label("Step 1").Add();
    })
    .Render()


@Html.EJS().Toolbar("toolbar")
    .Items(items =>
    {
        items.Add().Text("Item").Add();
    })
    .Render()


@Html.EJS().DropDownTree("data").Render()


@Html.EJS().Carousel("carousel")
    .Items(item =>
    {
        item.Template("<div>Slide 1</div>").Add();
    })
    .Render()


@Html.EJS().AppBar("appbar")
    .ContentTemplate("<span>Syncfusion AppBar</span>")
    .Render()

Step 2: 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 MVC | 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