From 4e3f0687a250d05864e138b8e32e2fb1bd920914 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marek=20Noco=C5=84?= <mnocon@users.noreply.github.com>
Date: Fri, 27 Jun 2025 16:05:13 +0200
Subject: [PATCH 1/2] Docs: Add Menu component to Twig Components documentation

---
 docs/templating/components.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/templating/components.md b/docs/templating/components.md
index adcd682604..18519a8bf1 100644
--- a/docs/templating/components.md
+++ b/docs/templating/components.md
@@ -61,6 +61,7 @@ You can use an unique group name when creating a Twig Component to create your o
 | [Template](https://github.com/ibexa/twig-components/blob/main/src/lib/Component/TemplateComponent.php) | Renders a Twig template|`template` |
 | [Controller](https://github.com/ibexa/twig-components/blob/main/src/lib/Component/ControllerComponent.php) | Renders a Symfony controller |`controller` |
 | [HTML](https://github.com/ibexa/twig-components/blob/main/src/lib/Component/HtmlComponent.php) | Renders static HTML |`html` |
+| [Menu](https://github.com/ibexa/twig-components/blob/main/src/lib/Component/MenuComponent.php) | Renders a menu based on a menu item identifier |`menu` |
 
 ## Example
 

From c5e6526ce5fdd99771a426ea57b5d244702b9aca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marek=20Noco=C5=84?= <mnocon@users.noreply.github.com>
Date: Fri, 27 Jun 2025 16:29:39 +0200
Subject: [PATCH 2/2] Docs: Extend Twig Components YAML example with Menu
 component

---
 .../components/twig_components.yaml           | 50 +++++++++++--------
 docs/templating/components.md                 | 19 +++++--
 2 files changed, 45 insertions(+), 24 deletions(-)

diff --git a/code_samples/back_office/components/twig_components.yaml b/code_samples/back_office/components/twig_components.yaml
index bfcfc70e1e..4293c46b56 100644
--- a/code_samples/back_office/components/twig_components.yaml
+++ b/code_samples/back_office/components/twig_components.yaml
@@ -1,18 +1,5 @@
 ibexa_twig_components:
     admin-ui-user-menu:
-        custom-html-component:
-            type: html
-            arguments:
-                content: '<b>Hello world!</b>'
-        custom-template-component:
-            type: template
-            arguments:
-                template: '@ibexadesign/ui/component/user_thumbnail/user_thumbnail.html.twig'
-                parameters:
-                    user_content:
-                        name: "Thumbnail"
-                        thumbnail:
-                            resource: https://placecats.com/100/100
         custom-controller-component:
             type: controller
             arguments:
@@ -20,15 +7,17 @@ ibexa_twig_components:
                 parameters:
                     parameter1: 'custom'
                     parameter2: true
-    admin-ui-stylesheet-head:
-        custom-link-component:
-            type: stylesheet
+        custom-html-component:
+            type: html
             arguments:
-                href: 'https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&amp;display=fallback'
-                rel: stylesheet
-                crossorigin: anonymous
-                integrity: sha384-LN/mLhO/GN6Ge8ZPvI7uRsZpiXmtSkep+aFlJcHa8by4TvA34o1am9sa88eUzKTD
-                type: text/css
+                content: '<b>Hello world!</b>'
+    admin-ui-user-menu:
+        duplicated_user_menu:
+            type: menu
+            arguments:
+                name: ezplatform_admin_ui.menu.user
+                template: '@ibexadesign/ui/menu/user.html.twig'
+                depth: 1
     admin-ui-script-head:
         custom-script-component:
             type: script
@@ -39,3 +28,22 @@ ibexa_twig_components:
                 async: true
                 integrity: sha384-Ewi2bBDtPbbu4/+fs8sIbBJ3zVl0LDOSznfhFR/JBK+SzggdRdX8XQKauWmI9HH2
                 type: text/javascript
+    admin-ui-stylesheet-head:
+        custom-link-component:
+            type: stylesheet
+            arguments:
+                href: 'https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&amp;display=fallback'
+                rel: stylesheet
+                crossorigin: anonymous
+                integrity: sha384-LN/mLhO/GN6Ge8ZPvI7uRsZpiXmtSkep+aFlJcHa8by4TvA34o1am9sa88eUzKTD
+                type: text/css
+    admin-ui-global-search:
+        custom-template-component:
+            type: template
+            arguments:
+                template: '@ibexadesign/ui/component/user_thumbnail/user_thumbnail.html.twig'
+                parameters:
+                    user_content:
+                        name: "Thumbnail"
+                        thumbnail:
+                            resource: https://placecats.com/100/100
diff --git a/docs/templating/components.md b/docs/templating/components.md
index 18519a8bf1..4950abed55 100644
--- a/docs/templating/components.md
+++ b/docs/templating/components.md
@@ -56,12 +56,25 @@ You can use an unique group name when creating a Twig Component to create your o
 
 | Name | Description | YAML type |
 |---|---|---|
+| [Controller](https://github.com/ibexa/twig-components/blob/main/src/lib/Component/ControllerComponent.php) | Renders a Symfony controller |`controller` |
+| [HTML](https://github.com/ibexa/twig-components/blob/main/src/lib/Component/HtmlComponent.php) | Renders static HTML |`html` |
+| [Menu](https://github.com/ibexa/twig-components/blob/main/src/lib/Component/MenuComponent.php) | Renders a [menu](https://symfony.com/bundles/KnpMenuBundle/current/index.html) |`menu` |
 | [Script](https://github.com/ibexa/twig-components/blob/main/src/lib/Component/ScriptComponent.php) | Renders a [`<script>` tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script) | `script` |
 | [Stylesheet](https://github.com/ibexa/twig-components/blob/main/src/lib/Component/LinkComponent.php) | Renders a [`<link>` tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/link) | `stylesheet`
 | [Template](https://github.com/ibexa/twig-components/blob/main/src/lib/Component/TemplateComponent.php) | Renders a Twig template|`template` |
-| [Controller](https://github.com/ibexa/twig-components/blob/main/src/lib/Component/ControllerComponent.php) | Renders a Symfony controller |`controller` |
-| [HTML](https://github.com/ibexa/twig-components/blob/main/src/lib/Component/HtmlComponent.php) | Renders static HTML |`html` |
-| [Menu](https://github.com/ibexa/twig-components/blob/main/src/lib/Component/MenuComponent.php) | Renders a menu based on a menu item identifier |`menu` |
+
+For the menu component, the following properties are available:
+
+| parameter | type                 | required | description                    |
+|-----------|----------------------|----------|--------------------------------|
+| name      | string               | yes      | Menu name                      |
+| options   | array<string, mixed> | no       | Options passed to menu builder |
+| path      | string[]             | no       | Path to starting node          |
+| template  | string               | no       | Template used to render menu   |
+| depth     | int                  | no       | Menu depth limit               |
+
+The menu component, same as [back office menus](back_office_menus.md), relies on the [KnpMenuBundle](https://symfony.com/bundles/KnpMenuBundle/current/index.html).
+For more information about the available properties, refer to the [official documentation of the bundle](https://symfony.com/bundles/KnpMenuBundle/current/index.html#create-your-first-menu).
 
 ## Example