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 Layout 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, 4 to 6 wide.
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/axero-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: The EnableNavigationWidgetTemplateOverrides system property does not affect this Raw HTML widget. It applies to the Navigation Widget, whose templates come with predefined child templates. Setting it to true in Control Panel > System > System Properties lets you choose a different Link item template, Sub menu template, and Group template on an individual Navigation widget.

Related pages

• Navigation Widget (the widget recommended instead)
• Default Unordered List Template (the built-in list template)
• System Properties (where EnableNavigationWidgetTemplateOverrides is set)
• Page Builder Extras (the full list of extra widgets and templates)