CSV - Sidebar Connect

http://www.muse-themes.com/products/sidebar-connect

Our powerful Sidebar Connect navigation system supports unlimited links and multiple levels of navigation.

Not only can you manage large amounts of items across many menu levels, Sidebar Connect also allows for content to be updated remotely by you or your client. Menu items can be managed using a local file (.csv spreadsheet), or online using Google Sheets. Online edits are instant and don't require access to your Muse site project.

Customization options include extensive styling control, menu transition effects, and access to 600+ icons via FontAwesome available for every panel within your Sidebar Menu.

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

Release Log

  • 1.6: Fixes error in accessing Google Sheets data (08/26/2021)
  • 1.5: Added ability to unlink menu items: just leave URL field blank in spreadsheet (01/13/2017)
  • 1.4: Increased breakpoint control from 10px down to single pixels in "Hide in Breakpoint Range" settings (12/16/2016)
  • 1.3: Fixes text alignment issues, as well as H1 tag text sizing bug. Also adds color control for arrows within menu items. (11/23/2016)
  • 1.2: Adds option for transparency in mobile menu button color selector (11/18/2016)
  • 1.1: Adds ability to hide in specific breakpoint ranges, disable links on menu items, positioning control of menu button, additional icon libraries, and better mobile handling (10/25/2016)



 



Setup

  • Download the widget package and extract the .zip file. You will find a Muse library file, along with a .csv menu template file.
  • Install the widget and drag the widget from the library and drop into your project in Design mode. The widget can be placed off canvas and out of the way. Page placement of the menu is automatically handled by the widget.
  • Open the widget option panel and choose a CSV File Type:
    • Local File - This option uses a CSV file to control menu elements: text, ordering, icons, etc. CSV files can be edited using any spreadsheet editor such as Excel, Numbers, and Google's Sheets web app. The CSV file included with the widget is a template that can be updated however you like (please see guidelines on editing CSV files below)
    • Google Spreadsheet - Using Google's Sheets web app, you can update your Sidebar menu in realtime. Click the link at the bottom of the widget option panel to go to our Google Sheets web-based template (the web version is identical to the .csv file in the beta package). See below for details on acquiring your Google Spreadsheet Key and editing the web-based template.

  • Once you load a local .csv file or enter your Google Spreadsheet key, your Sidebar Menu will be functional. You can now preview in browser to check basic functionality.

  • Basic Settings Section - This section covers most of the basic master settings of the sidebar menu. A few settings to note:

    • Menu Pinning: This setting allows for the menu button to be either in a fixed position, or scroll with the page.
    • SubMenu Display Style: This setting allows for submenus to be displayed at either full page height, or stay constrained to the number of menu items in the submenu list.
    • “Icon” settings: There are 4 icon settings in this section (open button, close button, top parent icon, and submenu parent icon). These fields accept FontAwesome icons. Choose any of 600+ icons by visiting the FontAwesome icon library. Simply copy the ID (name) of the icon you wish to use, and paste it into the appropriate widget option panel field. A link to the FontAwesome library is also included in the widget option panel.
    • Body Overlay: As with many of our widgets, we’ve included a body overlay option. This places a color overlay (with opacity) over the entire page underneath the sidebar menu when it’s opened.

  • Open Button Styling Section: - This section contains all styling settings for the “hamburger” menu open button

  • Menu Logo Section - Like our previous Sidebar Offcanvas Menu, Our new Sidebar Connect widget allows you to use your own logo within the sidebar. Use this section to load the file, as well as add a link and alt text (used for SEO purposes)

  • Menu Styling Section - This section contains all style settings for the menu and menu items. Set fonts, colors, padding, and more.

  • Mobile Menu Section - This section contains all of the settings used for controlling the sidebar layout on smaller mobile breakpoints. Set the mobile breakpoint width, and styling settings for the parent indicator only seen on mobile sizing.


Editing the web-based Google Spreadsheet template

  • 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 link in the bottom of the widget panel to open the template.
  • 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 Sidebar Menu. Go to File > Publish to the web...
  • Click the "Web Page" dropdown and select comma-separated values (.csv).
  • Click “Publish".
  • Copy the long set of random characters in the browser's URL field, or in the link shown in the Publish To Web pop-up.
  • Paste this Google Spreadsheet Key into the Sidebar Menu option panel in Muse


Tips for editing CSV files

  • Once you've published your Google Spreadsheet, ANY change made to the spreadsheet will be updated on your website. This is handy and quick, though you will want to be careful to make sure that your changes are exactly what you want.
  • The data within the CSV must be entered carefully:
    • Spaces are not supported supported in entries aside from the "text" column
    • Only numbers are allowed in the menu_id column (letters will not work)
    • Do not create empty rows
  • Check your progress often while editing CSV files. Small errors such as spaces or typos can make it so that your sidebar menu does not appear. If you’re working with a local file, save and load the file into the widget, then publish to check for functionality. If you’re working in Google Sheets, simply preview your sidebar and refresh the browser to see ongoing updates. If you do an issue, use the “undo” function in your spreadsheet editor to back up to a point where the widget was working.


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