Skip over navigation
Documentation
You are currently viewing documentation for version 3.0 which is not a long-term support release. The latest long-term support release is version 1.6

Customizing a Menu

Generic Principles

A menu may be multi-level like, for example, a default OroCRM and OroCommerce Management Console main menu. The child menu items are nested under parent menu items (e.g. Accounts, etc are nested under the Customers).

../../../_images/menus_general.png

Menu items on the same level of hierarchy may be visually separated by a divider that looks like a horizontal line.

../../../_images/user_menu.png

Dividers help you logically organize menu items.

Note

Some menus do not support displaying dividers (on a particular level in the tree, or in general). For example, if you add a divider to the top level of OroCRM and OroCommerce Management Console main menu (application_menu), the divider is not displayed.

../../../_images/ApplicationMenu.png

Edit a Menu

To view and edit menu contents, click on the menu name or on the View icon in the corresponding row of the menu list.

../../../_images/Menus.png

On the page that opens, the menu item tree is shown in the left panel. Center is reserved for the menu item configuration.

../../../_images/menus_general.png

Toggle the Menu Tree View

Hide / Show the Menu Tree

To minimize or maximize the left menu panel, click a double arrow on the top right of the panel.

../../../_images/menus_application_showpanel.png

Expand / Collapse a Menu Tree

To expand / collapse a parent menu item, click an arrow in front of it.

../../../_images/menus_application_expand.png

To expand / collapse all menu items, click the ellipses drop-down menu on the top right of the left panel and click Expand All or Collapse All.

../../../_images/menus_application_expall.png

Rearrange Menu Items / Dividers

You can change the position of an item / divider in a menu by dragging and dropping it in the left panel. You can change the order of menu items at the same level as well as move an item / divider to the higher or lower level.

When you drag-and-drop items, pay attention to the arrow that shows where the item will be placed:

  • If an arrow points to the place between items, that is where the moved item will be placed.

    ../../../_images/menus_actions_d&dsame.png
  • If and arrow appears in front of a menu item, then the moved item will become a child of the item that the arrow points to.

    ../../../_images/menus_actions_d&dunder.png

Add a Menu Item

  1. In the left panel, click a menu item which will be parent for the menu item that you create.

  2. Click Create drop-down on the top right and click Create Menu Item on the list.

    ../../../_images/menus_createmenuitem.png

    The created menu item will appear as the last one on the list of children of the same parent item. You can move it to the position that you need, as described in the Rearrange Menu Items / Dividers action description.

  3. In the right part of the page, specify the following information:

    • Title—A name for the menu item. This is how this menu item will be represented in the menu.

      Click the Translations icon to provide spelling for different languages. Click the same icon again to return to the single-language view.

      ../../../_images/menus_actions_create_translations.png
    • URI—An web address of the page or resource that this menu item opens.

      You can specify an absolute URI or one relative to the application URI (as specified in Application Settings in System Configuration).

      If this menu item serves as a non-clickable parent that does not link itself to any resource (like Customers in the default main menu), type #.

    • Icon—From the list, select the icon that will denote the menu item.

      Note

      Sometimes menus (or menu levels) may not be supposed to display icons. For example, icons added to the first level of the main menu (application_menu) are displayed only when this menu is set to appear on the left.

    • Description—Type a short but meaningful description of the menu item.

      Click the Translations icon to provide spelling for different languages. Click the same icon again to return to the single-language view.

    ../../../_images/menus_actions_create_general.png
  4. Click Save to save your changes. If you wish to start creating another menu item right away, click Save and New on the top right.

Important

You need to reload the page to see changes.

Edit a Frontend Menu

To update the frontend menu contents, follow the Customize Default Frontend Menus guide and click the menu name or on the View icon in the corresponding row of the frontend menu list.

../../../_images/frontend_menu_1.png

On the page that opens, the menu item tree is shown in the left panel. The General Information section is reserved for the menu item configuration, which you can update, as shown in the Add a Menu Item section.

../../../_images/frontend_menu_2.png

Moreover, you can customize additional visibility restrictions in the following fields in order to selectively display or hide some menu items from the customer:

User Agent

User agent is unique to every customer. It reveals a catalog of technical data about the device and software that the customer is using. You can control whether to show or hide some menu items from the customer by proceeding with the following steps:

  1. Click +Add next to the User Agent field.

The following text field displays:

../../../_images/frontend_menu_3.png
  1. Fill in the text field with a user agent substring or a string, if required.

Note

A user agent string is a combination of user agent application versions, operating systems, crawlers, and other scripts which are specific for each user (e.g. Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.113 Safari/537.36).

A user agent substring is a part of the aforementioned string (e.g. Mozilla, Windows, Safari, etc).

