Dropdown Menu

Ready

Notes
HTML
Info
View
Context
Assets

No notes defined.


        
        
            <!-- Default -->
<div class="dropdownMenu">

    <label class="label is-optional">Label</label>

    <span class="dropdownMenu-select">
        <span class="select">

            <select id="field-select">
                <option value="" disabled="disabled" selected="selected">Please select</option>
                <hr />
                <option value="-1">
                    Show all
                </option>
                <hr />
                <option value="1">
                    Option 1
                </option>
                <option value="2">
                    Option 2
                </option>
                <option value="3">
                    Option 3
                </option>
                <option value="4" disabled="disabled">
                    Unavailable option
                </option>
            </select>

        </span>

    </span>

</div>


        
            <!-- Disabled -->
<div class="dropdownMenu">

    <label class="label is-optional">Label</label>

    <span class="dropdownMenu-select">
        <span class="select" data-disabled="true">

            <select id="field-uniqueID-disabled" disabled="disabled">
                <option value="" disabled="disabled" selected="selected">Please select</option>
                <hr />
                <option value="-1">
                    Show all
                </option>
                <hr />
                <option value="1">
                    Option 1
                </option>
                <option value="2">
                    Option 2
                </option>
                <option value="3">
                    Option 3
                </option>
                <option value="4" disabled="disabled">
                    Unavailable option
                </option>
            </select>

        </span>

    </span>

</div>


        
            <!-- Transparent -->
<div class="dropdownMenu is-transparent">

    <label class="label is-optional is-transparent">Label</label>

    <span class="dropdownMenu-select">
        <span class="select">

            <select id="field-select">
                <option value="" disabled="disabled" selected="selected">Please select</option>
                <hr />
                <option value="-1">
                    Show all
                </option>
                <hr />
                <option value="1">
                    Option 1
                </option>
                <option value="2">
                    Option 2
                </option>
                <option value="3">
                    Option 3
                </option>
                <option value="4" disabled="disabled">
                    Unavailable option
                </option>
            </select>

        </span>

    </span>

</div>


        
            <!-- Transparent -->
<div class="dropdownMenu is-transparent">

    <label class="label is-optional is-transparent">Label</label>

    <span class="dropdownMenu-select">
        <span class="select" data-disabled="true">

            <select id="field-uniqueID-disabled" disabled="disabled">
                <option value="" disabled="disabled" selected="selected">Please select</option>
                <hr />
                <option value="-1">
                    Show all
                </option>
                <hr />
                <option value="1">
                    Option 1
                </option>
                <option value="2">
                    Option 2
                </option>
                <option value="3">
                    Option 3
                </option>
                <option value="4" disabled="disabled">
                    Unavailable option
                </option>
            </select>

        </span>

    </span>

</div>


        
            <!-- Sorting -->
<div class="dropdownMenu" data-type="sorting">

    <label class="label is-optional">Sortieren nach</label>

    <span class="dropdownMenu-select">
        <span class="select">

            <select id="field-select">
                <option value="" disabled="disabled" selected="selected">Please select</option>
                <option value="">
                    Neuste zuerst
                </option>
                <option value="">
                    Älteste zuerst
                </option>
            </select>

        </span>

    </span>

</div>


        
            <!-- Sorting -->
<div class="dropdownMenu" data-type="sorting">

    <label class="label is-optional">Sortieren nach</label>

    <span class="dropdownMenu-select">
        <span class="select" data-disabled="true">

            <select id="field-select" disabled="disabled">
                <option value="" disabled="disabled" selected="selected">Please select</option>
            </select>

        </span>

    </span>

</div>


        
            <!-- Sorting Transparent -->
<div class="dropdownMenu is-transparent" data-type="sorting">

    <label class="label is-optional is-transparent">Sortieren nach</label>

    <span class="dropdownMenu-select">
        <span class="select">

            <select id="field-select">
                <option value="" disabled="disabled" selected="selected">Please select</option>
                <option value="">
                    Neuste zuerst
                </option>
                <option value="">
                    Älteste zuerst
                </option>
            </select>

        </span>

    </span>

</div>


        
            <!-- Sorting Transparent -->
