Dropdown

Base Foundry stack

The Dropdown stack is much like a button, but with a special dropdown menu hidden inside of it that can house links, dividers and small headers as well.

  • Add links, small headers and dividers to your dropdowns
  • Easily rearrange dropdown elements
  • Set button size
  • Use presets or custom color pickers to style the button
  • Opt for a full-width block style button
  • Set dropdown links to display as disabled
  • Please Note: Features on this page marked with the purple moon icon are compatible with Foundry's Dark Mode.

Example

The Dropdown example below has its button set to the standard size with the default styling. We’ve added a small header, several links and a divider so you can get a feel for how each element looks and fits in within the dropdown menu.

Using Dropdown

General

Font v2
Allows you to choose to use the Base Font assigned in the Foundry Control Center or to assign a Typeface based font to your Button text.

Font Weight v2
Use this setting to adjust the font weight of your Button text when you've assigned them a Typeface font. If you're using the Control Center's Base Font instead of a Typeface font your font weight will be set to match the Base Font's settings.

Button Label

Label
Choose what text will appear on the button that triggers your dropdown.

Button Style

Button Size
Choose the size of your dropdown button. You can opt of a Small, Standard or Large button size.

Button Style
Set the color of the dropdown button to match your site using one of Foundry’s color swatch presets or make use of custom color pickers. You can also opt for a gradient background which will allow you to use a series of custom color pickers to design your own gradient.

Outline
When using one of the color swatch presets you can use the Outline feature to inverse the button’s style.

Block Button
Enable to make the dropdown button span the entire width of the form. The button’s width is flexible when enabled and will size down to fit the available space.

Advanced

Collapse
Enable this feature to free up some space in Edit Mode by hiding the dropdown’s content from view until you need to edit it again. Has no effect on the published page.

Child Stack

Dropdown Link

Label
Insert your custom text that will appear on your link for the dropdown link.

Disabled
Set the link to be un-clickable and greyed out.

Child Stack

Dropdown Header

Header
Insert your custom text that will appear inside of your Dropdown. This text is not clickable and has a smaller font size. Used to set apart different links within the dropdown for organization.

Child Stack

Dropdown Divider

The Dropdown Divider child stack is a child stack inside the Dropdown stack itself. It has no options itself. It too can be used to set apart different links within the dropdown for organization.

Insight
Additional Content Types

Dropdowns aren't just for links. You can add in dividers and small headers as well to help give your visitors more information and to delineate links.