Important

You are browsing upcoming documentation for version 6.1 of OroCommerce, scheduled for release in 2025. Read the documentation for version 6.0 (the latest LTS version) to get up-to-date information.

See our Release Process documentation for more information on the currently supported and upcoming releases.

Storefront and Back-Office Menu Management Concept Guide 

Companies are now making huge efforts to attract visitors on their site, investing large sums of money in advertising and marketing. Once a customer lands on a page of your website, you must let them find the product on the fly with an easy and user-friendly navigation. Navigation is what welcomes your visitor once they arrive, providing an overview of what you offer, how to contact you, how to access the shopping cart, and make an order.

A navigation menu of an e-commerce website has a lot in common with the shelving in a physical store. When a customer enters your website, regardless of whether they come with a specific purpose or just to browse, they scan the content to find the information they are looking for. Whether they stay or leave highly depends on a responsive menu that helps customers identify the required location on the spot.

Illustrate navigation principles of any website

Catering to the needs of your business, OroCommerce offers a useful solution to build the menu of your choice. The application provides several pre-configured menu items out-of-the-box that you can customize to fit your criteria. With the storefront and back-office menu functionality, you can personalize and optimize your site navigation for the convenient usage by customers in the storefront and administrators in the back-office.

Note

Currently, Frontend Menus include menu items for both Refreshing Teal and version 5.1 and below to support all versions of OroCommerce.

The lists of the default storefront and back-office menu items

As a visual reference, we have used the Refreshing Teal theme to illustrate how the menu items can be represented.

  • in the storefront

    Illustrate all available storefront menu items in the storefront

  • in the back-office

Illustrate all available back-office menu items in the back-office

The way the menu looks and behaves on your website depends on the customization and settings that you apply to the default configuration.

Let’s check each of the available menu items individually.

Storefront Menu Components 

Storefront menu in OroCommerce allows users to orient themselves within your website and easily access their account, shopping cart, and other essential information through the links distributed in different places: next to the main menu, in the footer, in the featured menu, etc.

The storefront menu functionality consists of several components that are supplied with the necessary settings to make up the navigation of your website storefront and to enable visitors to know where they are, where they can go, and where they have already been. You can modify the default configuration to add new menu items, exclude some items from the specific devices, set visibility conditions to certain customer groups, or according to particular config values.

A list of all available storefront menu items

You can configure each of the following menu elements on five different levels: global, organization, website, customer group, and a customer. Always keep an eye on the fallback logic, which means that the values set on a lower level (e.g., customer level) would always prevail and override the configuration set on the higher level.

Storefront menu fallback logic

Once you have configured the menu items, you can add them to the selected theme configuration of your website, placing them anywhere in the storefront header.

Selecting a menu item under Theme configuration

Frontend_menu 

Frontend_menu serves to build the breadcrumbs based on the pages nesting. Breadcrumbs help identify the location of the user within your website’s hierarchy.

A sample of the frontend_menu breadcrumbs in the storefront

However, keep in mind that the breadcrumbs on the product listing page and the product details page are made up based on the structure of the enabled master catalog or web catalog nodes, but not through frontend_menu.

A sample of the breadcrumbs composed based on the structure of a web catalog

Commerce_top_nav 

Important

Commerce_top_nav applies to OroCommerce version 5.1 and below and is retained in the current version only for legacy backward compatibility. For v6.0 and above, please use the commerce_top_nav_refreshing_teal menu to modify the links in the website’s page header.

The commerce_top_nav menu indicates the links that appear at the top right of your website’s page header. If your customers need to reach your business, add the links to live chat. If they are looking for your store locations, add that. Whatever is important to you can be added to the header. The menu visibility in the storefront for 5.1 and earlier versions of OroCommerce is configured by its Hide/Show button.

A sample of the commerce_top_nav in the back-office

Commerce_top_nav_refreshing_teal 

The commerce_top_nav_refreshing_teal menu indicates the links that appear in your website’s page header. If your customers need to reach your business, add the links to live chat. If they are looking for your store locations, add that. Whatever is important to you can be added to the header.

You can then choose the place in the header where to locate your menu under theme configuration.

A sample of the commerce_top_nav_refreshing_teal in the storefront

Commerce_quick_access 

Important

Commerce_quick_access applies to OroCommerce version 5.1 and below and is retained in the current version only for legacy backward compatibility. For v6.0 and above, please use the commerce_quick_access_refreshing_teal menu to modify the quick access links.

The commerce_quick_access menu provides links to the most frequently used pages or important actions for the customers to quickly locate them within your website.

A sample of the commerce_quick_access in the back-office

