Square Navigation Menu


Create a stylish, animated menu using any text or button made in Muse. This groundbreaking menu widget gives you complete design freedom and control over the look and feel. The ability to use up to 20 custom links makes this a unique and formidable addition to your site.

  • Widget Compatibility: Highly Compatible (No known issues when combining with other MuseThemes widgets)
  • Current Version: 1.0
  • Supported Devices: Desktop, Tablet, Phone

Release Log

  • 1.1: Fixed menu items in popup not appearing in Firefox (03/11/2016)
  • 1.0: Adds collapsible panel functionality and support for responsive Muse


  • Drag the widget from the library and drop into your project in Design mode.
  • This widget contains 3 separate widget elements:
    • Menu Controller
    • Left Block
    • Right Block

Menu Controller:

  • This widget controls the primary functions of the Menu.
  • Place the widget where you would like your menu button to appear (this applies to the default menu button).
  • Navigation Menu Setup:
    • Page Background Overlay Color: This setting controls the color of the page overlay behind the menu once it's opened.
    • Menu Logo - Placement: The Square Navigation Menu utilizes a custom logo that is placed in the navigation. This setting determines whether it will be placed on the left menu block, or the right.
    • Menu Logo - Filename: Use this to load your logo image file.
    • Menu Animation - Flyout Direction: This setting determines the direction the menu blocks will "flyout" from the menu button.
    • Menu Animation - Style: Horizontal or vertical button layout.
    • Link Alignment: This setting makes precise placement of the social share button easier. If you place the button on the right side, the right alignment will be best, and vice versa.
    • Menu Link Padding: Provides padding for menu links.
  • Menu Button Configuration section
  • You have the option of using a custom menu button or the default button option.
  • For the default button option, select "Generated Button".
  • For a custom button, select "Custom - Graphic Style".
    • Create your button using a text box, state button, or imported image.
    • Apply a graphic style to your custom menu button.
    • Define the button name in the "Custom Menu Class" field.
  • The remaining options apply to the default generated button styling.
  • Close Button Configuration section:
  • Close Button Type: This setting offers the choice of a default text close button or a custom button. Similarly to the main Navigation Menu Setup section above, you can add a custom file with the Close Image- Filename setting.
  • Close Image Width and Height apply to the custom close button.
  • Close Text defines the text used for the text-based close button.
  • The remaining styling buttons also apply to the text-based closed button.

Left and Right Block widget elements: The following instructions apply to both widget elements...

  • Menu Block Color: This setting allows for control of the menu block background. You may use separate colors for the left and right blocks.
  • The remaining settings in the Setup & Style section apply to link text styling, font, margins, and number of links.
  • The Link Setup section is where you will enter link labels and URL's for each menu item.

The Menu Conrtoller placement determines where the menu button will appear, but the Left and Right Block widget elements may be placed out of the way, off canvas in Muse Design mode

This widget is not responsive. It is useful for larger desktop sites or breakpoints, though other navigation options should be considered for tablet and mobile sizes

Commonly Asked Questions

No commonly asked questions

Known Issues/Conflicts

No known issues or conflicts

Additional Info Links