Menü

Das Menü kann ebenfalls mit einem Tailor-Blueprint umgesetzt werden - unser Glück, dass jemand bereits ein Blueprint geschrieben hat, den wir übernehmen und weiterentwickeln können:

Backend

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

Kopiere den Blueprint in die Datei `menu.yaml` und klicke speichern und migrieren. Nun sollte der neue Menüpunkt im Backend erscheinen, wo du ein neues Menü erstellen kannst.

Frontend

Anschliessend kann eine Tailor-Sektion-Komponente am gewünschten Ort im Theme (Layout oder Partial) hinzugefügt werden. Hier mögliche Einstellungen füür die Komponente:

Paramenter	Wert
Verknüpfung	menu
Identifikator	Menü (Menus)
Lookup Column	Slug
Lookup Value	hauptmenue

Die Lookup Column bestimmt, welche Spalte in der Datenbank zur Identifizierung des Eintrags dient und der Lookup Value, nach welchem Wert in dieser Spalte gesucht werden soll. In unserem Fall wird also der Eintrag genommen mit dem Wert `hauptmenue` in der Spalte `Slug`. Den Slug zu eurem erstellten Menü findet ihr auf der Menü-Detailansicht:

Die Einträge des Menüs kannst du nun folgendem Code ausgeben:

<nav>
    <ul>
        {% for item in items.toNested() %}
            <li>
                {% set href = (item.reference|link) %}
                {% set currentUrl = (''|page) %}
                <a href="{{ href }}" class="{{ href == currentUrl ? 'active' }}">
                    {{ item.title }}
                </a>
                {% if item.nesting and item.children %}
                    <ul>
                        {{ _self.renderItems(item.children) }}
                    </ul>
                {% endif %}
            </li>
        {% endfor %}
    </ul>
</nav>