Adaptivity

• Feb 17, 2023

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.

Run Demo: Menu - Responsive Layout

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 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 EnableCollapseRootItemsToIcons property to true and specify the 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 EnableCollapseToSideMenu property to true and specify the CollapseToSideMenuAtWindowInnerWidth property value.

  Use the 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>