Navigation Menu Component

Overview

The Navigation Menu Component is a Bloomreach Commerce Accelerator component built on top of the Essentials Menu Component. It provides a category-driven navigation menu that directs users to category and product detail pages.

Component Functionality

In the Bloomreach Commerce Accelerator, the Navigation Menu Component (also called the Category Menu component) retrieves external category information and manages menu structures. It extends the Essentials Menu component by controlling a menu object and its items. Menu items can link to category decorator documents. When linked, the component automatically fetches external category details.

Menu items can also reference other document types, such as product decorator documents or article pages.

The component supports multi-level menus. If a menu item has child items, these appear in the front-end when users hover over the parent item.

Implementation Details

The Navigation Menu Component operates as a command chain delivery component. It uses the categoriesList connector component, which is configured for the Bloomreach connector and other commerce platforms. Refer to the supported commerce platform configuration pages for more information.

The component uses two commands: initContextCommand and hstMenuCommand. The hstMenuCommand is implemented specifically for this component and extends the ContentDecoratorCommand. For each menu item linked to a decorator document, hstMenuCommand performs an external request to retrieve item details.

For example, if a menu contains two items—one linked to a Bloomreach category and another to a commerce category—the HstMenuCommand makes external calls for each item to fetch information such as subcategories. Subcategories are displayed in the menu as shown in the screenshot below:

Navigation menu with Furniture dropdown and submenu items

In this example, the menu displays two top-level categories: Cookware (linked to an external e-commerce category) and Furniture (linked to a Bloomreach Discovery category). The subcategories under Furniture are fetched automatically and are not manually defined in the menu.

Template Information

Bloomreach Commerce Accelerator Boot applications include two standard templates for the Navigation Menu Component:

  • starterstore-menu.ftl: Renders a basic menu.
  • starterstore-categories-menu.ftl: Supports rendering of multi-level menu items.
Share Feedback
Page: /frontend/commerce-accelerator/commerce-react-components/navigation-menu-component
Section: Frontend
Category *