Dropdown Sub Menu Template | Communifire Documentation

The Dropdown Sub Menu template displays a flyout menu of links with icons. The template is a built-in template and comes with your Communifire site.

How to Create the Sample Menu

1. Go to Control Panel > System > Page Builder > Header and edit the Community Header
2. Expand the "Navigation" Section widget
   
3. Click the Widgets tab
   
4. Drag a Navigation widget into the right column, below the "Home" button widget
   
5. Edit the Navigation widget
   
6. Update the widget Title
7. Click the Template tab
   
8. Select the Dropdown menu template
   
9. Click the Properties tab
   
10. In Navigation items, configure a sub menu:
    
    1. Title: Enter the text to display
    2. Item Type: Select sub menu
       
11. Save the sub menu
    
12. Add a navigation item
13. 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
      
14. Save the navigation item
    
15. Drag the navigation item into the sub menu
    
16. Add more navigation items, configure them, and drag them into the sub menu
    
17. Click Save Widget
    
18. Click Publish changes

Template HTML

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

<li class="pos-relative {{CustomCSSClass}}"{{#if WidgetStub}} id="section-{{WidgetStub}}"{{/if}}><a class="dropdown-toggle" data-toggle="dropdown" href="#">{{#if IconCSSClass}}<i class="link-item-icon {{IconCSSClass}}"></i>{{/if}}
    <i class="icon-caret-right pull-right"></i><span class="link-item-title">{{#if ShowWidgetHeader}}{{{WidgetTitle}}}{{/if}}</span></a>
    <ul class="dropdown-menu dropright">
    {{{Contents.ChildWidgetHTML}}}
    </ul>
</li>