<div class="dropdownMenu is-transparent" data-type="sorting">

    <label class="label is-optional is-transparent">Sortieren nach</label>

    <span class="dropdownMenu-select">
        <span class="select" data-disabled="true">

            <select id="field-select" disabled="disabled">
                <option value="" disabled="disabled" selected="selected">Please select</option>
            </select>

        </span>

    </span>

</div>


        
            <!-- Doc Only -->
<section class="doc-variant">

    <header class="doc-variant-header">

        <h2 class="doc-variant-title">Default</h2>

        <div class="doc-variant-configuration">
            <label>
                Theme:
                <select class="doc-select" onchange="fractal.setTheme(this, {target: '.doc-variant-samples', value: this.value});">
                    <option value="default">default</option>
                    <option value="dark">dark</option>
                </select>
            </label>
        </div>

    </header>

    <div class="doc-variant-samples" data-theme="">

        <div class="dropdownMenu">

            <label class="label is-optional">Label</label>

            <span class="dropdownMenu-select">
                <span class="select">

                    <select id="field-select">
                        <option value="" disabled="disabled" selected="selected">Please select</option>
                        <hr />
                        <option value="-1">
                            Show all
                        </option>
                        <hr />
                        <option value="1">
                            Option 1
                        </option>
                        <option value="2">
                            Option 2
                        </option>
                        <option value="3">
                            Option 3
                        </option>
                        <option value="4" disabled="disabled">
                            Unavailable option
                        </option>
                    </select>

                </span>

            </span>

        </div>

        <div class="dropdownMenu">

            <label class="label is-optional">Label</label>

            <span class="dropdownMenu-select">
                <span class="select" data-disabled="true">

                    <select id="field-uniqueID-disabled" disabled="disabled">
                        <option value="" disabled="disabled" selected="selected">Please select</option>
                        <hr />
                        <option value="-1">
                            Show all
                        </option>
                        <hr />
                        <option value="1">
                            Option 1
                        </option>
                        <option value="2">
                            Option 2
                        </option>
                        <option value="3">
                            Option 3
                        </option>
                        <option value="4" disabled="disabled">
                            Unavailable option
                        </option>
                    </select>

                </span>

            </span>

        </div>

    </div>

</section>
<section class="doc-variant">

    <header class="doc-variant-header">

        <h2 class="doc-variant-title">Transparent</h2>

        <div class="doc-variant-configuration">
            <ul data-label="Modifier">
                <li>.is-transparent</li>
            </ul>
            <label>
                Theme:
                <select class="doc-select" onchange="fractal.setTheme(this, {target: '.doc-variant-samples', value: this.value});">
                    <option value="default">default</option>
                    <option value="dark">dark</option>
                </select>
            </label>
        </div>

    </header>

    <div class="doc-variant-samples" data-theme="">

        <div class="dropdownMenu is-transparent">

            <label class="label is-optional is-transparent">Label</label>

            <span class="dropdownMenu-select">
                <span class="select">

                    <select id="field-select">
                        <option value="" disabled="disabled" selected="selected">Please select</option>
                        <hr />
                        <option value="-1">
                            Show all
                        </option>
                        <hr />
                        <option value="1">
                            Option 1
                        </option>
                        <option value="2">
                            Option 2
                        </option>
                        <option value="3">
                            Option 3
                        </option>
                        <option value="4" disabled="disabled">
                            Unavailable option
                        </option>
                    </select>

                </span>

            </span>

        </div>

        <div class="dropdownMenu is-transparent">

            <label class="label is-optional is-transparent">Label</label>

            <span class="dropdownMenu-select">
                <span class="select" data-disabled="true">

                    <select id="field-uniqueID-disabled" disabled="disabled">
                        <option value="" disabled="disabled" selected="selected">Please select</option>
                        <hr />
                        <option value="-1">
                            Show all
                        </option>
                        <hr />
                        <option value="1">
                            Option 1
                        </option>
                        <option value="2">
                            Option 2
                        </option>
                        <option value="3">
                            Option 3
                        </option>
                        <option value="4" disabled="disabled">
                            Unavailable option
                        </option>
                    </select>

                </span>

            </span>

        </div>

    </div>

