---
title: Dropdown Buttons
---
***
{{> examples_dropdown_button_intro}}
***
Basic
You can create a dropdown using minimal markup.
HTML
{{#markdown}}
```html
{{> examples_dropdown_button_basic}}
```
{{/markdown}}
Rendered HTML
{{> examples_dropdown_button_basic}}
***
Advanced
Additional classes can be added to your dropdown buttons to change their appearance.
***
This component is not yet accessible. Stay tuned for updates in future releases.
***
## Customize with Sass
Dropdown buttons can be easily customized using our provided Sass variables.
SCSS
{{> examples_dropdown_buttons_variables}}
***
## Semantic Markup With Sass
You can create your own dropdown buttons using our Sass mixins.
Basic
You can use the `dropdown-button()` mixin to create your own dropdown button, like so:
SCSS
{{#markdown}}
```scss
.custom-dropdown-button {
@include button();
@include dropdown-button();
}
```
{{/markdown}}
HTML
{{#markdown}}
```html
Dropdown Button
```
{{/markdown}}
Advanced
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:
SCSS
```scss
@import "foundation/components/buttons";
@import "foundation/components/dropdown";
@import "foundation/components/dropdown-buttons";
```