SyliusCon 2025 in Lyon
Join Us!
LogoLogo
🛣️ Roadmap💻 Sylius Demo💬 Community Slack
  • Sylius Documentation
  • Sylius Plugins
  • Sylius Stack
  • 📖Sylius Documentation
  • Organization
    • Sylius Team
  • Release Cycle
    • Backwards Compatibility Promise
  • Getting Started with Sylius
    • Installation
    • Basic Configuration
    • Shipping & Payment
    • First Product
    • Customizing the Shop
    • Customizing Business Logic
    • Using API
    • Installing Plugins
    • Deployment
    • Summary
  • The Book
    • Introduction to Sylius
    • Installation
      • System Requirements
      • Sylius CE Installation
        • Sylius CE Installation with Docker
      • ➕Sylius Plus Installation
      • Upgrading Sylius CE
      • Upgrading Sylius Plus
    • Architecture
      • Architecture Overview
      • Architectural Drivers
      • Resource Layer
      • State Machine
      • Translations
      • E-Mails
      • Contact
      • Fixtures
      • Events
    • Configuration
      • Channels
      • Locales
      • Currencies
    • Customers
      • Customer & ShopUser
      • ➕Customer Pools
      • AdminUser
      • Addresses
        • Countries
        • Zones
        • Addresses
        • Address Book
    • Products
      • Products
      • Product Reviews
      • Product Associations
      • Attributes
      • Pricing
      • Catalog Promotions
      • Taxons
      • Inventory
      • ➕Multi-Source Inventory
      • Search
    • Carts & Orders
      • Orders
      • Cart flow
      • Taxation
      • Adjustments
      • Cart Promotions
      • Coupons
      • Payments
      • 🧩Invoices
      • Shipments
    • 🎨Frontend & Themes
    • Support
    • Contributing
      • Contributing Code
        • Submitting a Patch
        • ⚠️Security Issues
        • Coding Standards
        • Conventions
        • Sylius License and Trademark
      • Contributing Translations
      • Key Contributors
  • The Customization Guide
    • Customizing Models
      • How to add a custom model?
      • How to add a custom translatable model?
    • Customizing Forms
      • How to add a live form for a custom model?
    • Customizing Templates
    • Customizing Styles
    • Customizing Dynamic Elements
    • Customizing Validation
    • Customizing Menus
    • Customizing Translations
    • Customizing Flashes
    • Customizing State Machines
    • Customizing Grids
    • Customizing Fixtures
    • Customizing API
    • Customizing Serialization of API
    • Customizing Payments
      • How to integrate a Payment Gateway as a Plugin?
  • 🧑‍🍳The Cookbook
  • How to resize images?
  • How to add one image to an entity?
  • How to add multiple images to an entity?
  • How to add a custom cart promotion action?
  • How to add a custom cart promotion rule?
  • Sylius 1.X Documentation
    • 📓Sylius 1.x Documentation
Powered by GitBook
LogoLogo

Developer

  • Community
  • Online Course

About

  • Team

© 2025 Sylius. All Rights Reserved

On this page
  • Admin Customer Show Menu
  • Admin Order Show Menu
  • Admin Product Form Tabs
  • Admin Product Variant Form Tabs
  • Shop Account Menu
  • Summary

Was this helpful?

Edit on GitHub
  1. The Customization Guide

Customizing Menus

PreviousCustomizing ValidationNextCustomizing Translations

Last updated 14 days ago

Was this helpful?

Sylius provides various menus across its Shop and Admin interfaces — from customer account navigation to product form tabs and button groups. In Sylius 2.0, menu customization is handled in two main ways:

  • – the recommended and default approach for most Admin “action button” menus

  • Event listeners – still available for structural menus such as sidebars and tabs

This guide walks you through customizing each type.

Path: /admin/ Customization method: Event listener Add new items or groups to the expandable navigation menu on the left side of the admin panel.

To add items to the Admin panel menu, use the sylius.menu.admin.main event.

🧠 Using Icons Sylius uses Symfony UX Icons to render scalable SVG icons from the Tabler Icons set. You’ll see these used in menu customization examples below via the ux_icon() Twig helper:

{{ ux_icon('tabler:plus', { class: 'icon' }) }}  

Icons can be styled using custom CSS or Tailwind utility classes and embedded in any Twig template to enhance admin or shop UI elements. For more details, see the .

Step 1. Create a listener

<?php

namespace App\Menu;

use Sylius\Bundle\UiBundle\Menu\Event\MenuBuilderEvent;

