Loading ...

Dropdown Menu Template | Axero Documentation

Home » axero documentation » Wiki » Documentation » Control Panel » System » Page Builder » Page Builder Widget Templates » Navigation Templates » Dropdown Menu Template
Axero Documentation  Wiki
Public Space
Activity Stream Content
Version 11

Dropdown Menu Template

0 
 /5
0 (0votes)

The Dropdown menu template displays a button that opens a dropdown list of links. The template is built in and comes with your Axero site.

The Dropdown Menu template rendered on a page

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
    The Page Builder header editor with a Navigation section's gear menu open on Edit properties, Expand and Remove
  3. Click the Widgets tab
    The Page Builder header editor Details tab, with the Widgets tab arrowed
  4. Drag a Navigation widget into the right column, below the Create menu
    The Page Builder header editor, with an arrow on a Navigation widget among the header's widgets
  5. Edit the Navigation widget
    The Page Builder header editor with a nested navigation item's gear menu open on Edit properties
  6. Update the widget Title
  7. In Navigation items, configure an item
  8. Save the navigation item
    A navigation item titled Axero Solutions with Item type URL and a web address, with its Save button arrowed
  9. Add more navigation items and configure them
    The Resources widget's Navigation Items list holding Axero Solutions, with Add Item arrowed
  10. Click the Template tab
    The Navigation Items list holding three items, with the Template tab arrowed
  11. Select the Dropdown menu template
    The Template tab with Dropdown menu chosen under Choose a template
  12. Click Save Widget
    The Template tab with Dropdown menu chosen and Save Widget arrowed
  13. Click Publish changes

Template HTML

Below is the HTML of this template for your reference.

<div class="dropdown {{CustomCSSClass}}"{{#if WidgetStub}} id="section-{{WidgetStub}}"{{/if}}><a class="btn dropdown-toggle" data-toggle="dropdown" href="#">{{#if IconCSSClass}}<i class="{{IconCSSClass}}"></i>{{/if}}
    {{#if ShowWidgetHeader}}{{{WidgetTitle}}} <span class="caret"></span>{{/if}}</a>
    <ul class="dropdown-menu pull-right ax-nav-widget">  	
    {{{Contents.ChildWidgetHTML}}}	
    </ul>
</div>

Wiki Index

Pages