Navigation List Widget | Communifire 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 onto 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> Communifire Support Community</a></li>
               <li><a target="_blank" href="https://my.axerosolutions.com/spaces/77/communifire-support/help/welcome"><i class="icon-comment"></i> Support Forums</a></li>
               <li><a target="_blank" href="https://my.axerosolutions.com/spaces/5/communifire-how-to-user-guides"><i class="icon-book"></i> Documentation</a></li>
               <li><a target="_blank" href="http://my.axerosolutions.com/spaces/5/communifire-how-to-amp-user-guides/videos"><i class="icon-facetime-video"></i> Helpful Videos</a></li>
           </ul>
       </div>
   </div>

9. Replace How to Get Support with your own title.
10. Make changes to the code to display your own links and icons. 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> .