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.
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:
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:
For a dark button add this class:
For a white button add this class:
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.
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: