#77

Product support

Get help in the plugin support forum.

Categories

  • Utility

The Menu Lists plugin allows an administrator to create menu lists through an intuitive drag and drop user interface. Create lists or menus quickly and easily with Menu Lists!

Features

  • Links to anywhere on the web
  • Links to Pages, Blog posts/categories
  • Drag and drop reordering and nesting
  • Add large numbers of menu items quickly and easily
  • Fully extensible - ability to add support for any other item type, for example Product or Category pages.
  • Fully customisable - A large number of customisation options. See the Documentation tab.
  • Disable menu items and their children

See it in Action

A quick demonstration of replacing Travu theme's built in menu with one created using the Menu Lists plugin in under 5 minutes.

  • 0:00 - The default Travu theme Menu
  • 0:06 - Creating a menu
  • 0:26 - Adding a menu item
  • 1:22 - Adding menu component to layout
  • 1:52 - Replacing the built in menu with the menu component
  • 2:30 - Adding the Download button

Source

Menu Lists is an open source project and pull requests are welcome. View the source over on GitHub.

Have a feature suggestion? Found a bug or need support?

Please use the contact form on my website and I'll get back to you as soon as possible. I usually respond within a few hours depending on timezone differences.

Nest and order your menu items

Installation

Go to System - Updates and in the search field enter Flynsarmy.Menu

Usage

  • In the Menu section of admin, create a menu. Give it a name and add some fields on the Fields tab.
  • Add the Menu component to your page/layout.
  • Add the following to your page/partial/layout
    {% component "menu" %}

Highlighting the Current Page

Often you'll want the current page highlighted in your menu. This can be done by setting the Selected Item ID field in your menu item then passing a selected_item argument to the menu component like so:

{% component "menu" selected_item=this.page.title|lower %}

The above passes the current page title (in lower case) to the menu. So if your page title was 'Contact Us', your field with the Selected Item ID 'contact us' will be highlighted. Selected items get a menu-item-selected class added to their class list. This can be changed by passing a selected_item_class argument to the component.

Custom Menu Markup

Menu Lists integrates seamlessly into just about any website by supporting a huge number of customisation options listed below:

Option Default Value Accepts
selected_item_class menu-item-selected -
has_children_class menu-item-has-children -
depth_prefix menu-item-level- -
depth 0 -
before_menu <ul id="%3$s" class="menu menu-%1$s %4$s"> id, name, id_attrib, class_attrib, short_desc
after_menu </ul> id, name, id_attrib, class_attrib, short_desc
before_item <li id="%2$s" class="menu-item menu-item-%1$s %3$s"> id, id_attrib, class_attrib, depth, title
after_item </li> id, id_attrib, class_attrib, depth, title
before_url_item_label <a href="%1$s" title="%6$s" class="menu-title" target="%7$s"> url, id, id_attrib, class_attrib, depth, title, target
after_url_item_label </a> url, id, id_attrib, class_attrib, depth, title
before_nourl_item_label <span class="menu-title"> id, id_attrib, class_attrib, depth, title
after_nourl_item_label </span> id, id_attrib, class_attrib, depth, title
always_show_before_after_children false -
before_children <ul class="menu-children"> -
after_children </ul> -

The above customisation options are passed to your component as arguments like so:

{% component 'menu' selected_item_class='active' %}

Options have values passed to them using PHP's printf function.

Megamenu support - the Partial Menu item Type

Menu Lists supports the use of CMS Partial's in menus. This allows for incredibly powerful and customisable menus as literally anything you'd normally place in a partial can now be displayed in your menu.

By default, before_item and after_item aren't included in Partial item types as they are in every other type. If you want them, they can be added like so:

{{ before_item|raw }}
    {# your partial content here #}
{{ after_item|raw }}
  • Found the plugin useful on 14 Sep, 2015

    Works great. Simple is good for this sort of thing.

  • Found the plugin useful on 6 Apr, 2015

    Has the makings of a powerful menu plugin, but not quite there yet.

  • Found the plugin useful on 16 Aug, 2014

    I really like this plugin. Its easy to use and easy to understand.

  • Found the plugin not useful on 12 Aug, 2014

    No support for dropdown menus when you are using foundation or bootstrap framework which is a deal breaker for me at least.

1.0.21

Fix issue causing menu items to disappear on save

Oct 16, 2016

1.0.20

Menu save fix

Jul 11, 2016

1.0.19

Deprecated code fix

Jul 11, 2016

1.0.18

Deprecated code fix

May 21, 2016

1.0.17

Fix nested tree bug

Apr 11, 2015

1.0.16

Settings page code cleanup

Mar 15, 2015

1.0.15

RC compatibility

Feb 21, 2015

1.0.14

Menu Item data field should be nullable

Jan 12, 2015

1.0.13

Link fields can now be left empty - will produce a

Jan 12, 2015

1.0.12

Don't show disabled menu items

Sep 25, 2014

1.0.11

Add slug parameters option for Page items

Aug 28, 2014

1.0.10

Remove comma in item links

Aug 14, 2014

1.0.9

Add link target attribute, improved UI

Aug 14, 2014

1.0.8

Delete menu items when deleting menus. Minor UI improvements

Jul 29, 2014

1.0.7

Fix nesting issue

Jul 28, 2014

1.0.6

Use October styles for item type selection list

Jul 27, 2014

1.0.5

Validation compatibility fix for October v117

Jul 12, 2014

1.0.4

Event binding fixes

Jul 04, 2014

1.0.3

Pass the current controller to menus and items so page/layout components apply

Jul 01, 2014

1.0.2

Add before_item and after_item helpers for Partial item type

Jun 27, 2014

1.0.1

Plugin Initialization

Jun 27, 2014