final class AdminMenuListener
{
    public function addAdminMenuItems(MenuBuilderEvent $event): void
    {
        $menu = $event->getMenu();

        $newSubmenu = $menu
            ->addChild('new')
            ->setLabel('Custom Admin Menu')
        ;

        $newSubmenu
            ->addChild('new-subitem')
            ->setLabel('Custom Admin Menu Item')
        ;
    }
}

Step 2. Register your listener

# config/services.yaml
services:
    app.listener.admin.menu_builder:
        class: App\Menu\AdminMenuListener
        tags:
            - { name: kernel.event_listener, event: sylius.menu.admin.main, method: addAdminMenuItems }

After these steps, your custom menu item will appear at the bottom of the admin menu.

Admin Customer Show Menu

Path: /admin/customers/{id} Customization method: Twig hook Add action buttons (e.g. “Create Customer”) to the top-right corner of the customer detail view.

In Sylius 2.0, the customer show menu uses a Twig hook: sylius_admin.customer.show.content.header.title_block.actions.

Step 1. Configure your new hook for the custom action

# config/packages/_sylius.yaml

sylius_twig_hooks:
    hooks:
        'sylius_admin.customer.show.content.header.title_block.actions':
            create:
                template: 'admin/customer/show/content/header/title_block/actions/create.html.twig'

Step 2. Add hook content

