October CMS Tailor Menu Editor

menus.yaml

uuid: 2160ab8b-0b0d-4009-9e49-ddd5937dedf6
handle: Menus
type: entry
name: Menü
drafts: false
pagefinder: false

customMessages:
    buttonCreate: Neues Menü

primaryNavigation:
    label: Inhalt
    icon: ph ph-pencil-circle
    order: 130

navigation:
    label: Menüs
    parent: Menus
    icon: icon-sitemap
    order: 300

columns:
    title:
        label: Title
    entry_type_name:
        label: Menu Type
        invisible: false
    slug:
        label: Code
        invisible: false

fields:
    slug:
        label: Code
        validation:
            - required
    items:
        label: Menu Items
        type: nesteditems
        span: adaptive
        maxDepth: 0
        customMessages:
            buttonCreate: Eintrag hinzufügen
            titleCreateForm: Eintrag erstellen
            titleUpdateForm: Eintrag bearbeiten
        form:
            fields:
                title:
                    label: Titel
                    tab: Referenz
                    default: Neuen Menüeintrag
                    span: full
                    type: text
                    autoFocus: true
                    validation:
                        - required

                reference:
                    label: Verweist auf
                    type: pagefinder
                    tab: Referenz
            tabs:
                fields:
                    is_hidden:
                        label: Ist versteckt
                        comment: Diesen Menüeintrag auf der Website verstecken
                        type: checkbox
                        tab: Anzeige

                    code:
                        label: Code
                        comment: Eindeutiger Code um den Menüeintrag in Templates zu identifizieren
                        tab: Attribute
                        span: auto
                        type: text
                        preset:
                            field: title
                            type: slug

                    css_class:
                        label: CSS-Klasse
                        comment: CSS-Klasse für dieses Element
                        tab: Attribute
                        span: auto
                        type: text

                    is_external:
                        label: In neuen Tab öffnen
                        comment: Der Link für diesen Menüeintrag wird in einem neuen Tab geöffnet
                        tab: Attribute
                        type: checkbox

                    nesting:
                        label: Kindelemente anzeigen
                        shortLabel: Verschachtelung
                        comment: Kindelemente werden ebenfalls geladen und agezeigt
                        type: checkbox
                        tab: Referenz
                        column: false

                    replace:
                        label: Diesen Eintrag mit den Kindelementen ersetzen
                        comment: Es werden nur die Kindelemente angezeigt, dieser Eintrag selbst aber nicht
                        type: checkbox
                        tab: Referenz
                        column: false
                        scope: false
                        trigger:
                            action: disable|empty
                            field: nesting
                            condition: unchecked

navigation.htm

{% macro renderItems(items) %}
    {% for item in items %}
        {% if not item.replace %}
            <li>
                {% set href = (item.reference|link) %}
                {% set currentUrl = (''|page) %}
                <a 
                    href="{{ href }}" 
                    class="{{ href == currentUrl ? 'active' }} {{ item.css_class ? item.css_class }}"
                    {% if item.is_external %}
                        target="_blank"
                    {% endif %}
                 >
                    {{ item.title }}
                </a>

                {% if item.nesting and item.children %}
                    <ul>
                        {{ _self.renderItems(item.children) }}
                    </ul>
                {% endif %}
            </li>
        {% elseif item.children %}
            {{ _self.renderItems(item.children) }}
        {% endif %}
    {% endfor %}
{% endmacro %}

<nav>
    <ul>
        {{ _self.renderItems(menu.items.toNested()) }}
    </ul>
</nav>