Dropdowns

The Dropdown component should be used for when content is naturally hidden but then displayed in a drawer-like fashion when the user toggles the button.

Note: This component is still in a “prototype” state until it can be further tested in implementations such as navigations and other areas. Wherever possible, we will try to keep the core funcationality the same going forward and will communicate any potential breaking changes before updating the System.

Usage

Look at the View tab for each dropdown variation to see an example of how it is being used.

Macro reference

Default Dropdown component.

buttonOptions

Param Default Values Description
class miz-button--primary dropdown-toggle String Additional classes appended to the dropdown button
attributes id:'defaultDropdownButtonID' Object Attributes to be applied to the dropdown button
text 'Dropdown button' String The text to be displayed on the dropdown button

contentOptions

Param Default Values Description
class miz-dropdown-content dropdown-menu String Additional classes appended to the dropdown content
attributes null Object Attributes to be applied to the dropdown content
content 'No content' Array The content to be displayed for the dropdown content

dropdownOptions

Param Default Values Description
class miz-dropdown dropdown String Additional classes appended to the dropdown
attributes null Object Attributes to be applied to the dropdown

buttonOptions

Param Default Values Description
class miz-button--primary dropdown-toggle String Additional classes appended to the dropdown button
attributes id:'defaultDropdownButtonID' Object Attributes to be applied to the dropdown button
text 'Dropdown button' String The text to be displayed on the dropdown button

contentOptions

Param Default Values Description
class miz-dropdown-content dropdown-menu miz-dropdown-menu String Additional classes appended to the dropdown content
attributes null Object Attributes to be applied to the dropdown content
content 'No content' Array The content to be displayed for the dropdown content

dropdownOptions

Param Default Values Description
class miz-dropdown dropdown miz-dropdown--menu String Additional classes appended to the dropdown
attributes null Object Attributes to be applied to the dropdown
{% from "@miz/components/dropdowns/dropdowns.twig" import Dropdown as dropdown %}

{# Dropdown options #}
{% set dropdownOptions = {} %}

{# Dropdown Button options #}
{% set buttonOptions = {
  "text": "Base dropdown"
} %}

{# Dropdown Content #}
{% set dropdownContent %}
  <h4>A dropdown header</h4>
  <p class="mb-0">Here is some dropdown content</p>
{%- endset %}

{# Dropdown Content options, with content inserted #}
{% set contentOptions = {
  "class": "p-3",
  "content": dropdownContent
} %}

{{ dropdown( buttonOptions, contentOptions, dropdownOptions ) }}
<div class="miz-dropdown dropdown">

    <button class="miz-button miz-button--primary" type="button" id="defaultDropdownButtonID" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Base dropdown<i class="miz-icon material-icons miz-icon--md">arrow_drop_down</i>
  </button>

    <div class="miz-dropdown-content dropdown-menu p-3" aria-labelledby="defaultDropdownMenuButtonID">
        <h4>A dropdown header</h4>
        <p class="mb-0">Here is some dropdown content</p>
    </div>

</div>
/* No context defined for this component. */
  • Content:
    // Dropdowns
    //
    // Dropdown menu container and contents.
    
    .miz-dropdown {
      position: relative;
    }
    
    // Dropdown Content
    // For now, this is mostly ported over from Bootstrap.
    .miz-dropdown-content {
      position: absolute;
      top: 100%;
      left: 0;
      z-index: $zindex-dropdown;
      display: none; // none by default, but block on "open" of the menu
      float: left;
      min-width: $dropdown-min-width;
      width: auto;
      padding: $dropdown-padding-y 0;
      margin: $dropdown-spacer 0 0; // override default ul
    
      @include font-size($dropdown-font-size);
    
      color: $dropdown-color;
      text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
      list-style: none;
      background-color: $dropdown-bg;
      background-clip: padding-box;
      border: $dropdown-border-width solid $dropdown-border-color;
    
      @include border-radius($dropdown-border-radius);
      @include box-shadow($dropdown-box-shadow);
    }
    
    .miz-dropdown-content.show {
      display: flex; // This could cause an issue in IE11 but current does not
      flex-direction: column;
      align-items: flex-start;
    }
    
    .miz-dropdown-item {
      display: block;
      width: 100%; // For `<button>`s
      padding: $miz-space-inset-squish-default;
      clear: both;
      font-weight: $font-weight-normal;
      color: $dropdown-link-color;
      text-align: inherit; // For `<button>`s
      white-space: nowrap; // prevent links from randomly breaking onto new lines
      background-color: transparent; // For `<button>`s
      border: 0; // For `<button>`s
    
      // Prevent dropdown overflow if there's no padding
      // See https://github.com/twbs/bootstrap/pull/27703
      @if $dropdown-padding-y == 0 {
        &:first-child {
          @include border-top-radius($dropdown-inner-border-radius);
        }
    
        &:last-child {
          @include border-bottom-radius($dropdown-inner-border-radius);
        }
      }
    
      @include hover-focus {
        color: $dropdown-link-hover-color;
        text-decoration: none;
    
        @include gradient-bg($dropdown-link-hover-bg);
      }
    
      &.active,
      &:active {
        color: $dropdown-link-active-color;
        text-decoration: none;
    
        @include gradient-bg($dropdown-link-active-bg);
      }
    
      &.disabled,
      &:disabled {
        color: $dropdown-link-disabled-color;
        pointer-events: none;
        background-color: transparent;
        // Remove CSS gradients if they're enabled
        @if $enable-gradients {
          background-image: none;
        }
      }
    }
    
  • URL: /components/raw/miz-dropdowns/_dropdowns.scss
  • Filesystem Path: fractal/pattern-library/miz/components/dropdowns/_dropdowns.scss
  • Size: 2.4 KB