Freie Grundschule Pfefferwerk - Frontend Design

Menu Dropdown 

<!--
    @int:
    no JS needed, checkbox hack for dropdown menu
    for button styles, add button classes e.g. c-button c-button--primary to <label>
-->
<div class="c-dropdown">
    <input id="input-checkbox-label" type="checkbox" class="c-dropdown__checkbox">
    <label class="c-dropdown__trigger " for="input-checkbox-label">Klick Me</label>
    <nav class="c-dropdown__menu">
        <ul class="c-dropdown__list">
            <li class="c-dropdown__item">
                <a href="#" class="c-dropdown__link">
                        Aliquam tincidunt
                    </a>
            </li>
            <li class="c-dropdown__item">
                <a href="#" class="c-dropdown__link">
                        Integer vitae libero ac risus egestas
                    </a>
            </li>
            <li class="c-dropdown__item">
                <a href="#" class="c-dropdown__link">
                        Aliquam tincidunt
                    </a>
            </li>
        </ul>
    </nav>
</div>
 
<!--
    @int:
    no JS needed, checkbox hack for dropdown menu
    for button styles, add button classes e.g. c-button c-button--primary to <label>
-->
<div class="c-dropdown">
    <input id="input-checkbox-label" type="checkbox" class="c-dropdown__checkbox">
    <label class="c-dropdown__trigger {{#buttonClass}}c-button c-button--primary{{/buttonClass}}" for="input-checkbox-label">{{dropdownLabel}}</label>
    <nav class="c-dropdown__menu">
        <ul class="c-dropdown__list">
            {{#each dropdownItems}}
                <li class="c-dropdown__item">
                    <a href="#" class="c-dropdown__link">
                        {{dropdownLink}}
                    </a>
                </li>
            {{/each}}
        </ul>
    </nav>
</div>
 
{
  "buttonClass": null,
  "dropdownLabel": "Klick Me",
  "dropdownItems": [
    {
      "dropdownLink": "Aliquam tincidunt"
    },
    {
      "dropdownLink": "Integer vitae libero ac risus egestas"
    },
    {
      "dropdownLink": "Aliquam tincidunt"
    }
  ]
}
  • Handle: @menu-dropdown
  • Preview:
  • Filesystem Path: 02-fractal/src/020-components/010-menu/menu-dropdown/menu-dropdown.hbs

There are no notes for this item.