Create complex tree menus in Sulu with sections, image items, external url, custom url, etc..
Add SuluMegamenuBundle in your composer.json:
composer require the-cocktail/sulu-megamenu-bundle
Register the bundle in your config/bundles.php
:
<?php
// config/bundles.php
return [
// ...
TheCocktail\Bundle\MegaMenuBundle\SuluMegamenuBundle::class => ['all' => true],
// ...
];
Update your data with:
bin/console doctrine:schema:update --force
Or execute the following SQL: (recomended: use doctrine migrations to generate diff migration)
CREATE TABLE mm_menuitem (id INT AUTO_INCREMENT NOT NULL, media_id INT DEFAULT NULL, parent_id INT DEFAULT NULL, resource_key VARCHAR(255) NOT NULL, webspace VARCHAR(255) NOT NULL, title VARCHAR(255) NOT NULL, locale VARCHAR(255) NOT NULL, uuid VARCHAR(255) DEFAULT NULL, link VARCHAR(255) DEFAULT NULL, position INT NOT NULL, INDEX IDX_D6C6460BEA9FDD75 (media_id), INDEX IDX_D6C6460B727ACA70 (parent_id), PRIMARY KEY(id)) DEFAULT CHARACTER SET utf8mb4 COLLATE `utf8mb4_unicode_ci` ENGINE = InnoDB;
ALTER TABLE mm_menuitem ADD CONSTRAINT FK_D6C6460BEA9FDD75 FOREIGN KEY (media_id) REFERENCES me_media (id);
ALTER TABLE mm_menuitem ADD CONSTRAINT FK_D6C6460B727ACA70 FOREIGN KEY (parent_id) REFERENCES mm_menuitem (id)
# config/routes/sulu_admin.yaml
sulu_megamenu_api:
resource: "@SuluMegamenuBundle/Resources/config/routing_api.yaml"
type: rest
prefix: /admin/api
Add config/packages/sulu_megamenu.yaml
with your desired menus:
sulu_megamenu:
menus:
header_top:
title: 'Header Top'
header:
title: 'Header'
footer:
title: 'Footer'
footer_bottom:
title: 'Footer Bottom'
Make sure you've set the correct permissions in the Sulu backend for this bundle!
Settings > User Roles
This function will render the default template
{{ sulu_megamenu_render('header') }}
Custom template as argument
{{ sulu_megamenu_render('header', 'menu/header.html.twig') }}
Additional parameters
{{ sulu_megamenu_render('header', 'menu/header.html.twig', request.webspaceKey, app.request.locale) }}
Get items to reuse in diferent context
{% set items = sulu_megamenu_get('header') %}
{% include 'menu/desktop.html.twig' %}
{% include 'menu/mobile.html.twig' %}
Additional parameters:
{{ sulu_megamenu_get('header', request.webspaceKey, app.request.locale) }}