Nav - Icon Blocks (Pills) Template | Axero Documentation

The Nav - Icon Blocks (Pills) template displays links and icons in a vertical list. The template is a built-in template and comes with your Axero site.

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 (Pills) template
    
11. Click Save Widget
    
12. Publish the page

Change Icon Colors

To change the icon colors in the Nav - Icon Blocks (Pills) template, add the following code in Control Panel > System > CSS Overrides. Replace #328194 with your desired color.

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

Template HTML

Below is the HTML of this template for your reference.

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