Skip to content

[Twig Components] Added Menu component #2799

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Aug 5, 2025
Merged

[Twig Components] Added Menu component #2799

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f41311b
Docs: Add Menu component to Twig Components documentation
mnocon Jun 27, 2025
bd89441
Docs: Extend Twig Components YAML example with Menu component
mnocon Jun 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 31 additions & 23 deletions code_samples/back_office/components/twig_components.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,36 +1,24 @@
ibexa_twig_components:
admin-ui-user-menu:
custom-html-component:
type: html
priority: 0
arguments:
content: '<b>Hello world!</b>'
custom-template-component:
type: template
priority: 50
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:
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ordered the examples to match the order from the table

type: html
priority: 0
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
Expand All @@ -41,3 +29,23 @@ 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
priority: 50
arguments:
template: '@ibexadesign/ui/component/user_thumbnail/user_thumbnail.html.twig'
parameters:
user_content:
name: "Thumbnail"
thumbnail:
resource: https://placecats.com/100/100
18 changes: 16 additions & 2 deletions docs/templating/components.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,11 +60,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` |
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've ordered these entries alphabetically, no other changes here except adding the menu entry

| [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` |

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

Expand Down
Loading