[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
   Getting Started
  [Expand]Grid View
  [Expand]Tree List
  [Expand]Card View
  [Expand]Reporting
  [Expand]Chart Control
  [Expand]Pivot Grid
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Scheduler
  [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]HTML Editor
  [Expand]Gauges
  [Expand]Vertical Grid
  [Expand]Data Editors
  [Expand]Docking and Popups
  [Expand]File Management
  [Expand]Data and Image Navigation
  [Expand]Multi-Use Site Controls
  [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]Office File API
[Expand]Reporting
[Expand]Report and Dashboard 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.

Is this topic helpful?​​​​​​​