Skip to main content

Documentation: YOOtheme Elements

Extended Button Element

Extended Button Element is only available in the PRO version.
Unlock this and other features by upgrading to Joomill YOOtheme Elements PRO

The Extended Button element shows a different button text, icon, link and style to guests and to logged-in users, and can optionally open a dropdown menu of extra links, useful for account menus or member-only navigation.

In the YOOtheme Builder, open the element picker and look for the Joomill Extensions group of elements, then select Extended Button.

Content tab

Button Text / Icon / Style / Link (Guests) What visitors who are not logged in see and click. In a hover dropdown, this is also the button's link, a click dropdown only opens the menu.
Open in a new tab (Guests) Open the guest link in a new browser tab.
Button Text / Icon / Style / Link (Logged In) Optional overrides shown only to logged-in users. Leave any of these empty to fall back to the guest value.
Open in a new tab (Logged In) Open the logged-in link in a new browser tab.
Dropdown Items Add one or more menu links shown in the dropdown.

Dropdown item

Text The label shown in the dropdown.
Icon An icon from the icon library.
Link / Target Where the item links to, and whether it opens in a new tab.
Show For Restrict this item to Everyone, Guests only, or Logged-in users only.

Settings tab

Size / Full Width Button / Icon Spacing The main button's size, whether it stretches to fill its column, and the gap between its icon and text.
Position Where the dropdown opens relative to the button: Bottom or Top, combined with Left, Center or Right.
Trigger Open the dropdown on Click or on Hover.
Width A fixed dropdown width in pixels, or leave empty for automatic width.
Dividers Show a divider line between dropdown items.
Alignment Center the dropdown items.
Icon Spacing (Dropdown) The gap between the icon and text on dropdown items, in pixels.
Margin, Alignment, Text Alignment, Animation, Visibility The usual layout options shared by all Builder elements.
CSS Custom CSS for this element. Selectors .el-element and .el-button are prefixed automatically.