Слушайте, а при создании навигации на Tailor рили нельзя определять

активный пункт навигации, как в Static Pages?

В оф демо теме тоже показано как можно сделать

+

Не знаю актуально тебе еще или нет. Но мало ли плюсов насыпят. Как я делаю активацию пункта меню. Совместно с alpine.js но логику можно организовать и ванильном или вообще только на пыхе, например через компонент или на худой конец прямо в разметке. 1. В чертеже menuItem есть поле area: label: 'Активация пункта меню' type: dropdown span: full tab: 'Настройки' options: blog: 'Все страницы блога' page: 'Все текстовые траницы' emptyOption: 'Прямая проверка URL' В options я указываю зоны. Например для страниц блога post.htm, category.htm и posts.htm зона одна = blog. Это нужно что бы в последствии при нахождении на любой странице блога подсветить конкретную ссылку в меню. Можно сделать отдельный компонент mainMenu и через мой плагин xGlobal сделать его глобальным. Или сделать корневой компонент app и указать его x-data в body элементе. А там соответственно реализовать логику меню. В компоненте есть такой биндинг: bindLink: { [':class']() { if (!checkArea) { return; } let area = this.$el.dataset.area, href = this.$el.href; if (area) { return (this.navArea == area) ? '--active' : ''; } else { return (href == window.location.href) ? '--active' : ''; } } } Соответственно он биндится к ссылке примерно так: {% for item in menu.items %} <a href="{{ item.page | link }}" target="{{ (item.is_external) ? '_blank' : '_self' }}" data-area="{{ item.area }}" class="menu__item" x-bind="bindLink">{{ item.title }}</a> {% endfor %} Ну и что бы у нас заработали зоны нужно в x-init на каждой странице установить активную зону. Например так: <div x-init="navArea = 'blog'"> <h1>{{ post.title | raw }}</h1> </div>

+ спасибо 🙂

У этой схемы только один минус. Если у тебя в меню будет ссылка с активацией на зону. Например все посты блога. И ссылка из меню на конкретную статью блога. То при переходе на эту статью будет подсвечено 2 ссылки в меню. Но я уверен что это можно решить. Просто пока не копал в этом направлении. На текущий момент мне достаточно такой схемы

Можно еще рекурсивно с низу вверх не поднять до родителя js’ом, если активен вложенный элемент. А если рекурсивно построены ссылки, то можно еще по началу пути смотреть и активировать нужный элемент. А-ля: - /blog/ - страница с постами блога - /blog/category/:slug - категория блога - /blog/post/:slug - пост Все начинается на /blog/ - подсвечиваем соответствующий пункт.

Даже звучит страшно) Хотя смысл примерно понял.

В целом звучит куда проще чем расписанные группы и обвязка логики. Если элемент меню вложенный - значит у него есть родитель. Значит мы можем до него подняться js’ом, чем навешивать группы в админке, создавая нагрузку на администратора проекта, условия в twig и столбец в БД… А closest() весьма оперативно найдет рутовый элемент родителя при правильно организованной вложенности верстки. ) Другой вопрос если вложенность динамическая. хотя тоже срабатывало))

Я возможно попробую такой вариант реализовать у себя потом. В целом интересная логика. И возможно будет универсально работать

+ за консультацию в личке)

+ отличная была консультация!)

@banofbot

Стикер