Nav - Banner Navigation Template | Axero Documentation

The Nav - Banner Navigation template displays links with images to the left. 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 Layouts tab.
3. Add a layout to the page.
4. Click the Widgets tab.
5. Drag a Navigation widget onto the page.
6. On the Navigation widget, click the gear icon > Edit Properties.
7. Update the widget Title.
8. In Navigation items, configure an item.
9. Click the Advanced tab for the navigation item.
10. Click Foreground image.
11. Upload an image.
12. Crop the image and click Save.
13. Save the navigation item.
14. Add more navigation items and configure them similarly.
15. Click the Template tab.
16. Select the Nav - Banner Navigation template.
17. Click Advanced.
18. Uncheck Show header. (Optional)
19. Check Hide Container Border.
20. Click Save Widget.
21. Click Publish changes.

Template HTML

Below is the HTML of this template, for your reference.

<div class="axero-widget xs-banner-navigation {{CustomCSSClass}}{{#if HideContainerBorder}} axero-widget-no-border{{/if}}">
    {{#if ShowWidgetHeader}}
    <div class="axero-widget-header">
        <h3>{{{WidgetTitle}}}</h3>
    </div>
    {{/if}}
    <div class="axero-widget-body">
        <ul>
        {{{Contents.ChildWidgetHTML}}}
        </ul>
    </div>
</div>