Dropdown Section Template | Communifire Documentation

The Dropdown Section template displays 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. Drag a Navigation widget into the left column, below the "Notifications" Section widget
   
3. Edit the Navigation widget
   
4. Update the widget Title
5. In Navigation items, configure a group:
   • Title: Enter the text to display
   • Item type: Select Group
     
6. Click Save
   
7. Add a navigation item
   
8. Configure the item
   
9. Save the navigation item
   
10. Drag the navigation item into the group
    
11. Add more navigation items, configure them, and drag them into the group
    
12. Click the Template tab
    
13. Select the Dropdown section template
    
14. Click the Advanced tab
    
15. Select an Icon
16. In Custom CSS class, enter open-right ax-header-icon 
    
17. Uncheck Show Header
    
18. Click Save Widget
    
19. Click Publish changes
20. In Control Panel > System > CSS Overrides, add the following code

    .ax-header-icon { top:-5px; }

21. Click Save CSS Overrides

Template HTML

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

<div class="dropdown {{CustomCSSClass}}" id="OpenSection{{WidgetID}}">
    {{#if ViewAllURL}}<a class="mobile-header-icon hidden-desktop" href="{{ViewAllURL}}"><i class="{{IconCSSClass}}"></i></a>{{/if}}
    <a href="#" id="OpenSection{{WidgetID}}" class="dropdown-toggle btn visible-desktop" data-toggle="dropdown">
    {{{Contents.ContentCountHTML}}}
    {{#if IconCSSClass}}<i class="{{IconCSSClass}}"></i>{{else}}{{#if ShowWidgetHeader}}{{{WidgetTitle}}} <span class="caret"></span></a>{{/if}}{{/if}}
    </a>
    <div class="dropdown-menu ax-diamond-hover-box">
        <div class="axero-ajax-content-wrapper">
            <div class="ax-diamond-hover-box-header">
                <ul class="modal-options">
                    {{{Contents.HeaderOptionsHTML}}}
                    {{#if ViewAllURL}}<li><a rel="tooltip" data-toggle="tooltip" data-placement="bottom" href="{{ViewAllURL}}" title="{{{Resources.GlobalViewAllText}}}"><i class="far fa-external-link"></i></a></li>{{/if}}
                </ul>
                <div class="nav-header">
                    {{#if ShowWidgetHeader}}{{{WidgetTitle}}}{{/if}}
                </div>
                <div class="divider"></div>
            </div>
            {{{Contents.ChildWidgetHTML}}}
            {{#if ShowWidgetFooter}}{{#if ViewAllURL}}<div class="ax-diamond-hover-box-footer"><a href="{{ViewAllURL}}" class="block">{{{Resources.GlobalViewAllText}}}</a></div>{{/if}}{{/if}}
        </div>
    </div>
</div>