Menu Lists

Create flexible menus straight from October CMS admin

Back to Menu Lists Support

cmdillon
cmdillon

hi! i was wounder how to override the default menu structure?

Flynsarmy
Flynsarmy

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.

cmdillon
cmdillon

@flynsamy: thanx for the info...

Flynsarmy
Flynsarmy

Did I answer your question? Was there anything specific you were wondering?

cmdillon
cmdillon

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.

that0n3guy
that0n3guy

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.

that0n3guy
that0n3guy

@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