Nav - Icon Blocks (Wide) Template | Communifire Documentation

  <div class="axero-widget axero-lightning-navigation-list axero-full-width-blocks">
    {{#if ShowWidgetHeader}}
    <div class="axero-widget-header">
        <h3>{{{WidgetTitle}}}</h3>
    </div>
    {{/if}}
    <div class="axero-widget-body">
       <ul>
          {{{Contents.ChildWidgetHTML}}}
       </ul>
    </div>
  </div>

How to Create the Sample Menu

1. Add or edit a Page Builder page in Control Panel > System > Page Builder
2. Click the Widgets tab
   
3. Drag a Navigation widget onto the page
   
4. Edit the Navigation widget
   
5. Update the widget title
6. In Navigation items, configure an item:
   • Title: Enter the text to display
   • Item type: Select Content List
   • Space: Select a space
   • Content Type: Select a content type
   • Icon: The icon will automatically populate after selecting a content type
     
7. Save the navigation item
   
8. Add more navigation items and configure them
   
9. Click the Template tab
   
10. Select the Nav - Icon Blocks (Wide) template
    
11. Click Save Widget
    
12. Publish the page

Customize Icon Colors

Add the following code in Control Panel > System > CSS Overrides to customize the icon colors in the Nav - Icon Blocks (Wide) template. Replace #328194 with your desired color.

/*Set color of icons in Nav - Icon Blocks (Wide) template*/
.axero-full-width-blocks.axero-lightning-navigation-list .axero-widget-body ul li a .x-icon i {
    color: #328194;
}