Dropdown

En dropdown kan du till exempel använda för en meny.

Design och språk

En dropdown

  • används när du vill dölja val som användaren inte behöver ha tillgång till hela tiden, till exempel en meny eller avancerad funktionalitet
  • kan innehålla till exempel en meny, knappar, bilder, länkar och texter
  • kan öppnas av flera olika typer av komponenter
  • placeras ovanpå innehållet på sidan.

Komponenter och kod

Parametrar på dropdown

Egenskap

Attribut

Beskrivning

Typ

Förvalt värde

btnRef

btn-ref

Referens till knappen som triggar dropdownen.

string

-

contentRef

content-ref

Referens till innehållet i dropdown.

string

-

open

open

Ska dropdownen var utfälld?

boolean

false

options

options

Ett friviligt attribut för att ändra storlek, högerjustering. Exempel: {

size: 'large', alignRight: false, offset: 10

}

json/string

-


Large

<jv-dropdown btn-ref="triggerBtn_large" content-ref="content" options="{
              size: 'large'
            }">
  <button role="button" slot="triggerBtn_large" class="c-btn-text--large sjv-caret-test" aria-haspopup="menu">
     Inmatningsfält &nbsp;<span class="sjv-i-caret-ner"></span>
  </button>
  <ul slot="content" class="env-breadcrumb">
    <li><a class="c-btn-text--medium" href="https://styleguide.jordbruksverket.se/komponenter/bifoga-fil.html">Bifoga fil</a></li>
    <li><a class="c-btn-text--medium" href="https://styleguide.jordbruksverket.se/komponenter/inmatningsfalt/checkboxar.html">Checkboxar</a></li>
    <li><a class="c-btn-text--medium" href="https://styleguide.jordbruksverket.se/komponenter/inmatningsfalt/datumfalt.html">Datumfält</a></li>
    <li><a class="c-btn-text--medium" href="https://styleguide.jordbruksverket.se/komponenter/inmatningsfalt/multi-select.html">Multi-select</a></li>
    <li><a class="c-btn-text--medium" href="https://styleguide.jordbruksverket.se/komponenter/inmatningsfalt/multitextfalt.html">Multitextfält</a></li>
    <li><a class="c-btn-text--medium" href="https://styleguide.jordbruksverket.se/komponenter/inmatningsfalt/radioknappar.html">Radioknappar</a></li>
    <li><a class="c-btn-text--medium" href="https://styleguide.jordbruksverket.se/komponenter/inmatningsfalt/single-select.html">Single-select</a></li>
    <li><a class="c-btn-text--medium" href="https://styleguide.jordbruksverket.se/komponenter/inmatningsfalt/textyta.html">Textyta</a></li>
    <li><a class="c-btn-text--medium" href="https://styleguide.jordbruksverket.se/komponenter/inmatningsfalt/textfalt.html">Inmatningsfält</a></li>
  </ul>
</jv-dropdown>

Medium

<jv-dropdown btn-ref="triggerBtn_medium" content-ref="content" options="{
              size: 'medium'
            }">
  <button role="button" slot="triggerBtn_medium" class="c-btn-text--medium sjv-caret-test" aria-haspopup="menu">
    Inmatningsfält &nbsp;<span class="sjv-i-caret-ner"></span>
  </button>
  <ul slot="content" class="env-breadcrumb">
    <li><a class="c-btn-text--medium" href="https://styleguide.jordbruksverket.se/komponenter/bifoga-fil.html">Bifoga fil</a></li>
    <li><a class="c-btn-text--medium" href="https://styleguide.jordbruksverket.se/komponenter/inmatningsfalt/checkboxar.html">Checkboxar</a></li>
    <li><a class="c-btn-text--medium" href="https://styleguide.jordbruksverket.se/komponenter/inmatningsfalt/datumfalt.html">Datumfält</a></li>
    <li><a class="c-btn-text--medium" href="https://styleguide.jordbruksverket.se/komponenter/inmatningsfalt/multi-select.html">Multi-select</a></li>
    <li><a class="c-btn-text--medium" href="https://styleguide.jordbruksverket.se/komponenter/inmatningsfalt/multitextfalt.html">Multitextfält</a></li>
    <li><a class="c-btn-text--medium" href="https://styleguide.jordbruksverket.se/komponenter/inmatningsfalt/radioknappar.html">Radioknappar</a></li>
    <li><a class="c-btn-text--medium" href="https://styleguide.jordbruksverket.se/komponenter/inmatningsfalt/single-select.html">Single-select</a></li>
    <li><a class="c-btn-text--medium" href="https://styleguide.jordbruksverket.se/komponenter/inmatningsfalt/textyta.html">Textyta</a></li>
    <li><a class="c-btn-text--medium" href="https://styleguide.jordbruksverket.se/komponenter/inmatningsfalt/textfalt.html">Inmatningsfält</a></li>
  </ul>