../../../_images/frontend_menu_4.png
  1. Select the corresponding operation from the list.

    • The contains operation determines whether the specified substring is included in the user agent string (e.g. in case you mention Mozilla, all the versions of Mozilla in the user agent string will meet the requirements of this function).
    • The does not contain operation determines whether the specified substring is not included in the user agent string.
    • The matches operation checks whether the specified value fully matches the user agent string (e.g. you need to provide a version of Mozilla to meet the requirements of this function).
    • The does not match operation checks when the specified value does not match the user agent string.
    ../../../_images/frontend_menu_5.png
  2. To create more advanced condition, you can combine constrains into the expression using logical AND and OR operators:

    • Click + And below the operation field within the same block to add another constrain block into the expression via AND.

      AND operation means that only those user agents that comply with all the specified conditions in a group will be selected.

    ../../../_images/frontend_menu_6.png
    • Click + Add at the bottom of the expression block to add another constrain block into the expression via OR.

      OR operation activates the expression once any of the constraint blocks in a group evaluates to true.

    ../../../_images/frontend_menu_7.png

Exclude On Screens

Exclude On Screens enables you to hide the menu items on the specified screens sizes.

  1. Click any screen size to select the one for which the menu will be hidden from the customer.
  2. Hold Ctrl and click the value to select/deselect multiple screens.
  3. Click Save.
../../../_images/frontend_menu_8.png

As an illustration, let us hide the About menu item from the desktops with 13 in. screen by enabling Exclude On Screens and selecting the corresponding screen size.

../../../_images/frontend_menu_9.png

Condition

Condition enables you to restrict visibility of a menu item using the following functions:

  • The is_logged_in() function stands for the registered users. If entered, only the users who have logged into the Oro storefront are enabled to view the corresponding menu item.

    ../../../_images/frontend_menu_10.png
  • The !is_logged_in() function stands for the non-registered users. If entered, only the unregistered users are enabled to view the corresponding menu item.

  • The config_value(‘some_identifier’) function limits visibility of the corresponding menu item upon specifying the certain value instead of ‘some_identifier’.

    As an example, let us make the About section in the storefront visible to customers with configured taxes. For this, we need to:

    1. Customize the config_value(‘some_identifier’) function with the required value instead of some_identifier. In our case, it is the oro_tax.tax_enable value.
    2. Click Save on the top right of the About menu page to save the changes.
    1. Enable Tax Calculation in the system configuration. More information on tax configuration can be found in the relevant Configure Tax Calculation topic.
    2. Click Save on the top right of the Tax Calculation configuration page.

    The steps are illustrated below:

    ../../../_images/frontend_menu_11.png ../../../_images/frontend_menu_12.png

Add a Divider

  1. In the left panel, click a menu item which will be parent for the menu divider that you create.
  2. Click Create drop-down on the top right and select Create Divider.
../../../_images/menus_createdivider.png

The created divider will appear as the last one on the list of children of the same parent item. You can move it to the position that you need, as described in the Rearrange Menu Items / Dividers action description.

Important

You need to reload the page to see changes.

Note

Some menus (or some menu levels) cannot display dividers. For example, if you add a divider to the first level of the main menu (application_menu), this divider will not be displayed.

View / Edit a Menu Item

  1. In the left panel, click a menu item that you want to view / edit.
  2. In the right part of the page, review / edit the menu item settings. See step 3 of the Add a Menu Item action description for information about menu item fields.

Important

You cannot edit URI for default menu items.

Toggle Item Visibility

Hide a Menu Item

If you do not want one of the default menu items to be visible on the interface, you can hide it.

Important

  • If a menu that you hide has child items, they will be hidden too.
  • You cannot hide non-default menu items.

To hide a menu item, perform the following steps:

  1. In the left panel, click a menu item that you want to hide.
  2. Click Hide on the top right.

Important

You need to reload the page to see changes.

Show a Menu Item

To show a previously hidden menu item, perform the following steps:

  1. In the left panel, click a menu item that you want to show.
  2. Click Show on the top right.

Note

If a menu item that you want to show has a parent, it will become visible too.

Important

You need to reload the page to see changes.

Find a Menu Item

To quickly find a menu item, enter its name into the search field and click the Search icon, or press Enter.

../../../_images/menus_application_search.png

Delete a Menu Item / Divider

Important

  • You cannot delete default menu items.
  • When you delete a menu item that has child items, they will not be deleted but moved to the parent of the menu item that you delete.
  1. In the left panel, click a menu item / divider that you want to delete.
  2. Click Delete on the top right.
  3. In the Delete Confirmation dialog box, click Yes, Delete.

Important

You need to reload the page to see changes.

Reset a Menu

To reset any customization changes and roll back to the menu that is provided out of the box in Oro application:

  1. In the left panel, click a menu name.
  2. Click Reset on the top right.
  3. In the Reset Confirmation dialog box, click Yes, Reset.

Important

You need to reload the page to see changes.

Browse maintained versions:3.01.6

You will be redirected to [title]. Would you like to continue?

Yes No
sso for www.magecore.comsso for oroinc.desso for oroinc.fr
Back to top