Dropdown buttons are elements that, when tapped, reveal additional content. We've simplified our dropdown buttons by getting rid of the dedicated ones associated with the various buttons styles. Instead, you'll use our [new dropdown plugin]({{relative absolute 'dist/docs/components/dropdown.html'}}) to attach a dropdown to the button style of your choice.
You can further customize your dropdown buttons using the provided options in the `dropdown-button()` mixin:
SCSS
{{#markdown}}
```scss
.custom-dropdown-button {
@include button();
@include dropdown-button(
// Determines the size of button you are working with. Default: medium.
// Options [tiny, small, medium, large]
$padding:medium,
// Color of the little triangle that points to the dropdown. Default: #fff.
$pip-color:#fff,
// Add in base-styles. This can be set to false. Default:true
$base-style:true
);
}
```
{{/markdown}}
##### Inset Shadow, Border Radius & Transition Mixin
SCSS
{{#markdown}}
```scss
.custom-dropdown-button {
@include button;
@include dropdown-button;
@include radius;
@include single-transition;
@include inset-shadow;
}
```
{{/markdown}}
***
### Sass Errors?
If the default "foundation" import was commented out, then make sure you import theses files: