The Documentation tab on the marketplace page explains how to override the default menu structure. You pass arguments to your component like so:
{% component "menu" before_item='<li id="%2$s" class="menu-item menu-item-%1$s %3$s">' after_item='</li>' %}
Please see the documentation tab for a all customisation options.
yes. stupid me—just brushed over the document before i sent the first post to you. actually you can do cool stuff by injecting a partial.
Instead of going through all the work of providing all the before_item
, before_children
, etc... why not use your component partial (I noticed your not using them and are "rendering" your menu with a php partial instead) and just let the user override the component partials.
See minute 28:05 on http://octobercms.com/blog/post/mastering-components
I swiped this from one of the free themes.... but here is an easy way to do menu's:
{% set
links = {
'dashboard': {page: 'dashboard', name: 'Dashboard', icon: 'fa-dashboard'},
'legal': {
name: 'Legal Consideration',
icon: 'fa-gavel',
sublinks: {
'contracts': {page: 'legal/contracts', name: 'Contracts'},
'contracts-termination': {page: 'legal/contract-termination', name: 'Contract Termination'},
'compensation': {page: 'legal/compensation', name: 'Compensation'},
'malpractice': {page: 'legal/malpractice', name: 'Malpractice'},
'other': {page: 'legal/life-insurance', name: 'Other Considerations'},
},
},
'personal_finance': {
name: 'Personal Finance',
icon: 'fa-money',
sublinks: {
'fp': {page: 'personal_finance/Financial Planning', name: 'Financial Planning'},
'debt': {page: 'personal_finance/debts', name: 'Debt'},
'di': {page: 'personal_finance/di', name: 'Disability Insurance'},
'life': {page: 'personal_finance/life', name: 'Life Insurance'},
'investing': {page: 'personal_finance/investing', name: 'Investing'},
},
},
'practice_setting_consid': {
name: 'Practice Setting Considerations',
icon: 'fa-users',
sublinks: {
'empl_types': {page: 'practice_setting_consid/empl_types', name: 'Employer Types'},
'org_oper_diff': {page: 'practice_setting_consid/org_oper_diff', name: 'Organizational and Operational Differences'},
'medicare': {page: 'practice_setting_consid/medicare', name: 'Medicare - RVU & CPT Coding'},
},
}
}
%}
{% macro render_menu(links) %}
{% for code, link in links %}
<li class="{{ link.sublinks ? 'treeview' }} {{ code == currentPage ? 'active' }} ">
<a
href="{{ link.sublinks ? '#' : (link.page)|page }}"
{#{% if link.sublinks %}data-toggle="dropdown"{% endif %}#}
class="{{ link.sublinks ? '' }}"
>
<i class="fa {{ link.icon ? link.icon : "fa-circle-o" }}"></i>
<span>{{ link.name }}</span>
{% if link.sublinks %}
<i class="fa fa-angle-left pull-right"></i>
{% endif %}
</a>
{% if link.sublinks %}
<ul class="treeview-menu">
{{ _self.render_menu(link.sublinks) }}
</ul>
{% endif %}
</li>
{% endfor %}
{% endmacro %}
{% import _self as nav %}
{{ nav.render_menu(links) }}
Just replace the {% set links=...
with info from your plugin.
@flynsarmy
I created a pull request for this here: https://github.com/Flynsarmy/oc-menu-plugin/pull/3
Just an FYI
1-7 of 7