</section>
<section class="doc-variant">

    <header class="doc-variant-header">

        <h2 class="doc-variant-title">Sorting</h2>

        <div class="doc-variant-configuration">
            <ul data-label="Type">
                <li>[data-type="sorting"]</li>
            </ul>
            <label>
                Theme:
                <select class="doc-select" onchange="fractal.setTheme(this, {target: '.doc-variant-samples', value: this.value});">
                    <option value="default">default</option>
                    <option value="dark">dark</option>
                </select>
            </label>
        </div>

    </header>

    <div class="doc-variant-samples" data-theme="">

        <div class="dropdownMenu" data-type="sorting">

            <label class="label is-optional">Sortieren nach</label>

            <span class="dropdownMenu-select">
                <span class="select">

                    <select id="field-select">
                        <option value="" disabled="disabled" selected="selected">Please select</option>
                        <option value="">
                            Neuste zuerst
                        </option>
                        <option value="">
                            Älteste zuerst
                        </option>
                    </select>

                </span>

            </span>

        </div>

        <div class="dropdownMenu" data-type="sorting">

            <label class="label is-optional">Sortieren nach</label>

            <span class="dropdownMenu-select">
                <span class="select" data-disabled="true">

                    <select id="field-select" disabled="disabled">
                        <option value="" disabled="disabled" selected="selected">Please select</option>
                    </select>

                </span>

            </span>

        </div>

    </div>

</section>

Handle: @dropdownmenu
Preview:
- With layout
- Component only
Filesystem Path: components/03-fragments/dropdownMenu/dropdownMenu.html
References (2): @label, @select
Referenced by (27): @topicfinder, @topicfinder--with-dropdowns, @topicfinder--with-pagination, @topicfinder--with-tags, @topicfinder--with-highlights, @topicfinder--with-hidden-highlights, @topicfinder--with-eventteasers, @topicfinder--toplink, @dropdownmenu--doc-only, @filterpanel, @filterpanel--two-items, @filterpanel--single-item, @filterpanel--groups, @filterpanel--cascading, @filterpanel--comboboxes, @filterpanel--combobox--cascading, @filterpanel--live-filter, @filterpanel--live-and-filter, @filterpanel--live-and-cascading-dropdowns, @filterpanel--live-and-combobox, @filterpanel--tagsgroup, @filterpanel--two-tagsgroups, @filterpanel--tagsgroup-and-two-items, @filterpanel--status-and-sorting, @filterpanel--with-page-header, @filterpanel--with-narrow-page-header, @filterpanel--demo-data


        <!-- Default -->