Commerce_quick_access_refreshing_teal 

The commerce_quick_access_refreshing_teal menu provides links to the most frequently used pages or important actions for the customers to quickly locate them within your website.

You can choose the place in the header where to locate your menu under theme configuration.

A sample of the commerce_quick_access in the back-office

Commerce_main_menu 

Commerce_main_menu is responsible for all items you see in main menu in your OroCommerce storefront. This menu mimics the structure of the web catalog or a master catalog (if web catalog is not connected) selected in the system configuration and enables you to make adjustments to the title, order or depths of the items. Here, you can update the menu items or add new ones without affecting the original master or web catalog.

Note

Keep in mind that, initially, the system takes the default values from the routing settings in the system configuration. However, once a user adjusts the values in the commerce_main_menu, the system starts adhering to these modified values, subsequently updating the storefront menu accordingly.

A sample of the commerce_main_menu in the storefront

Customer_usermenu 

Important

Customer_usermenu applies to OroCommerce version 5.1 and below and is retained in the current version only for legacy backward compatibility.

Customer_usermenu is a storefront user menu that appears at the top right of the website’s page header and defines what a customer will see within this menu. The menu look can either be concise (displaying all menu items in one raw) or expanded (displaying the full list of menu subitems in a popup). The way it is shown in the storefront can be customized under the Theme Settings configuration on the global, organization, and website levels.

A sample of the customer_usermenu in the storefront

Oro_customer_menu 

Important

Oro_customer_menu applies to OroCommerce version 5.1 and below and is retained in the current version only for legacy backward compatibility. For v6.0 and above, please use the oro_customer_menu_refreshing_teal menu to modify the values in the Account section of the user menu.

Oro_customer_menu defines the menu items that would populate the Account section of the user menu.

A sample of the oro_customer_menu in the back-office

Oro_customer_menu_refreshing_teal 

Oro_customer_menu_refreshing_teal defines the menu items that would populate the My Account section of the user menu.

A sample of the oro_customer_menu_refreshing_teal in the storefront

Note

The ability to configure and manage Storefront Menus depends on the Manage Menus and Access system configuration capabilities. Make sure to enable them for the specific role to allow the user with this role to handle the menus functionality in the storefront.

Illustrate Manage Menus and Access system configuration capabilities

Back-Office Menu Components 

Back-office menu in OroCommerce allows you to navigate within menus of your website’s back-office, easily access your profile page, modify the existing menu items, adapt the default menus look and the elements they contain globally, per organization, and for your own use.

A list of available back-office menu items in the back-office

Application_menu 

Application_menu (navigation bar) is the main menu of the back-office in the Oro application. It resides on the top of every application page, and you can use it to navigate through the Oro application. Subject to configuration, it may be displayed horizontally or vertically. The way it is displayed is customized in the system configuration in the Navigation Bar section of Display Settings and can be configured on four levels: globally, per organization, per website, and per user.

Illustrate the left and top positions of the application menu and where to configure them

In a top position, the application menu (navigation bar) looks like a top menu with a drop-down sub-menus that expand once you hover over the parent item.

In a left position, the application menu (navigation bar) may be collapsed into the icon bar, or expanded for visible labels and sub-menu items:

Illustrate the application menu in the collapsed and expanded view

Shortcuts 

The shortcuts menu is displayed in the top panel of the application, next to the organization name.

A sample of the shortcuts menu in the back-office

It helps you pin the frequently used actions and have them handy. You can launch an action by clicking it in the dynamically generated Most Used Actions list. This list is updated as you are using the system, and will initially contain the actions that you use the most.

To access other shortcuts, click See the full list to see a complete list of shortcut items or use search: start typing the name of a related entity or an action to choose from a list of matching items.

Usermenu 

Usermenu is the personal menu of the logged-in user in the back-office. A user can access their profile configuration, emails, tasks, and events via usermenu by clicking on their name on the top right of the application.

A sample of the usermenu in the back-office

Calendar_menu 

Calendar_menu is a service menu that is located on the My Calendar page under the ellipsis menu to the right from the calendar name. The actions in the menu help to change the displayed calendar color, hide or remove a calendar.

A sample of the calendar_menu in the back-office

Calendar_menu_mobile 

Calendar_menu_mobile is the mobile-adapted implementation of calendar_menu that allows you to manage your personal calendar from your mobile device anywhere and anytime without missing important events, calls, meetings, and schedules.


Note

The ability to configure and manage Menus in the back-office depends on the Manage Menus and Access system configuration capabilities. Make sure to enable them for the specific role to allow the user with this role to handle the menus functionality in the back-office.