After July 2021, the 2.3.x release line no longer received quality updates or user guide updates. PHP 7.3 reached end of support in December 2021, and Adobe Commerce 2.3.x reached end of support in September 2022. We strongly recommend upgrading to Adobe Commerce 2.4.x to help maintain PCI compliance.

Adding a Node

This site contains archived merchant documentation for a version of Adobe Commerce and Magento Open Source that has reached end-of-support. The documentation available here is intended for historical reference only and is not maintained. The Adobe Commerce Merchant Documentation for current releases is published on the Adobe Experience League.
Magento Commerce only. Learn more.

The following example shows how to create a node with simple navigation to related content pages. Although a node does not have a content page associated with it, it does have a URL Key that can be referenced elsewhere in your site.

For example, you might create a node called Press Releases that has navigation to individual press releases. Then, you can include the link on your About Us page to the node. Or you might create a node for a collection of back issues of your newsletter.

To link to a node, use the Widget tool to create a CMS Hierarchy Node link and place the widget in a content block or page.

Example navigation menu on the About Us page

Step 1: Create a node

  1. On the Admin sidebar, go to Content > Elements > Hierarchy.

    CMS Pages grid

  2. Above the grid, click Add Node….

  3. Under Page Properties, enter a Title for the node and a suitable URL Key.

    The URL key provides a unique web address for the node. It must be all lowercase characters, using hyphens to separate words, instead of spaces.

    Page properties

  4. Click Save.

    The node appears as a folder in the tree on the left of the page.

    Node added to page hierarchy tree

Step 2: Add pages to the node

  1. In the hierarchy tree, click the node to open it in edit mode.

  2. Scroll down to the CMS pages section and select the checkbox of each page you want to include in the hierarchy.

  3. Click Add Selected Pages(s) to Tree.

    You can scroll up to see that each selected page appears in the tree below the node folder.

    Pages added to the tree

Step 3: Define the structure

  1. If necessary, drag the pages into position to reflect the order that they are to appear in the menu.

    Dragging pages into position

  2. Click the node at the top of the hierarchy.

    The Page Properties section now displays information about the node.

  3. Under Render Metadata in HTML Head, do the following:

    Render meta data settings

    • To identify the node as the top of the hierarchy, set First to Yes.

    • To display a pagination control, set Next/Previous to Yes.

    • To organize the pages in the hierarchy as a book, set Enable Chapter/Section to Yes.

      If you don’t want to include the node as part of the book, leave the default No.

    • To assign the node to a specific part of the book, set Chapter/Section to one of the following:

      Chapter Assigns the current node as a chapter.
      Section Assigns the current node as a section.
      Both Assigns the current node as both a chapter and section.

Step 4: Add pagination controls

  1. Under Pagination Options for Nested Pages, set Enable Pagination to Yes.

    Pagination options

  2. For Frame, enter the number of page links that you want to include in the pagination control.

    If there are more pages in the hierarchy that can be included in the pagination control.

  3. For Frame Skip, enter the number of pages that you want to skip ahead (or back) for the next set of pagination links.

Step 5: Choose the menu layout

If you want the node to appear in the menu, do the following:

  1. Under Page Navigation Menu Options, set Show in navigation menu to Yes.

    This setting determines if a navigational menu is generated for the page hierarchy.

    Page navigation menu options

  2. To specify the location of the menu in relation to the content, set Menu Layout to one of the following:

    Use Default Uses the menu style that is specified in the configuration.
    Left Column The menu appears to the left of the content.
    Right Column The menu appears to the right of the content.

  3. To specify how much detail is included in the menu, set Menu Detalization to one of the following:

    Only Children Includes only subpages in the menu.
    Neighbours and Children Includes subpages and other pages that re at the same level in the hierarchy.

  4. To determine the depth of the menu, enter the Maximal Depth for the maximum number of levels to include.

  5. To format the menu, choose the List Type and corresponding List Style.

    Unordered The menu options are not numbered, and can be formatted with or without bullets. Options for unordered list type: Default / Circle / Disc / Square
    Ordered The menu options are numbered, and can be formatted as numeric, alphabetic, or roman numerals in either upper-or lowercase.

  6. If you also want the node to be visible in the navigation menu, scroll to Main Navigation Menu Options and set Show in Navigation menu to Yes.

    Main navigation menu options

  7. Click Save.

© 2024 Adobe. All rights reserved.