Design the user interfaces

#How to customize the main menu

The Akeneo menu is using the view extension architecture and is basically a tree of backbone views. You can use the one that we provide with the PIM (tab and item) or develop your own.

#Define a simple node at the root of the menu

To add an element at the root of the tree you can reuse the tab module provided by the pim as follow:

# src/Acme/Bundle/AppBundle/Resources/config/form_extensions/menu.yml
extensions:
    acme-custom-root-element:                          # The unique key of your extension
        module: pim/menu/tab                           # The module provided by akeneo for root elements
        parent: pim-menu                               # The parent is the root of the menu
        targetZone: mainMenu
        aclResourceId: my_custom_acl_key               # [optional] You can define a acl check - remove if this acl has not been created yet
        position: 110                                  # [optional] The position in the tree where you want to add the item
        config:
            title: pim_menu.item.import_profile        # You can define a translation key for the tab name
            to: pim_importexport_import_profile_index  # The route to redirect to

After running the command rm -rf var/cache; bin/console pim:install:asset; yarn run webpack your new item should appear at the root of the menu.

#Define a simple node inside a tab of the menu

Now if you want to add an element inside the menu, you can use the item module:

# src/Acme/Bundle/AppBundle/Resources/config/form_extensions/menu.yml
extensions:
    acme-custom-sub-element:                           # The unique key of your extension
        module: pim/menu/item                          # The module provided by akeneo for sub elements
        parent: acme-custom-root-element               # The parent is the tab we just created
        targetZone: item
        aclResourceId: my_custom_acl_key               # [optional] You can define a acl check - remove if this acl has not been created yet
        position: 110                                  # [optional] The position in the tree where you want to add the item
        config:
            title: pim_menu.item.import_profile        # You can define a translation key for the item name
            to: pim_importexport_import_profile_index  # The route to redirect to

After running the command rm -rf var/cache; bin/console pim:install:asset; yarn run webpack your new item should appear in the menu.

#Highlight menu elements

If you want the menu to be highlighted on your custom pages, you have to configure a new form extension in your custom page. The module responsible of highlighting the menu is pim/common/breadcrumbs. This module will both display the breadcrumbs and highlight the menu. You simply have to respectively configure its tab and item to the menu and sub menu declared above to automatically get the labels and links from the menu.

# src/Acme/Bundle/AppBundle/Resources/form_extensions/custom_page.yml
extensions:
    acme-custom-page:
        module: acme/custom_page

    acme-custom-page-breadcrumbs:
        module: pim/common/breadcrumbs
        parent: acme-custom-page
        targetZone: breadcrumbs
        config:
            tab: acme-custom-root-element
            item: acme-custom-sub-element

After running the command rm -rf var/cache; bin/console pim:install:asset; yarn run webpack the menu will be highlited when you will open your custom page.

#Use you own menu extension item

As you may have already guessed, with this system, you can develop your own menu item and add custom informations like notification badges or custom display.


Found a typo or a hole in the documentation and feel like contributing?
Join us on Github!