This forum has moved to a new location and is in read-only mode. Please visit talk.octobercms.com to access the new location.

that0n3guy
that0n3guy

I stole this from the "flat" theme with a couple of modifications. I don't really use this anymore (now that the static-pages plugin has menus), but in case anyone wanted an easy way to create menus for bootstrap:

{# Note: Only one levels of sublinks are supported by Bootstrap 3 #}
{% set
    links = {
        'home': ['home', 'Home'],
        'blog': ['blog/blog', 'Blog'],
        'services': {
            name: 'Services',
            sublinks: {
                'financial-planning':         ['services/financial-planning', 'Financial Planning'],
                'disability-insurance':       ['services/disability-insurance', 'Disability Insurance'],
                'life-insurance':      ['services/life-insurance', 'Life Insurance'],
            },
        },
        'quotes': {
            name: 'Quotes',
            sublinks: {
                'disability-insurance-quote': ['quotes/disability-insurance-quote-request', 'Disability Insurance Quote'],
                'life-insurance-quote': ['quotes/life-insurance-quote-request', 'Life Insurance Quote'],
            },
        },
        'contact-us': {
            name: 'Contact/About Us',
            sublinks: {
                'contact': ['contact-us', 'Contact Us'],
                'about-us': ['about-us', 'About Us'],
            },
        }
    }
%}

{% macro render_menu(links) %}
    {% for code, link in links %}
        <li class="{{ code == currentPage ? 'active' }} {{ link.sublinks ? 'dropdown' }}">
            <a
                    href="{{ link.sublinks ? '#' : (link.page ?:link[0])|page }}"
                    {% if link.sublinks %}data-toggle="dropdown"{% endif %}
                    class="{{ link.sublinks ? 'asdf' }}"
                    >
                {{ link.name ?: link[1] }}
                {% if link.sublinks %}<span class="caret"></span>{% endif %}
            </a>
            {% if link.sublinks %}
                <span class="dropdown-arrow"></span>
                <ul class="dropdown-menu">
                    {{ _self.render_menu(link.sublinks) }}
                </ul>
            {% endif %}
        </li>
    {% endfor %}
{% endmacro %}

{% import _self as nav %}

<nav id="navbar" class="navbar navbar-white" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="/" title="Home" rel="home" id="logo" class="">
                <img src="{{ 'assets/images/logo-oneline.png'|theme }}" alt="Home" id="logo"/>
            </a>
        </div>
        <div class="collapse navbar-collapse navbar-main-collapse">
            <ul class="nav navbar-nav navbar-right">
                {{ nav.render_menu(links) }}
            </ul>
        </div>
    </div>
</nav>

The first variable in the array (example services/financial-planning) is the page directory/filename, not the url. The url is specified in the page.

I don't know if anyone will ever use this, but here it is.

Last updated

1-1 of 1

You cannot edit posts or make replies: the forum has moved to talk.octobercms.com.