</jv-dropdown>

Small

<jv-dropdown btn-ref="triggerBtn_small" options="{
                size: 'small'
              }" content-ref="content_small">
  <button role="button" slot="triggerBtn_small" class="c-btn-text--small sjv-caret-test" aria-haspopup="menu">
    Bilder &nbsp;<span class="sjv-i-caret-ner"></span>
  </button>
  <div slot="content_small">
    <div style="padding: 0.5rem">
      <img src="https://cdn.jordbruksverket.se/designsystem/13.0.0/package/dist/release/assets/dropdown_small_img1.jpg" aria-hidden="true">
    </div>
    <div style="padding: 0.5rem">
      <img src="https://cdn.jordbruksverket.se/designsystem/13.0.0/package/dist/release/assets/dropdown_small_img2.jpg" aria-hidden="true">
    </div>
    <div style="padding: 0.5rem">
      <img src="https://cdn.jordbruksverket.se/designsystem/13.0.0/package/dist/release/assets/dropdown_small_img3.jpg" aria-hidden="true">
    </div>
    <div style="padding: 0.5rem; padding-bottom: 0">
      <img src="https://cdn.jordbruksverket.se/designsystem/13.0.0/package/dist/release/assets/dropdown_small_img4.jpg" aria-hidden="true">
    </div>
  </div>
</jv-dropdown>

Höger justerad

<jv-dropdown btn-ref="triggerBtn_right" options="{
                size: 'medium',
                alignRight: true
              }" content-ref="content_right-align">
  <button role="button" slot="triggerBtn_right" class="c-btn-text--medium sjv-caret-test" aria-haspopup="menu">
    Inmatningsfält &nbsp;<span class="sjv-i-caret-ner"></span>
  </button>
  <ul slot="content_right-align" class="env-breadcrumb">
    <li><a class="c-btn-text--medium" href="https://styleguide.jordbruksverket.se/komponenter/bifoga-fil.html">Bifoga fil</a></li>
    <li><a class="c-btn-text--medium" href="https://styleguide.jordbruksverket.se/komponenter/inmatningsfalt/checkboxar.html">Checkboxar</a></li>
    <li><a class="c-btn-text--medium" href="https://styleguide.jordbruksverket.se/komponenter/inmatningsfalt/datumfalt.html">Datumfält</a></li>
    <li><a class="c-btn-text--medium" href="https://styleguide.jordbruksverket.se/komponenter/inmatningsfalt/multi-select.html">Multi-select</a></li>
    <li><a class="c-btn-text--medium" href="https://styleguide.jordbruksverket.se/komponenter/inmatningsfalt/multitextfalt.html">Multitextfält</a></li>
    <li><a class="c-btn-text--medium" href="https://styleguide.jordbruksverket.se/komponenter/inmatningsfalt/radioknappar.html">Radioknappar</a></li>
    <li><a class="c-btn-text--medium" href="https://styleguide.jordbruksverket.se/komponenter/inmatningsfalt/single-select.html">Single-select</a></li>
    <li><a class="c-btn-text--medium" href="https://styleguide.jordbruksverket.se/komponenter/inmatningsfalt/textyta.html">Textyta</a></li>
    <li><a class="c-btn-text--medium" href="https://styleguide.jordbruksverket.se/komponenter/inmatningsfalt/textfalt.html">Inmatningsfält</a></li>
  </ul>
</jv-dropdown>

Annan typ av knapp

Jordbruksverkets styleguide

Styleguiden innehåller både färdiga komponenter som går att återanvända i flera typer av digitala tjänster samt riktlinjer för språk och grafisk design. Genom att använda styleguiden blir utvecklingen mer kostnadseffektiv och våra digitala tjänster blir mer tillgängliga och enhetliga.

<jv-dropdown btn-ref="triggerBtn_text_image" options="{
                size: 'medium'
              }" content-ref="content_medium">
  <button role="button" slot="triggerBtn_text_image" class="c-primary-btn--medium sjv-caret-test" aria-haspopup="menu">
    Jordbruksverkets styleguide &nbsp;<span class="sjv-i-caret-ner"></span>
  </button>
  <div slot="content_medium">
    <h3 class="margin-top-zero">Jordbruksverkets styleguide</h3>
    <p>
      Styleguiden innehåller både färdiga komponenter som går att återanvända i flera typer av digitala
      tjänster samt riktlinjer för språk och grafisk design. Genom att använda styleguiden blir utvecklingen
      mer kostnadseffektiv och våra digitala tjänster blir mer tillgängliga och enhetliga.
    </p>
  </div>
</jv-dropdown>

Senast publicerad 2021-02-04

Sidansvarig för sidan är Styleguide