Adaptivity

• Aug 01, 2019

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 ASPxMenu‘s adaptivity.

The Menu control can display its items as follows when they do not fit the browser window’s width.

• Move items to a drop-down menu. To show these items, hover the ellipsis button.

  

  How to disable: set the MenuSettingsAdaptivity.EnableAutoHideRootItems property to false.

  ASPX

  
  <dx:ASPxMenu ID="Menu" runat="server" ...>
       <SettingsAdaptivity Enabled="true" EnableAutoHideRootItems="false" ... />
       <Items>
            ...
       </Items>
  </dx:ASPxMenu>
  

   

• Display icons only. The hovered item displays its caption as a tooltip.

  

  How to enable: set the MenuSettingsAdaptivity.EnableCollapseRootItemsToIcons property to true and specify the MenuSettingsAdaptivity.CollapseRootItemsToIconsAtWindowInnerWidth property value.

  ASPX

  
  <dx:ASPxMenu ID="Menu" runat="server" ...>
       <SettingsAdaptivity Enabled="true" EnableCollapseRootItemsToIcons="true" CollapseRootItemsToIconsAtWindowInnerWidth="700" />
       <Items>
            ...
       </Items>
  </dx:ASPxMenu>
  

   

• Position vertically and hide items under the hamburger button. Click this button to show the vertical side-menu.

  

  How to enable: set the MenuSettingsAdaptivity.EnableCollapseToSideMenu property to true and specify the MenuSettingsAdaptivity.CollapseToSideMenuAtWindowInnerWidth property value.

  Use the MenuSettingsAdaptivity.SideMenuExpandMode property to specify whether the side menu overlays page content or pushes it.

  ASPX

  
  <dx:ASPxMenu ID="Menu" runat="server" ...>
       <SettingsAdaptivity Enabled="true" EnableCollapseToSideMenu="true" CollapseToSideMenuAtWindowInnerWidth="300" 
         SideMenuExpandMode="OverlayContent" />
       <Items>
            ...
       </Items>
  </dx:ASPxMenu>
  

Online Demo

Menu - Responsive Layout