Page hierarchy

Last update: August 29, 2023

CREATED FOR:

  • Beginner
  • Intermediate
  • Admin
  • User
Adobe Commerce feature Exclusive feature only in Adobe Commerce (Learn more)

The store page hierarchy system gives you the ability to organize your content pages and add pagination, navigation, and menus. The Privacy Policy page in the sample data is an example of a page with a menu on the left. If you publish a large amount of content regularly, you can use a page hierarchy to organize your content to make it easy for people to find articles of interest.

The page hierarchy system uses nodes to identify related pieces of content, and to organize content pages into parent/child relationships. A parent node is like a folder that might contain child nodes and pages. The relative position of each node and page in the hierarchy is shown as a tree structure. A node might contain other nodes and content pages, and a single content page might be associated with multiple nodes and other content pages in a parent/child or neighbor relationships.

Page with left navigation

Configure page hierarchy

The configuration settings activate the page hierarchy system and metadata, and determine the default menu layout.

CMS Page Hierarchy

  1. On the Admin sidebar, go to Stores > Settings > Configuration.

  2. In the left panel under General, choose Content Management.

  3. Expand Expansion selector CMS Page Hierarchy and make any changes that are necessary.

  4. When complete, click Save Config.

FieldDescription
Enable Hierarchy FunctionalityActivates the use of page hierarchy for your content pages. Options: Yes / No
Enable Hierarchy MetadataWHen this option is enabled, you can associate meta data with pages in the hierarchy. Options: Yes / No
Default Layout for Hierarchy MenuDetermines the default menu style. Options: Content / Left Column / Right Column

Add a hierarchy node

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.

Step 2: Add pages to the node

  1. In the hierarchy tree, click to select the node.

  2. 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.

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:

      • No - Does not define the node as chapter/section.
      • 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.

  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.