<div class="dropdownMenu{{#modifier}} {{.}}{{/modifier}}"{{#type}} data-type="{{.}}"{{/type}}>

    {{> @label}}

    <span class="dropdownMenu-select">
        {{#select}}
            {{render '@select' (contextData '@select' this) merge=true}}
        {{/select}}
    </span>

</div>

<!-- Disabled -->
<div class="dropdownMenu{{#modifier}} {{.}}{{/modifier}}"{{#type}} data-type="{{.}}"{{/type}}>

    {{> @label}}

    <span class="dropdownMenu-select">
        {{#select}}
            {{render '@select' (contextData '@select' this) merge=true}}
        {{/select}}
    </span>

</div>

<!-- Transparent -->
<div class="dropdownMenu{{#modifier}} {{.}}{{/modifier}}"{{#type}} data-type="{{.}}"{{/type}}>

    {{> @label}}

    <span class="dropdownMenu-select">
        {{#select}}
            {{render '@select' (contextData '@select' this) merge=true}}
        {{/select}}
    </span>

</div>

<!-- Transparent -->
<div class="dropdownMenu{{#modifier}} {{.}}{{/modifier}}"{{#type}} data-type="{{.}}"{{/type}}>

    {{> @label}}

    <span class="dropdownMenu-select">
        {{#select}}
            {{render '@select' (contextData '@select' this) merge=true}}
        {{/select}}
    </span>

</div>

<!-- Sorting -->
<div class="dropdownMenu{{#modifier}} {{.}}{{/modifier}}"{{#type}} data-type="{{.}}"{{/type}}>

    {{> @label}}

    <span class="dropdownMenu-select">
        {{#select}}
            {{render '@select' (contextData '@select' this) merge=true}}
        {{/select}}
    </span>

</div>

<!-- Sorting -->
<div class="dropdownMenu{{#modifier}} {{.}}{{/modifier}}"{{#type}} data-type="{{.}}"{{/type}}>

    {{> @label}}

    <span class="dropdownMenu-select">
        {{#select}}
            {{render '@select' (contextData '@select' this) merge=true}}
        {{/select}}
    </span>

</div>

<!-- Sorting Transparent -->
<div class="dropdownMenu{{#modifier}} {{.}}{{/modifier}}"{{#type}} data-type="{{.}}"{{/type}}>

    {{> @label}}

    <span class="dropdownMenu-select">
        {{#select}}
            {{render '@select' (contextData '@select' this) merge=true}}
        {{/select}}
    </span>

</div>

<!-- Sorting Transparent -->
<div class="dropdownMenu{{#modifier}} {{.}}{{/modifier}}"{{#type}} data-type="{{.}}"{{/type}}>

    {{> @label}}

    <span class="dropdownMenu-select">
        {{#select}}
            {{render '@select' (contextData '@select' this) merge=true}}
        {{/select}}
    </span>

</div>

<!-- Doc Only -->
{{#variants}}
<section class="doc-variant">

    <header class="doc-variant-header">

            {{#title}}
        <h2 class="doc-variant-title">{{{.}}}</h2>
            {{/title}}

        <div class="doc-variant-configuration">
                {{#if modifiers}}
            <ul data-label="Modifier">
                    {{#modifiers}}
                <li>{{{.}}}</li>
                    {{/modifiers}}
            </ul>
                {{/if}}
                {{#if type}}
            <ul data-label="Type">
                    {{#type}}
                <li>{{{.}}}</li>
                    {{/type}}
            </ul>
                {{/if}}
                {{#if ../themes}}
            <label>
                Theme:
                <select class="doc-select" onchange="fractal.setTheme(this, {target: '.doc-variant-samples', value: this.value});">
                        {{#../themes}}
                    <option value="{{{.}}}">{{{.}}}</option>
                        {{/../themes}}
                </select>
            </label>
                {{/if}}
        </div>

    </header>

    <div class="doc-variant-samples" data-theme="{{theme}}">

        {{#samples}}
            {{render '@dropdownmenu' (contextData '@dropdownmenu' this) merge=true}}
        {{/samples}}

    </div>

</section>
    {{/variants}}


        
        
            /* Default */
{
  "label": "Label",
  "select": {
    "id": "select",
    "placeholder": "Please select",
    "options": [
      {
        "label": null
      },
      {
        "label": "Show all",
        "value": -1
      },
      {
        "label": null
      },
      {
        "label": "Option 1",
        "value": 1
      },
      {
        "label": "Option 2",
        "value": 2
      },
      {
        "label": "Option 3",
        "value": 3
      },
      {
        "label": "Unavailable option",
        "value": 4,
        "is-disabled": true
      }
    ]
  }
}


        
            /* Disabled */
{
  "label": "Label",
  "select": {
    "id": "uniqueID-disabled",
    "placeholder": "Please select",
    "options": [
      {
        "label": null
      },
      {
        "label": "Show all",
        "value": -1
      },
      {
        "label": null
      },
      {
        "label": "Option 1",
        "value": 1
      },
      {
        "label": "Option 2",
        "value": 2
      },
      {
        "label": "Option 3",
        "value": 3
      },
      {
        "label": "Unavailable option",
        "value": 4,
        "is-disabled": true
      }
    ],
    "is-disabled": true
  }
}


        
            /* Transparent */
{
  "label": "Label",
  "select": {
    "id": "select",
    "placeholder": "Please select",
    "options": [
      {
        "label": null
      },
      {
        "label": "Show all",
        "value": -1
      },
      {
        "label": null
      },
      {
        "label": "Option 1",
        "value": 1
      },
      {
        "label": "Option 2",
        "value": 2
      },
      {
        "label": "Option 3",
        "value": 3
      },
      {
        "label": "Unavailable option",
        "value": 4,
        "is-disabled": true
      }
    ]
  },
  "modifier": "is-transparent"
}


        
            /* Transparent */
{
  "label": "Label",
  "select": {
    "id": "uniqueID-disabled",
    "placeholder": "Please select",
    "options": [
      {
        "label": null
      },
      {
        "label": "Show all",
        "value": -1
      },
      {
        "label": null
      },
      {
        "label": "Option 1",
        "value": 1
      },
      {
        "label": "Option 2",
        "value": 2
      },
      {
        "label": "Option 3",
        "value": 3
      },
      {
        "label": "Unavailable option",
        "value": 4,
        "is-disabled": true
      }
    ],
    "is-disabled": true
  },
  "modifier": "is-transparent"
}


        
            /* Sorting */
{
  "label": "Sortieren nach",
  "select": {
    "options": [
      {
        "label": "Neuste zuerst"
      },
      {
        "label": "Älteste zuerst"
      }
    ]
  },
  "type": "sorting"
}


        
            /* Sorting */
{
  "label": "Sortieren nach",
  "select": {
    "is-disabled": true,
    "options": null
  },
  "type": "sorting"
}


        
            /* Sorting Transparent */
{
  "label": "Sortieren nach",
  "select": {
    "options": [
      {
        "label": "Neuste zuerst"
      },
      {
        "label": "Älteste zuerst"
      }
    ]
  },
  "type": "sorting",
  "modifier": "is-transparent"
}


        
            /* Sorting Transparent */
{
  "label": "Sortieren nach",
  "select": {
    "is-disabled": true,
    "options": null
  },
  "type": "sorting",
  "modifier": "is-transparent"
}


        
            /* Doc Only */
{
  "label": "Label",
  "select": {
    "id": "select",
    "placeholder": "Please select",
    "options": [
      {
        "label": null
      },
      {
        "label": "Show all",
        "value": -1
      },
      {
        "label": null
      },
      {
        "label": "Option 1",
        "value": 1
      },
      {
        "label": "Option 2",
        "value": 2
      },
      {
        "label": "Option 3",
        "value": 3
      },
      {
        "label": "Unavailable option",
        "value": 4,
        "is-disabled": true
      }
    ]
  },
  "themes": [
    "default",
    "dark"
  ],
  "variants": [
    {
      "title": "Default",
      "samples": [
        {
          "label": "Label",
          "select": {
            "id": "select",
            "placeholder": "Please select",
            "options": [
              {
                "label": null
              },
              {
                "label": "Show all",
                "value": -1
              },
              {
                "label": null
              },
              {
                "label": "Option 1",
                "value": 1
              },
              {
                "label": "Option 2",
                "value": 2
              },
              {
                "label": "Option 3",
                "value": 3
              },
              {
                "label": "Unavailable option",
                "value": 4,
                "is-disabled": true
              }
            ]
          }
        },
        {
          "label": "Label",
          "select": {
            "id": "uniqueID-disabled",
            "placeholder": "Please select",
            "options": [
              {
                "label": null
              },
              {
                "label": "Show all",
                "value": -1
              },
              {
                "label": null
              },
              {
                "label": "Option 1",
                "value": 1
              },
              {
                "label": "Option 2",
                "value": 2
              },
              {
                "label": "Option 3",
                "value": 3
              },
              {
                "label": "Unavailable option",
                "value": 4,
                "is-disabled": true
              }
            ],
            "is-disabled": true
          }
        }
      ]
    },
    {
      "title": "Transparent",
      "modifiers": ".is-transparent",
      "samples": [
        {
          "label": "Label",
          "select": {
            "id": "select",
            "placeholder": "Please select",
            "options": [
              {
                "label": null
              },
              {
                "label": "Show all",
                "value": -1
              },
              {
                "label": null
              },
              {
                "label": "Option 1",
                "value": 1
              },
              {
                "label": "Option 2",
                "value": 2
              },
              {
                "label": "Option 3",
                "value": 3
              },
              {
                "label": "Unavailable option",
                "value": 4,
                "is-disabled": true
              }
            ]
          },
          "modifier": "is-transparent"
        },
        {
          "label": "Label",
          "select": {
            "id": "uniqueID-disabled",
            "placeholder": "Please select",
            "options": [
              {
                "label": null
              },
              {
                "label": "Show all",
                "value": -1
              },
              {
                "label": null
              },
              {
                "label": "Option 1",
                "value": 1
              },
              {
                "label": "Option 2",
                "value": 2
              },
              {
                "label": "Option 3",
                "value": 3
              },
              {
                "label": "Unavailable option",
                "value": 4,
                "is-disabled": true
              }
            ],
            "is-disabled": true
          },
          "modifier": "is-transparent"
        }
      ]
    },
    {
      "title": "Sorting",
      "type": "[data-type=\"sorting\"]",
      "samples": [
        {
          "label": "Sortieren nach",
          "select": {
            "options": [
              {
                "label": "Neuste zuerst"
              },
              {
                "label": "Älteste zuerst"
              }
            ]
          },
          "type": "sorting"
        },
        {
          "label": "Sortieren nach",
          "select": {
            "is-disabled": true,
            "options": null
          },
          "type": "sorting"
        }
      ]
    }
  ]
}

File:

Content:


                                @mixin dropdownMenu-set-icons(
    $icons: $dropdownMenu_icons,
    $color: $_text-color,
    $color--disabled: $_disabled-color,
){

    @each $name, $data in $icons {

        @if map.has-key($icons, $name) {

            $selector: "";

            @if $name != "default" {
                $selector: '[data-type="#{$name}"]';
            }

            &#{$selector} .select {

                &::after { // Marker
                    background-image: svg-url($data, $color);
                }

                &[data-disabled="true"]::after {
                    background-image: svg-url($data, $color--disabled);
                }

                &:has(select[disabled])::after {
                    background-image: svg-url($data, $color--disabled);
                }

            }

        }

    }

}

URL: /components/raw/dropdownmenu/_dropdownMenu.helpers.scss
Filesystem Path: components/03-fragments/dropdownMenu/_dropdownMenu.helpers.scss
Size: 815 Bytes

Content:


                                @import "_dropdownMenu.helpers";
@import "_dropdownMenu.settings";
@import "_dropdownMenu.styles";

%dropdownMenu {

    [data-theme="dark"] & {

        .select select {
            border-color: nth($field_border-color, 1);
            border-width: nth($field_border-width, 1);
            border-radius: nth($field_border-radius, 1);
            background-color: transparent;
            color: $_text-color;

            &[disabled] {
                color: $_disabled-color;
            }

        }

        @each $name, $data in $dropdownMenu_icons {

            @if map.has-key($dropdownMenu_icons, $name) {
                $color--dark: get-theme-property(dark, action-color);
                $color--dark--disabled: get-theme-property(dark, action-color--disabled);

                @include dropdownMenu-set-icons($color: $color--dark, $color--disabled: $color--dark--disabled);
            }

        }

    }

}

%dropdownMenu--transparent {

    .select select {
        border-radius: nth($field_border-radius, 1);
    }

}

URL: /components/raw/dropdownmenu/_dropdownMenu.scss
Filesystem Path: components/03-fragments/dropdownMenu/_dropdownMenu.scss
Size: 1 KB

Content:


                                $dropdownMenu_icons: (
    default: $select_marker_icon,
    sorting: '<svg width="32" height="32" viewBox="0 0 32 32" stroke="{{color}}" stroke-width="#{$select_marker_icon_stroke-width}" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.5 19.5L16 25.5L21.5 19.5"/><path d="M10.5 12.5L16 6.5L21.5 12.5"/></svg>',
) !default;

URL: /components/raw/dropdownmenu/_dropdownMenu.settings.scss
Filesystem Path: components/03-fragments/dropdownMenu/_dropdownMenu.settings.scss
Size: 336 Bytes

Content:


                                %dropdownMenu {
    @include stack-spacing();

    display: flex;
    align-items: baseline;

    width: max-content;

    &-select {
        flex-grow: 1;

        select[disabled] {
            opacity: 1;
        }

    }

    .label {

        &::after {
            display: none;
        }

    }

    .label,
    .select {
        width: inherit;
        @include stack-spacing(0);
    }

    option {
        background-color: $_PAGE-COLOR;
        color: $_TEXT-COLOR;
    }

    @include dropdownMenu-set-icons();

}

%dropdownMenu--transparent {

    .select select {
        background-color: transparent !important;
        border-color: transparent !important;

        &:not([disabled]) {
            color: $_text-color;
        }

    }

}

.dropdownMenu {
    @extend %dropdownMenu;

    &-select {
        @extend %dropdownMenu-select;
    }

    &.is-transparent {
        @extend %dropdownMenu--transparent;
    }

}

URL: /components/raw/dropdownmenu/_dropdownMenu.styles.scss
Filesystem Path: components/03-fragments/dropdownMenu/_dropdownMenu.styles.scss
Size: 938 Bytes