Drop Down is a bit like a button, but with a special dropdown menu hidden inside of it that can house links, dividers and small headers, and more. Helpful for condensing several items into a small footprint on your page.
The Dropdown tool example below has its button set to the default standard size and we've chosen a nice preset Blue for its color.
Here we’ve added a small header, several links and a divider so you can get a feel for how each child item looks.
This example is configured to use the Split Button option. We've chosen to have the drop down to the right, instead of down.
This Drop Down is set to a large size and has a dark drop down background. The drop down itself contains links and a Text child item.
Drop Downs aren't just for links. You can add in dividers, small headers and text as well. They help declutter and reduce the noise on your page by consolidating like links and content in a small footprint.
Did you know, the Button Group tool contains a Drop Down child item as well? This lets you pair a Drop Down with other buttons and modal triggers.
Allows you to add a custom label to the top title bar of the tool. This lets you quickly identify what purpose you're using that tool for in your layout. This title is also visible when you've collapsed or hidden the contents of the tool in Edit Mode.
Used to collapse the list of items within the drop down in the Edit Mode view. This helps tidy up the Edit Mode area when you're not actively working on the contents of the drop down.
This is where you'll insert your text that will appear in button that triggers your drop down.
When enabled you can add an ARIA label for accessibility to your button.
When enabled a preset margin will be added to the base of the tool. Foundry allows you to configure the Base Margin preset to your liking within the Control Center. The Base Margin can be configured independently at each of the 6 responsive breakpoints.
Here we can define the font for this tool. You can choose to use one of the fonts defined in the Typeface stack or simply use the Base Font that is defined in the Foundry Control Center.
Allows you to adjust the font weight for your text. This setting goes from 100 to 900 in increments of 100. Standard Normal font weight is 400 and Bold font weight is generally 700.
The Drop Dwon offers several different style modes to choose from. Below we look at each of the style modes and what they have to offer:
Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values. You're also provided a color picker for setting the text color.
The button child item will be shown in a way the mimics a standard link on the page. It will take on the link styling provided in the Control Center. It will still retain the button's normal padding however to ensure it works with other items in the group.
Provides color pickers for styling the button's background, border and text colors, as well as providing alternate colors for each of these for when the visitor hovers over the button.
We provide two different gradient style options. In the Two Color Gradient setting you're given color pickers for the gradient's two colors as well as the button border and text. Much like the Custom Styling option you can also adjust the styling for the hovered button as well. You've also got control over the angle of the gradient.
Much the same as the Two Color gradient option, but with the added ability to choose four colors as well as choose the color position along the gradient for each of the four colors. Again, you have control over the text and border, along with the gradient angle, and can adjust the gradient's colors for when it is hovered over by visitors.
Outline Mode can be used when working with the Preset styling mode. This basically inverses the colors and uses a tranparent background color. This is yet another way to provide variety in your page and button designs. This is enabled by default.
When using Preset mode for your button's style we can set the opacity of the button when the visitor hover over it. When using other modes like Custom Styling and gradients you can set separate hover styling instead of using the Opacity hover feature.
We provide a quick way to add a subtle light gradient over our buttons when using Preset or Custom Styling modes. This simply includes a translucent white gradient over the button to give it a bit more depth.
This is an alternate style for the drop down control. This seperates the label from the down down arrow, making the arrow itself the clickable item that triggers the drop down. This is off by default.
Here you can adjust the size of the button for your Drop Down using the 3 preset choices. You can opt for a small, standard or large button, with the default being Standard.
Foundry provides 5 different presets for rounded corners. These can be found throughout Foundry's various tools. You're also able to remove the roundness of the corners by setting this to none, or provide your own custom value for the border radius, or rounded corners. When using Custom mode you can set a different value on each of the four corners.
This setting allows you to align the button to the left, center or right of its parent container. In Uniform mode this alignment will be set the same for all 6 breakpoints.
Clicking on the small plus icon will give you the ability to adjust the alignment of the button independently at each of the 6 responsive breakpoints giving you more granular control.
Used to add a decorative shadow to the button for your Drop Down. Foundry provides a variety of preset shadow styles, as well as access to a user defined preset that you can configure in the Control Center. Additionally for one-off shadows there is also a custom shadow option where you can create a unique shadow style, setting its positioning, size, spread and color.
You can opt for either a light or dark background style for the drop down element. The enclosed items will be styled accordingly.
The direction control allows you to specify which direction you'd like the drop down to open. You can choose from down, up, left or right, with down being the default. The drop down is semi-smart though and if there is not enough room for it in the chosen direction it will attempt to open in a direction that ensures the visitor can see the drop down's contents.
Here you can configure how you'd like the content within the drop down itself to be aligned. You can opt for left, center or right and this alignment is applied at all 6 breakpoints.
Used to add a decorative shadow to the drop down when it is open. Foundry provides a variety of preset shadow styles, as well as access to a user defined preset that you can configure in the Control Center. Additionally for one-off shadows there is also a custom shadow option where you can create a unique shadow style, setting its positioning, size, spread and color.
Here we can adjust the styling for the small headers which can be added to the Drop Down as child items. You can use the Foundry preset colors (see Button Styling Mode above for more details), or provide a custom color using the color picker.
Here we can adjust the styling for the horizontal dividers which can be added to the Drop Down as child items. You can use the Foundry preset colors (see Button Styling Mode above for more details), or provide a custom color using the color picker.
Here we can adjust the styling for the text items which can be added to the Drop Down as child items. You can use the Foundry preset colors (see Button Styling Mode above for more details), or provide a custom color using the color picker.
Allows you to adjust the layering of the dopr down menu using a custom z-index value.
Enabling this feature adds an HTML comment to the exported code to indicate the name of the tool being used here. This is helpful to both yourself and others when troubleshooting, or inspecting the code. This is enabled by default.
This field allows you to replace the default HTML Comment with your own text.
Allows you to specify an options class, or classes, that will be added to this tool's child item. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.
This is where you'll insert your text that will appear as a link within the Drop Down.
Allows you to provide a link to a URL, whether it be an internal page or an external link.
Allows you to specify an options class, or classes, that will be added to this tool's child item. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.
This is where you'll insert your text that will appear as a small decorative header within your Drop Down list.
Allows you to specify an options class, or classes, that will be added to this tool's child item. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.
This is where you'll insert your small block of text that will be inserted as a child item within your Drop Down. This text is plain text only.
Allows you to specify an options class, or classes, that will be added to this tool's child item. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.