Docs: Extend Twig Components YAML example with Menu component

Author: mnocon

code_samples/back_office/components/twig_components.yaml

@@ -1,34 +1,23 @@
 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:
                 controller: '\App\Controller\MyController::requestAction'
                 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

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