Dropdown

Dropdown

Open this example in a new tab

Code

Markup

<div class="">
  <div data-module="govuk-dropdown" class="idsk-dropdown__wrapper">
    <button class="idsk-button idsk-dropdown" type="button" aria-label="Rozbaliť " aria-haspopup="listbox">
      <span class="idsk-button__text">slovenčina</span>
      <span class="material-icons" aria-hidden="true">arrow_drop_down</span>
    </button>
    <ul id="undefined-dropdown" class="idsk-dropdown__options idsk-dropdown__options--down" data-testid="dropdown-options">
        <li class="idsk-dropdown__option idsk-pseudolabel__wrapper" data-pseudolabel="english">
          <a href="#" lang="en">english</a>
        </li>
        <li class="idsk-dropdown__option idsk-pseudolabel__wrapper" data-pseudolabel="український">
          <a href="#" lang="uk">український</a>
        </li>
    </ul>
  </div>
</div>

Macro

{% from "govuk/components/dropdown/macro.njk" import govukDropdown %}

{{ govukDropdown(undefined) }}

Dropdown vlastný obsah

Open this example in a new tab

Dropdown s vlastným obsahom

Code

Markup

<div class="">
  <div data-module="govuk-dropdown" class="idsk-dropdown__wrapper">
    <button class="idsk-button idsk-dropdown" type="button" aria-label="Rozbaliť " aria-haspopup="listbox">
      <span class="idsk-button__text">Možnosť 1</span>
      <span class="material-icons" aria-hidden="true">arrow_drop_down</span>
    </button>
    <ul id="undefined-dropdown" class="idsk-dropdown__options idsk-dropdown__options--down" data-testid="dropdown-options">
          <li class="idsk-dropdown__option idsk-pseudolabel__wrapper" data-pseudolabel="Možnosť 1">
            <a href="#" >
              Možnosť 1
            </a>
          </li>
          <li class="idsk-dropdown__option idsk-pseudolabel__wrapper" data-pseudolabel="Možnosť 2">
            <a href="#" >
              Možnosť 2
            </a>
          </li>
          <li class="idsk-dropdown__option idsk-pseudolabel__wrapper" data-pseudolabel="Možnosť 3">
            <a href="#" >
              Možnosť 3
            </a>
          </li>
    </ul>
  </div>
</div>

Macro

{% from "govuk/components/dropdown/macro.njk" import govukDropdown %}

{{ govukDropdown({
  selected: "Možnosť 1",
  items: [
    {
      text: "Možnosť 1",
      href: "#"
    },
    {
      text: "Možnosť 2",
      href: "#"
    },
    {
      text: "Možnosť 3",
      href: "#"
    }
  ]
}) }}