Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]Prerequisites
 [Expand]What's Installed
 [Expand]Common Concepts
 [Collapse]ASP.NET WebForms Controls
  [Expand]Reporting
  [Expand]Chart Control
  [Expand]Grid View
  [Expand]Card View
  [Expand]Vertical Grid
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Image and Data Browsing
  [Expand]Docking and Popups
  [Collapse]Site Navigation and Layout
   [Expand]Product Information
   [Expand]Form Layout
   [Collapse]Menu
     ASPxMenu Overview
    [Collapse]Concepts
     [Expand]Binding to Data
      Item Link Mode
      Scrolling
      Templates
      Adaptivity
    [Expand]Visual Elements
   [Expand]Navigation Bar
   [Expand]Page Control and Tab Control
    Panel Overview
   [Expand]Ribbon
   [Expand]Site Map Control
   [Expand]Splitter
   [Expand]Tag Cloud Control
   [Expand]Title Index
   [Expand]TreeView
  [Expand]File Management
  [Expand]Multi-Use Site Controls
  [Expand]Scheduler
  [Expand]HTML Editor
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Gauges
  [Expand]Data Editors
  [Expand]Spell Checker
  [Expand]Query Builder
 [Expand]ASP.NET MVC Extensions
 [Expand]Localization
 [Expand]Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Adaptivity

The ASP.NET Menu control's responsive mode allows you to create adaptive navigation for your web application. Set the MenuSettingsAdaptivity.Enabled to true to enable the ASPxMenu's adaptivity.

View the Demo

Refer to the Menu - Responsive Layout online demo to see this feature in action.

The Menu control provides two adaptive modes that optimize navigation according to the browser window's orientation:

Expanded Collapse to Side Menu Mode

The ASPxMenu control transforms the horizontal menu into a vertical side menu that a user can invoke by clicking the hamburger button:

The ASPxMenu switches to the Collapse to Side Menu mode when the browser window's inner width is less than or equal to the MenuSettingsAdaptivity.CollapseToSideMenuAtWindowInnerWidth property's value. The default value is 576 pixels.

You can define how the side menu is expanded by setting the MenuSettingsAdaptivity.SideMenuExpandMode property to one of the following values:

  • OverlayContent - overlay page content with the expanded side menu.
  • PushContent - push page content with the expanded side menu.

Set the MenuSettingsAdaptivity.EnableCollapseToSideMenu property to false to disable the Collapse to Side Menu responsive mode.

Expanded Hide Root Items Mode

The ASPxMenu's Hide Root Items mode moves menu root items one by one to the ellipse button's popup menu when the control's size does not fit the browser window.

Set the MenuSettingsAdaptivity.EnableAutoHideRootItems property to false to disable the ASPxMenu's Hide Root Items adaptive mode.

How would you rate this topic?​​​​​​​