Calendar event manage has a convenient navigation bar that also shows the progress of the steps needed to create an event.  The block Calendar Navigation provides the custom controls for the event navigation progress bar. 

Event Nav Progress.png

With an understanding of Lava and theme styling, a similar navigation progress bar can applied to any page navigation.  The same Page Menu block is used with custom Lava to create

Prerequisites

  • Familiarity with existing Page Menu block and its lave templates
  • Experience with using Lava
  • Understanding of theme styling

Steps

Step 1: Child Pages

Create a set of child pages that represent the steps of page navigation progress.  The order of the child pages will be the same order of the navigation progress.  Use for Font Awesome for page icons will improve the UX of the navigation progress.

Step 2: Add Page Menu Block

Add a Page Menu block to each of the child pages.  This block would commonly be added as the first block within the Feature zone. The Feature zone will also span the width of layouts with either right or left sidebars.

Step 3: Define Lava Template

Define the Lava Template with the Page Menu block with the follow Lava code...

{% if Page.DisplayChildPages == 'true' and Page.Pages != empty %}

   {% assign highlight = 'complete' %}

<div class="wizard">

   {% for childPage in Page.Pages %}
	
       {% if childPage.Current == 'true' %}
            {% assign highlight = 'active' %}
       {% endif%}

   <div class="wizard-item {{highlight}}" >
      <a href="{{ childPage.Url }}">
            <div class="wizard-item-icon">
                <i class="{{childPage.IconCssClass}}"></i>
            </div>
            <div class="wizard-item-label">
                {{ childPage.Title }}
            </div>
      </a>
   </div>
    
      {% if highlight == 'active' %}
            {% assign highlight = '' %}
      {% endif %}
   {% endfor %}

</div>
{% endif %}

Note: It is recommended to create a Lava script that is stored within your theme's ~/Assets/Lava folder and use {% include ...} so that all child pages are ensured to be referencing the same Lava script.  This will ease maintenance whenever the script is updated