{# templates/admin/customer/show/content/header/title_block/actions/create.html.twig #}

<a href="{{ path('sylius_admin_customer_create') }}" class="dropdown-item">
    {{ ux_icon(action.icon|default('tabler:plus'), {'class': 'icon dropdown-item-icon'}) }}
    {{ 'sylius.ui.create'|trans }}
</a>

Admin Order Show Menu

Path: /admin/orders/{id} Customization method: Twig hook Add action buttons like “Complete Payment” to the order detail view.

This menu is built with a Twig hook: sylius_admin.order.show.content.header.title_block.actions.

Step 1. Configure your new hook for the custom action

# config/packages/_sylius.yaml

sylius_twig_hooks:
    hooks:
        'sylius_admin.order.show.content.header.title_block.actions':
            complete_payment:
                template: 'admin/order/show/content/header/title_block/actions/complete_payment.html.twig'

Step 2. Add hook content

{# templates/admin/order/show/content/header/title_block/actions/complete_payment.html.twig #}
{% set order = hookable_metadata.context.resource %}
{% set payment = order.getPayments.first %}

{% if sylius_sm_can(payment, constant('Sylius\\Component\\Payment\\PaymentTransitions::GRAPH'), constant('Sylius\\Component\\Payment\\PaymentTransitions::TRANSITION_COMPLETE')) %}
    <form action="{{ path('sylius_admin_order_payment_complete', {'orderId': order.id, 'id': payment.id}) }}" method="POST" novalidate>
        <input type="hidden" name="_method" value="PUT">
        <input type="hidden" name="_csrf_token" value="{{ csrf_token(payment.id) }}" />
        <button type="submit" class="dropdown-item" {{ sylius_test_html_attribute('complete-payment', payment.id) }}>
            {{ ux_icon('tabler:check', {'class': 'icon dropdown-item-icon'}) }}
            {{ 'sylius.ui.complete'|trans }}
        </button>
    </form>
{% endif %}

Admin Product Form Tabs

Path: /admin/products/new and /admin/products/{id}/edit Customization method: Twig hook Add custom tabs and form sections (e.g. for manufacturer details) to the product creation and edit forms.

This menu is built with the following Twig hooks:

/admin/products/new :

  • sylius_admin.product.create.content.form.side_navigation

  • sylius_admin.product.create.content.form.sections

/admin/products/{id}/edit:

  • sylius_admin.product.update.content.form.side_navigation

  • sylius_admin.product.update.content.form.sections

Step 1. Configure your new hook for the custom tab

# config/packages/_sylius.yaml

sylius_twig_hooks:
    hooks:
        'sylius_admin.product.create.content.form.side_navigation':
            manufacturer:
                template: 'admin/product/form/side_navigation/manufacturer.html.twig'

        'sylius_admin.product.create.content.form.sections':
            manufacturer:
                template: 'admin/product/form/sections/manufacturer.html.twig'

        'sylius_admin.product.update.content.form.side_navigation':
            manufacturer:
                template: 'admin/product/form/side_navigation/manufacturer.html.twig'
        
        'sylius_admin.product.update.content.form.sections':
            manufacturer:
                template: 'admin/product/form/sections/manufacturer.html.twig'

The template attribute should point to the file rendering your additional form fields.

Step 2. Create templates for your tab (side_navigation) and content (sections)

{# templates/admin/product/form/side_navigation/manufacturer.html.twig #}

<button
    type="button"
    class="list-group-item list-group-item-action {% if hookable_metadata.configuration.active|default(false) %}active{% endif %}"
    data-bs-toggle="tab"
    data-bs-target="#product-manufacturer"
    role="tab"
>
    Manufacturer
</button>
{# templates/admin/product/form/sections/manufacturer.html.twig #}

<div class="tab-pane {% if hookable_metadata.configuration.active|default(false) %}show active{% endif %}" id="product-manufacturer" role="tabpanel" tabindex="0">
    <div class="card mb-3">
        <div class="card-header">
            <div class="card-title">
                Manufacturer
            </div>
        </div>
        <div class="card-body">
            <div class="tab-content">
                Manufacturer content
            </div>
        </div>
    </div>
</div>

Admin Product Variant Form Tabs

Path: /admin/products/{productId}/variants/create and /admin/products/{productId}/variants/{id}/edit Customization method: Twig hook Add extra tabs for variants, such as a custom media section.

This menu is built with the following Twig hooks:

  • /admin/products/{productId}/variants/create :

    • sylius_admin.product_variant.create.content.form.side_navigation

    • sylius_admin.product_variant.create.content.form.sections

  • /admin/products/{productId}/variants/{id}/edit:

    • sylius_admin.product_variant.update.content.form.side_navigation

    • sylius_admin.product_variant.update.content.form.sections

Step 1. Configure your new hook for the custom tab

# config/packages/_sylius.yaml

sylius_twig_hooks:
    hooks:
        'sylius_admin.product_variant.create.content.form.sections':
            custom_media:
                template: 'admin/product_variant/form/sections/custom_media.html.twig'

        'sylius_admin.product_variant.create.content.form.side_navigation':
            custom_media:
                template: 'admin/product_variant/form/side_navigation/custom_media.html.twig'

        'sylius_admin.product_variant.update.content.form.sections':
            custom_media:
                template: 'admin/product_variant/form/sections/custom_media.html.twig'
                
        'sylius_admin.product_variant.update.content.form.side_navigation':
            custom_media:
                template: 'admin/product_variant/form/side_navigation/custom_media.html.twig'

Step 2. Create templates for your tab (side_navigation) and content (sections)

{# templates/admin/product_variant/form/side_navigation/custom_media.html.twig #}

<button
    type="button"
    class="list-group-item list-group-item-action {% if hookable_metadata.configuration.active|default(false) %}active{% endif %}"
    data-bs-toggle="tab"
    data-bs-target="#product-variant-custom-media"
    role="tab"
>
    Custom Media
</button>
{# templates/admin/product_variant/form/sections/custom_media.html.twig #}

<div class="tab-pane {% if hookable_metadata.configuration.active|default(false) %}show active{% endif %}" id="product-variant-custom-media" role="tabpanel" tabindex="0">
    <div class="card mb-3">
        <div class="card-header">
            <div class="card-title">
                Custom Media
            </div>
        </div>
        <div class="card-body">
            <div class="tab-content">
                Custom Media content
            </div>
        </div>
    </div>
</div>

Shop Account Menu

Path: /account/dashboard/ Customization method: Event listener Add a custom entry to the customer panel’s sidebar navigation.

Step 1. Create a listener

<?php

namespace App\Menu;

use Sylius\Bundle\UiBundle\Menu\Event\MenuBuilderEvent;

final class AccountMenuListener
{
    public function addAccountMenuItems(MenuBuilderEvent $event): void
    {
        $menu = $event->getMenu();

        $menu
            ->addChild('new', ['route' => 'sylius_shop_account_dashboard'])
            ->setLabel('Custom Account Menu Item')
            ->setLabelAttribute('icon', 'tabler:star')
        ;
    }
}

Step 2. Register your listener

# config/services.yaml
services:
    app.listener.shop.menu_builder:
        class: App\Menu\AccountMenuListener
        tags:
            - { name: kernel.event_listener, event: sylius.menu.shop.account, method: addAccountMenuItems }

Summary

If you're upgrading from Sylius 1.x and your menu customization is not working, check whether you're using a deprecated event and replace it with the appropriate Twig hook.

In Sylius 2.0, menu icons use the , not Semantic UI.

Twig hooks
Symfony UX Icons documentation
Tabler icon set