richardhj/contao-knp-menu

Wrapper extension for knp-menu.

1.3.1 2024-01-04 20:14 UTC

Requires

• php: >=7.4
• contao/core-bundle: ^4.9 || ^5.0
• knplabs/knp-menu-bundle: ^2.2. || ^3.0
• symfony/config: ^4.4 || ^5.0 || ^6.0
• symfony/http-kernel: ^4.4 || ^5.0 || ^6.0

Requires (Dev)

• contao/easy-coding-standard: ^4.0
• contao/manager-plugin: ^2.7

MIT

• Richard Henkenjohann

README

Provides Contao navigation modules as instances of KnpMenu.

This extension is stable and supported from Contao >=4.9 and will be integrated into the Contao Core at some time, see contao/contao#3838.

Install

Via Composer

$ composer require richardhj/contao-knp-menu

Usage

Retrieve a navigation module by its alias

For any navigation module in the Contao backend, you can define an alias. You can now retrieve this navigation by its alias:

{% set menu = knp_menu_get('main_navigation') %}

You can also override some settings in the navigation module:

{% set menu = knp_menu_get('main_navigation', [], { 'showHidden': true, 'showProtected': true }) %}

Use a default navigation

You don't necessarily need to create a navigation module. Just use the special key 'contao' and configure it with the third parameter where necessary.

{% set menu = knp_menu_get('contao', [], { 'defineRoot': 1 }) %}

Render a menu within a twig template

This extension was created to have maximum flexibility in rendering the navigation, thus the extension does not provide a base template. This is an example of retrieving and parsing a simple navigation within a twig template.

<div class="flex items-center justify-between py-2">
    {% set menu = knp_menu_get('main_navigation') %}
    <nav itemscope itemtype="http://schema.org/SiteNavigationElement">
        {% block navigation %}
            {% import '@KnpMenu/menu.html.twig' as knp_menu %}
            <div class="flex">
                {% for item in menu.children|filter(v => v.isDisplayed) %}
                    {% if item.current %}
                        <strong class="inline-block font-bold text-blue-800 px-3 py-2 leading-5"
                                aria-current="page">
                            <span {{ knp_menu.attributes(item.labelAttributes) }}>{{ item.label }}</span>
                        </strong>
                    {% else %}
                        <a href="{{ item.uri }}" {{ knp_menu.attributes(item.linkAttributes) }}
                           class="inline-block px-3 py-2 font-normal leading-5 text-gray-500 hover:text-gray-700 focus:outline-none focus:text-blue-400 transition duration-150 ease-in-out"
                           itemprop="url">
                            <span itemprop="name" {{ knp_menu.attributes(item.labelAttributes) }}>{{ item.label }}</span>
                        </a>
                    {% endif %}
                {% endfor %}
            </div>
        {% endblock %}
    </nav>
</div>

Development notes:

Code style:

vendor/bin/ecs check --fix