List Type Dropdown

Add this class list-type-dropdown to a Rich text or other modules with an unordered list and plain links, like the Post Listing module or Post Filter. Please make sure your module contains only links in an unordered list.

Act2 Unordered List Sample

Act2 Template Builder Rich Text Edit CSS

Act2 Template Builder List Type Dropdown CSS Class

Act2 List Type Dropdown Sample

If you use Rich Text, please make sure to add a recognizable name for your module. It may be hard to edit inline in the Page Editor, due to its design. You will most likely need to find it in the modules sidebar on the left and make the edits in that place:

Act2 Page Editor List Type Dropdown Select Module

Act2 Page Editor List Type Dropdown Edit Content

Alternatively, you can use a Custom HTML module, with a coded list, like this:

<ul>
    <li><a href="#link1">Link 1</a></li>
    <li><a href="#link2">Link 2</a></li>
    <li><a href="#link3">Link 3</a></li>
</ul>

If you use this as the navigation of the Tabs or Listing component and no other item is active, the first one will automatically be selected.

If you want to use this for plain URL links (your own custom links [e.g. /about-us] or the Post Listing or Post Filter modules) instead of element IDs/anchors (e.g. #tab1, #ebooks, as in the Tabs and Listing) you will need to add a H1, H2, or H3 just before the list with the default text that will be shown instead of the undefined label, and also add this class to the module: plain-links:

Act2 Template Builder List Type Dropdown Default Label

Act2 Template Builder List Type Dropdown Plain Links CSS Classes

Act2 List Type Dropdown Default Label Sample

Color

For a dark button add this class: dark

Act2 Template Builder List Type Dropdown Dark CSS Class

Act2 List Type Dropdown Dark Sample

For a white button add this class: white

Act2 Template Builder List Type Dropdown White CSS Class

Act2 List Type Dropdown White Sample

Width

The button takes the full width of its container. If you want to make it smaller you can either split the column, or use a width utility class.

Overlapping Dropdown

If the dropdown goes behind other elements on the page, you can add a quick CSS property to bring it forward. For most cases, you would need to apply this style to the Content Section containing the module: z-index: 99;

Act2 Template Builder Content Section Edit CSS

Act2 Template Builder Content Section Edit CSS Z-Index

Using Act2.1 with the new Design Tools? Read this documentation.