Install Back Office dropdown navigation

Last updated:
Edit on GitHub

This document explains how to enable settable dropdown navigation in the Back Office.

Prerequisites

Install the following features:

NAME REQUIRED VERSION INTEGRATION GUIDE
Spryker Core ✅ 202410.0 Install the Spryker Core feature

1) Update the required modules

Update the required modules using Composer:

composer require spryker/gui:"^3.62.0" spryker/gui-extension:"^1.0.0"
Verification

Make sure the following modules have been installed:

MODULE EXPECTED DIRECTORY
Gui vendor/spryker/gui
GuiExtension vendor/spryker/gui-extension

2) Set up transfer objects

Generate transfers:

console transfer:generate
Verification

Ensure the following transfers have been created:

TRANSFER TYPE EVENT PATH
Link class created src/Generated/Shared/Transfer/LinkTransfer

4) Set up behavior

Enable the following behaviors by registering the plugins:

PLUGIN SPECIFICATION PREREQUISITES NAMESPACE
NavigationLinkTwigPlugin Extends Twig with the layout_navigation_items function to generate navigation items from plugins. Spryker\Zed\Gui\Communication\Plugin\Twig

src/Pyz/Zed/Twig/TwigDependencyProvider.php

<?php

namespace Pyz\Zed\Twig;

use Spryker\Zed\Gui\Communication\Plugin\Twig\NavigationLinkTwigPlugin;
use Spryker\Zed\Twig\TwigDependencyProvider as SprykerTwigDependencyProvider;

class TwigDependencyProvider extends SprykerTwigDependencyProvider
{
    /**
     * @return array<\Spryker\Shared\TwigExtension\Dependency\Plugin\TwigPluginInterface>
     */
    protected function getTwigPlugins(): array
    {
        return [
            new NavigationLinkTwigPlugin(),
        ];
    }
}
Verification
  1. Create a plugin implementing \Spryker\Shared\GuiExtension\Dependency\Plugin\NavigationPluginInterface
  2. Register the plugin in the getDropdownNavigationPlugins() method of the GuiDependencyProvider class

Make sure that, in the Back Office, the menu item is displayed in the dropdown navigation.