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.
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 not useful on 7 May, 2018
make_menuitem_menu_id_nullable.php is broken. No support for PgSQL
-
Razaq Ogunlade
Found the plugin useful on 12 Jan, 2018
Very nice plugins, pls how can I add styles to the A<anchor> tag?
-
Nick Mealey
Found the plugin useful on 14 Sep, 2015
Works great. Simple is good for this sort of thing.
-
Dylan Jacob
Found the plugin useful on 6 Apr, 2015
Has the makings of a powerful menu plugin, but not quite there yet.
-
snirkum
Found the plugin useful on 16 Aug, 2014
I really like this plugin. Its easy to use and easy to understand.
-
Jared Meyering
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 |