Navigation List Widget | Axero Documentation

Use the Navigation List widget to link to features and content.

Add Widget to Page

1. Click the gear icon > Page Builder.
2. Add or edit a page.
3. Click the Layouts tab and add a layout to the page.
4. Click the Widgets tab.
5. Drag a Raw HTML widget onto the page. This template is best used in small to mid-sized columns - between 4 and 6.
6. On the Raw HTML widget, click the gear icon > Edit properties.
7. Update the widget Title.
8. In the editor, paste the following code.

   <div class="axero-widget axero-widget-nav-list">
       <div class="axero-widget-header">
           <h3>How to Get Support</h3>
       </div>
       <div class="axero-widget-body axero-widget-content-padded">
           <ul>
               <li><a target="_blank" href="https://my.axerosolutions.com/"><i class="icon-question-sign"></i> Axero Support Community</a></li>
               <li><a target="_blank" href="https://my.axerosolutions.com/spaces/77/online-support/help/welcome"><i class="icon-comment"></i> Support Forums</a></li>
           </ul>
       </div>
   </div>

9. Replace How to Get Support with your title.
10. You can modify the code to display your own links and icons. For more information, refer to Customize the Navigation List Widget below.
11. Click Save Widget.
12. Click Publish changes.
13. Click Go to page.

Customize the Navigation List Widget

Change Link and Link Text

Each item in the Navigation List widget starts with <li> .

• To update an item's link, modify the href attribute of the a element.
• To update an item's text, modify the text that appears after </i> and before </a> .

Change Icons

1. Search for an icon in FontAwesome.
2. Click the icon.
3. Click the icon HTML to copy it to your clipboard.
4. In the Raw HTML widget, find the line you want to update.
5. Replace the i element with the code you copied. (For example, replace <i class="icon-question-sign"></i> with <i class="fas fa-paperclip"></i> )

Add Links

The format for a link is:

<li><a target="_blank" href="{URL}"><i class="{ICON_CSS_CLASS}"></i> {LINK_TEXT}</a></li>

Add new links on new lines in the section after <ul> and before </ul> .

Note: Navigation widget templates come with predefined child templates for each design. To enable it, go to Control Panel > System > System Properties, search for EnableNavigationWidgetTemplateOverrides, and set it to true.