# Dropdown

Ready

- HTML
- View
- Context
- Assets
- Info
- Notes

`

    <div class="dropdown">
        <a href="#">Corresponding Link</a>
        <input type="checkbox" role="button" aria-haspopup="true" id="toggle-unique-name" class="sr-only dropdown__checkbox" />
        <label for="toggle-unique-name" class="dropdown__toggle">
            <span class="icon icon-chevron-down-filled icon--brand-secondary"></span>
            <span class="sr-only dropdown__toggle__expanded-text">Untermenü einklappen</span>
            <span class="sr-only dropdown__toggle__collapsed-text">Untermenü ausklappen</span>
        </label>
        <div role="menu" data-origin="left" class="dropdown__list-wrapper">
            <ul class="dropdown__list">
                <li class="dropdown__list-item"><a href="#" class="dropdown__link">Strategie- und Technologieberatung</a></li>
                <li class="dropdown__list-item"><a href="#" class="dropdown__link">Entwicklung digitaler Geschäftsmodelle</a></li>
                <li class="dropdown__list-item"><a href="#" class="dropdown__link">Softwarearchitektur und -entwicklung</a></li>
                <li class="dropdown__list-item"><a href="#" class="dropdown__link">Digitale Plattformen und Infrastrukturen</a></li>
                <li class="dropdown__list-item"><a href="#" class="dropdown__link">Wissenstransfer, Coaching und Trainings</a></li>
            </ul>
        </div>
    </div>

`
`

    <div class="dropdown">
        <a href="#">Corresponding Link</a>
        <input type="checkbox" role="button" aria-haspopup="true" id="toggle-unique-name" class="sr-only dropdown__checkbox" />
        <label for="toggle-unique-name" class="dropdown__toggle">
            <span class="icon icon-chevron-down-filled icon--brand-secondary"></span>
            <span class="sr-only dropdown__toggle__expanded-text">Untermenü einklappen</span>
            <span class="sr-only dropdown__toggle__collapsed-text">Untermenü ausklappen</span>
        </label>
        <div role="menu" data-origin="left" class="dropdown__list-wrapper">
            <ul class="dropdown__list">
                <li class="dropdown__list-item"><a href="#" class="dropdown__link">Strategie- und Technologieberatung</a></li>
                <li class="dropdown__list-item"><a href="#" class="dropdown__link">Entwicklung digitaler Geschäftsmodelle</a></li>
                <li class="dropdown__list-item"><a href="#" class="dropdown__link">Softwarearchitektur und -entwicklung</a></li>
                <li class="dropdown__list-item"><a href="#" class="dropdown__link">Digitale Plattformen und Infrastrukturen</a></li>
                <li class="dropdown__list-item"><a href="#" class="dropdown__link">Wissenstransfer, Coaching und Trainings</a></li>
            </ul>
        </div>
    </div>

`
`

    /* No context defined. */

`
File:

- Content:
  `

      .dropdown__toggle {
        cursor: pointer;
        display: inline-block;

        .icon-chevron-down-filled {
          width: $spacer-xs;
          height: $spacer-xs;
          transition: standard-transition(background);

          &:hover,
          &:focus {
            background: $sharing-interaction-color;
          }
        }
      }

      .dropdown__list-wrapper {
        position: absolute;
        display: none;
      }

      .dropdown__list {
        @extend %list-unstyled;

        margin-bottom: 0;
      }

      .dropdown__link {
        min-width: 100%;
        white-space: nowrap;
      }

      .dropdown__checkbox:focus + .dropdown__toggle {
        color: $dropdown-link-hover-color;
        outline: none;
      }

      .dropdown__checkbox:checked + .dropdown__toggle > .dropdown__toggle__expanded-text {
        display: inline;
      }

      .dropdown__checkbox:checked + .dropdown__toggle > .dropdown__toggle__collapsed-text {
        display: none;
      }

      .dropdown__checkbox:not(:checked) + .dropdown__toggle > .dropdown__toggle__expanded-text {
        display: none;
      }

      .dropdown__checkbox:not(:checked) + .dropdown__toggle > .dropdown__toggle__collapsed-text {
        display: inline;
      }

      // show dropdown list when checkbox is checked
      .dropdown__checkbox:checked ~ .dropdown__list-wrapper {
        display: block;
      }

  `
- URL: /components/raw/dropdown/_dropdown.scss
- Filesystem Path: components/04-molecules/dropdown/_dropdown.scss
- Size: 1.1 KB

- Handle: @dropdown
- Preview:
  - With layout
  - Component only
- Filesystem Path: components/04-molecules/dropdown/dropdown.html

No notes defined.