How to use Megamenu / Accordion navigation with BindMENU in DNN

We've included several cool navigation options, that you can apply to your theme as needed. From Megamenus, to Accordions, or just plain simple nav, it's your choice!

For each possible menu layout, proceed as follows:

1. Edit all theme's .ascx layout files (for example Home.ascx)
2. Locate the horizontal menu token, starting with dnn:MENU1, or vertical menu token, starting with dnn:MENU2
3. Replace code as shown below:

Default Menu

Horizontal

You will need to set the MenuStyle value to DefaultMenu and Orientation value set to Horizontal

<dnn:MENU1 runat="server" ID="BindMENU1" MenuStyle="BindMENU">
  <ClientOptions>
    <dnn:ClientString Name="MenuStyle" Value="DefaultMenu" />
    <dnn:ClientString Name="Orientation" Value="Horizontal" />
  </ClientOptions>
</dnn:MENU1>

Vertical

You will need to set the MenuStyle value to DefaultMenu and Orientation value set to Vertical

<dnn:MENU2 runat="server" ID="BindMENU2" MenuStyle="BindMENU">
  <ClientOptions>
    <dnn:ClientString Name="MenuStyle" Value="DefaultMenu" />
    <dnn:ClientString Name="Orientation" Value="Vertical" />
  </ClientOptions>
</dnn:MENU2>

Mega Menu

Our megamenus were design to provide you the best navigation experience. They will automatically display a megamenu structure when nested sub items are present, or a regular drop-down sub-navigation, when only one sub level is present.

Horizontal

You will need to set the MenuStyle value to MegaMenu and Orientation value set to Horizontal

<dnn:MENU1 runat="server" ID="BindMENU1" MenuStyle="BindMENU">
  <ClientOptions>
    <dnn:ClientString Name="MenuStyle" Value="MegaMenu" />
    <dnn:ClientString Name="Orientation" Value="Horizontal" />
  </ClientOptions>
</dnn:MENU1>

Vertical

You will need to set the MenuStyle value to Megamenu and Orientation value set to Vertical

<dnn:MENU2 runat="server" ID="BindMENU2" MenuStyle="BindMENU">
  <ClientOptions>
    <dnn:ClientString Name="MenuStyle" Value="Megamenu" />
    <dnn:ClientString Name="Orientation" Value="Vertical" />
  </ClientOptions>
</dnn:MENU2>

Accordion

Vertical (only)

You will need to set the MenuStyle value to Accordion and Orientation value set to Vertical

<dnn:MENU2 runat="server" ID="BindMENU2" MenuStyle="BindMENU">
  <ClientOptions>
    <dnn:ClientString Name="MenuStyle" Value="Accordion" />
    <dnn:ClientString Name="Orientation" Value="Vertical" />
  </ClientOptions>
</dnn:MENU2>