Used to create a button that has a drop-down menu on a page. A higher-level designer will use it in the outer templates that govern the website. Typical publishers will rarely use it.


How do I add this widget to a page?

  1. Click Edit Page
  2. Click either + Content or the Settings icon (down-facing arrow) which will be located to the right of Edit where you will need to select either Insert before or Insert after
  3. Choose the Button Dropdown widget
  4. Click on the Settings tab to create the primary button. The fields and their descriptions are listed below;
    • Text - The text of the main button that has the drop-down menu
    • Link - Specify the button destination. This will create a split button drop-down if one is entered. We recommend if the link is going to a document or an external website that the target be changed to New Window
    • Target - Specify where to open the button link. 
    • Style - Choose the style of the button. The options available are; Default and Link Only
    • Size - Select the size of the button from the default size up to Large.
    • Color - Select the color of the button from the following options; Primary, Secondary, Tertiary, Accent, Info, Gray, Light Gray, Dark Gray, and Dark
    • Icon - Pick from a selection of icons if you want one to be displayed.
    • Alignment - Allows you to pick the alignment of the button from left, center and right. By default. the alignment is left
    • Full Width - Should the button fill the complete width of the container. The default is off.
    • Caret - Enable the caret to indict a drop-down. Note: the caret is always visible on split button drop-downs. The default is on.
    • Title - If you want text to be displayed in the tooltip when the button is rolled over, enter it into this field.

      Tip - It is best to keep the text inside a button as short as possible. Anything that goes over ten or fifteen words is probably too long. Simple statements are best.

  5. To add items to the drop-down menu of the button click on Items and then on the green + Item button in the upper-right-hand corner and choose the icon you would like to use from a list of available icons. Additional fields that need to be filled out include;
    • Text - Text that you would like listed on the button.
    • Icon - Pick from a selection of icons if you want one to be displayed
    • Link - Select a page or file that you would like to link to or enter the URL for an external link.

      Note - It is also possible to have a link send an email or dial a phone number when clicked on. Both will try to open the appropriate program, on a visitor's computer if one is available, to handle the request. If one is not available nothing will happen.
      • If you like to use the link as a Contact Us enter mailto: followed by the email address into this field. So to send to stevej@domain.com you would enter mailto:stevej@domain.com into the link field.

      • To have the link dial a phone number enter tel: followed by the phone number into this field. So to dial 1-513-222-3333 you would enter tel:15132223333 into the link field.

    • Target - Select the target from either the current window or new window. We recommend that any files or external links be opened in a New Window.

  6. Repeat the previous step until you have completed building your icon group.
  7. When you are finished, click on the green Create button and your Button Dropdown widget will show up on the page.
  8. Make sure to click either the Publish or the Save Draft option just as you would when you're editing pages.


Recommendation - To get an actual "button" look, a color other than none needs to be picked in the "Color" field.