CSV - Menu Connect


Menu Connect offers navigation menu options that are otherwise impossible with the built-in Muse menu, or any other widget for that matter. Menu Connect allows you to create expanding sub-menu dropdowns that animate into place to reveal icons, buttons, columns, separators and more.

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

Release Log

  • 1.1: Fixes error in accessing Google Sheets data (08/18/2021)
  • 1.0: Initial Release


Basic Setup

  • Drop the widget into Muse Design mode. Place the widget where you would like the menu to appear.
  • Note that you may move the widget up or down on the page to control the height of the menu when published.
  • Size the widget container to the appropriate size. In general, it is best to leave the widget container at the full width of your canvas.
  • Google Sheets URL: Enter the Share link of your Menu Connect Google Sheet. You will need to first make a copy of the Google Sheet Menu Template. See the Google Sheets Setup section below for details.
  • Google Sheet Menu Template: This link brings you to our pre-filled menu template spreadsheet. You will make a copy of this in order to create your own menu spreadsheet. See the Google Sheets Setup section below for details.
  • Icon Webfont Source: Our widget works with 3 icon sources: FontAwesome, Typicons, Ionicons, and custom fonts.
  • Custom Icon Webfont URL: If using custom fonts, enter the URL here.
  • Icon CSS Class Base: If using custom fonts, enter the class base here.

Styling Sections

  • Mobile Trigger Color: This setting sets the color of the hamburger menu icon seen in mobile mode.
  • Mobile Mode Breakpoint: This setting determines the point that the menu switches to mobile mode. When this happens, the text-based top menu (desktop) turns into a hamburger menu, intended for touch devices (mobile or tablet). When the menu is opened in mobile mode, a full screen menu appears with all menu items displayed in a vertical stack.

Styling Sections
The Styling sections: Top Level Styling and Dropdown Styling contain numerous styling options for things like fonts, text size, icon colors and more. These settings are labeled with their specific purpose and will not be discussed here in detail as they are self-explanatory. However, we will cover a few unique settings below.

  • Menu Align: This aligns the menu left, center or right. When utilizing left and right settings, use the widget container placement on canvas to determine the left or right edge. For center alignment, the widget should always be centered on the page.
  • Horizontal Padding: This provides additional padding (if needed) from the edge of where the widget container is placed. For example, if you align the widget with the right edge of the page, you can add some padding here so that there is space between the menu and the edge of the browser page.
  • Dropdown Top Offset: This setting creates an offset for the dropdowns. Increasing this value will make the dropdowns appear further below the menu items.
  • Center Button: This checkbox at the bottom of the Dropdown Styling settings centers any buttons you've used within the dropdown.

Menu Spreadsheet

Link: https://docs.google.com/spreadsheets/d/1R8l7xIi_Uw8MK5CnKB4j6UIw8x7qiWrIu3ijc2qLego/edit?usp=sharing

The content spreadsheet contains all of the key settings for the menu content. The columns in the spreaadsheet are labeled with their function. Here are some details and tips for editing the spreadsheet:

  • Title: This column sets the text that appears as all of the elements within your menu. This includes top level navigation, links, buttons and separators.
  • Parent: Use this column to place an item in a sub-menu dropdown. For example if you have several items to list under a top level of "Services", such as Web Design, Graphic Design and Marketing, set the parent for these items as "Services". This will place those services items in the Services dropdown.
  • Type: This column sets the type for every element of your menu. Choices are Link, Separator or Button
  • Order: Use this to order items within a dropdown.
  • Dropdown Style: This column determines the style of the dropdown. There are 3 options:
    • Standard: This selection displays a vertical list of items within the dropdown.
    • Columns: This selection displays a items in a 2-column format within the dropdown.
    • Icons: This selection displays a icons next to menu items. Note that this style uses the 2-column format, and is also the style of dropdown that allows subtitles.
  • Icon: Use this column to place specific icons. Each icon type (FontAwesome, Ionicons, Typicons and custom fonts) use unique codes for specific icons. Refer to the specific icon libraries to acquire the individual icon codes. Links to the icon libraries can be found in the widget panel, or below:
  • Subtitles: The "Icons" dropdown style allows for Subtitles. Enter your subtitles here. Leave blank for none.
  • URL: Enter menu links here. Note that full URL links are required. This means that you should know the final URL for all pages linked, or your site should be published.
  • Target: This determines whether links will open in the same window (self) or a new window (blank).

If you experience any intermittent issues with the banner content loading, or "script" errors, clearing your browser's cache should help

Google Sheets Setup

Here are detailed instructions and a few tips for customizing the template spreadsheet:

  • You will need a Google account and access to the free Sheets web app in order to edit the template (no Google account is required for viewing the template).
  • Follow the “Google Sheets Content Template” link in the widget panel to open the template. Or click here.
  • The template is view-only and cannot be edited as-is. Make a copy of the template: File > Make A Copy.
  • Name the new copy.
  • The new copy can now be edited.
  • When ready, you will need to publish the spreadsheet in order to use it with Gallery Connect. Go to File > Publish to the web…
  • Click the “Web Page” dropdown and select comma-separated values (.csv).
  • Click “Publish”.
  • Please refer to the next section “Acquiring your Google Spreadsheet URL”.

Acquiring Your Google Spreadsheet URL

This section explains the very important process of acquiring the Google Spreadsheet URL, which is pasted into the widget options. Note that if you’ve used our other Connect widgets, the process of acquiring the spreadsheet link is a little different. It must be acquired as described below.

  • Click the Share button in the upper right corner of the page.
  • Click the text “Get Sharable Link”
  • The link should now be copied to your clipboard. You may click “Copy link” just to be sure.
  • Paste this link into the Google Spreadsheet URL field in the widget options to link your spreadsheet with the widget.
  • Note that this is the only valid link to use with the widget. The browser URL or the URL provided when you publish your page will NOT work. The widget will display an error message when an invalid link is used.

Commonly Asked Questions

What is a .csv file?

A .csv file is a basic spreadsheet file that can be edited in Excel, Numbers, Google Sheets, or similar.

Should I use the web-based template, or the local file? What's the difference?

Ultimately, there's no difference in the functionality of the sidebar menu, whether you use the web template or the local template. Local files allow for traditional editing and backup in your favorite spreadsheet editor. The web template option allows for immediate remote updates for you or your client.

Known Issues/Conflicts

No known issues or conflicts

Additional Info Links