Render an 'Edit Menu' Button in the Experience Manager

Overview

This page describes how to display an Edit menu button in the Channel Editor. The button allows webmasters to open the menu editor for a specific site menu.

When to Use

Use this feature when you want to enable in-context editing of site menus within the Channel Editor interface.

Menu Editing Behavior

When you render an Edit menu button next to a menu in the Channel Editor, users can open the menu editor directly from the site preview.

If a menu is edited, it becomes locked. Other users can view a locked menu but cannot edit it until the changes are published or discarded. When a user opens a locked menu, a message appears in the top-right corner: "Menu locked by ".

Prerequisites

• The menu must be stored in the hst:workspace node. Menus outside the hst:workspace are not editable in the Channel Editor, and the Edit menu button will not appear.
• For more information, see HST workspace configuration.

Implementation

Add the Edit Menu Button to a Template

To render the Edit menu button, use the hst:cmseditmenu tag in your template. The required menu parameter must reference a bean of type org.hippoecm.hst.core.sitemenu.HstSiteMenu.

JSP Example

<hst:cmseditmenu menu="${requestScope.mainMenu}"/>
copy

Freemarker Example

<@hst.cmseditmenu menu=mainMenu />
copy

When the channel is previewed in the CMS, the tag outputs the necessary HTML for the Edit menu button. Outside the Channel Editor, the tag does not output anything.

Position the Edit Menu Button

The optimal placement of the Edit menu button depends on your channel's layout. Adjust the button's position using CSS as needed. For guidance, see Position Edit Buttons.

Render Additional Markup Around the Button

In some cases, your channel's CSS may require the Edit menu button to be wrapped in additional markup for correct positioning. For example, if your menu items use <li> elements, you may need to render the button inside an <li> as well.

JSP Example

<hst:defineObjects/>
<c:if test="${requestScope.hstRequestContext.preview}">
  <li>
    <hst:cmseditmenu menu="${requestScope.mainMenu}"/>
  </li>
</c:if>
copy

Freemarker Example

<@hst.defineObjects/>
<#if hstRequestContext.preview>
  <li>
    <@hst.cmseditmenu menu=mainMenu />
  </li>
</#if>
copy

This approach ensures the extra <li> is only rendered when the channel is previewed in the Channel Editor.

Note
The Edit menu button is only visible when "Show components" is enabled in the Channel Editor. However, the additional markup (such as the <li>) is always rendered in preview mode. Verify that this does not affect page layout or appearance in preview.

Verification

1. Open the Channel Editor in the CMS.
2. Navigate to the page containing the menu.
3. Confirm that the Edit menu button appears next to the menu.
4. Click the button to open the menu editor.

Related Topics

• HST workspace configuration
• Position Edit Buttons