Page Menu – a New Block in Layout Builder

About the Page Menu Block

The Page Menu block is best used to create a link to a particular section within a page, helping users navigate through a particularly lengthy page of content. While the block is not sticky – that is, it does not remain visible while the user scrolls down or moves throughout a website - it aids in navigation by showing users all the related content on a page in a tidy menu-like format. The Page Menu block is convenient for the content editor as the block is built and can be edited on same page, unlike Custom Blocks or Menus. And although building a page block is a two-step process, once the anchor links are set, they can be used in other instances to help users navigate to the specific piece of information from an external source.

Examples of Page Menus

• Public Health Newsletter & Chemistry Newsletter Table of Contents
• Email Communication and Marketing: In this Guide
• Mini Grant Program
• Global Accessibility Awareness Day: Page Highlights

About Page Menus

Page Menus are a two-step process where you first need to create the anchor, then you need to create the link to lead to the anchor.

Previously this year, we wrote a tutorial on how to create an anchor link. This is an essential first step!

Below we outline how to add the Page Menu after you create an anchor. 

Tip: When creating Page Menus, it’s best to create the anchor links first, then add the Page Menu.

Adding a Page Menu

You will first need to be logged in via the /user page.

1. Navigate to the page you'd like to update, and click on the Layout tab.
2. Locate the Add Block link, found at the end of each Section, highlighted in a light blue bar. This will allow you to create a new Custom Block.
3. From there, choose Create Custom Block from the menu that appears on the right-hand side of the screen. This brings up all the block types to choose from.
4. Choose Page Menu. 
5. From the menu that appears on the right-hand side of the screen, you can then enter the necessary fields. You may need to extend the sidebar so that you can see all the text for the Page Menu block.
6. Title the block. If you don’t want to display the title of the block, you can uncheck the box “Display Title”). 
7. Then start adding your Links which require two fields: URL and Link Text.
8. For the URL field, add your newly created on-page anchor links, so they look like this: /node/1/#anchorlink      (Be sure to include the # symbol in the link.)
9. The Link Text field is what will be displayed in the Page Menu. (This is what the user sees.)
10. Then you can Add another Item, or Add, or Save the Block, when you are done. 
11. Save Layout to save your changes on the page.
12. Test your Page Menu links. If all worked as expected, you now have functioning hyperlinks between your page menu and content on the same page.

Tip: The page menu block works best when placed before the main page content. This could be in the first section of content, and in the first column of a multi-column section. This ensures on mobile the navigation block shows up first before the page content, and not below it.