Design

Button Dropdown

Similar to the button widget, but allows you to create a button with a drop-down menu.

Normally used 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 caret), which will be located to the right of Edit, where you will need to select either Insert above or Insert below.
  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 - This 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.
  5. To add items to the button's drop-down menu, 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.
    • 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.


  • Is it possible to have the Button Dropdown widget send an email or dial a phone number?
    It is also possible to have a button send an email or dial a phone number when clicked on. Both will try to open the appropriate program on a visitor's computer to handle the request if one is available. If one is not available, nothing will happen.
    • If you like to use the button as a Contact Us enter mailto: followed by the email address into the Link field. So to send to stevej@domain.com you would enter mailto:stevej@domain.com into the link field.
    • To have the button dial a phone number, enter tel: followed by the phone number into the Link field. So to dial 1-513-222-3333 you would enter tel:15132223333 into the link field.
  • Is it possible to have the Button Dropdown widget look like an actual button?
    To get an actual button look to this widget, a color other than none needs to be picked in the Color field found under the Settings tab for the widget.

 Campus Suite 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.