Action Menu

INFO

An Action Menu is a list of actions that appears when the user clicks on a button or icon.

This component utilizes a combination of Action Button and Link Lists.

CSS Only Action Menu

.c-btn.-icon-btn[.-inverted, .-link, .-secondary...]
+
.c-action-menu[.h-float-right,... ] > .c-action-menu__row[.-last] > .c-action-menu__dropdown

• Speichern (Online)
• Download (PDF)

• Speichern (Online)
• Download (PDF)

Show Code

<div class="c-action-menu h-flex h-flex-row h-end">
  <div class="c-action-menu__row">
    <div class="c-action-menu__dropdown">
      <button type="button" class="c-btn -icon-btn -small -redesign -link">
        <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
        <span class="h-sr-only">Menü</span>
      </button>
      <ul class="c-list -linklist">
        <li class="c-list__item">
          <a class="c-link -icon-left">
            <i class="far fa-save" aria-hidden="true"></i>
            Speichern (Online)
          </a>
        </li>
        <li class="c-list__item">
          <a class="js-plausi-download c-link -icon-left">
            <i class="far fa-download" aria-hidden="true" ></i>
            Download (PDF)
          </a>
        </li>
      </ul>
    </div>
  </div>
  <div class="c-action-menu__row">
    <div class="c-action-menu__dropdown">
      <button class="c-btn -small -light -dropdown -redesign">
        Drucken
      </button>
      <ul class="c-list -linklist">
        <li class="c-list__item">
          <a class="c-link -icon-left">
            <i class="far fa-save" aria-hidden="true"></i>
            Speichern (Online)
          </a>
        </li>
        <li class="c-list__item">
          <a class="c-link -icon-left">
            <i class="far fa-download" aria-hidden="true"></i>
            Download (PDF)
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

JS-Panel Action Menu

TIP

Combination of Action Button and Dropdown

.c-btn.-icon-btn[.-inverted, .-link, .-secondary...][data-target="#action-menu"]
+
.c-panel.-is-dropdown#action-menu

• Stoff löschen mit Word Wrapping Beispiel
• Details

Show Code

<div class="h-pos-relative">
  <button type="button" class="c-btn -icon-btn -inverted" data-target="#action-menu">
    <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
    <span class="h-sr-only">Menü</span>
  </button>
  <div class="c-panel -close-backdrop -is-dropdown -is-small" id="action-menu" role="menu" aria-haspopup="true">
    <div class="c-panel__inner">
      <ul class="c-list -linklist -fullwidth">
        <li class="c-list__item">
          <a href="#" class="c-link -icon-left">
            <i class="fas fa-trash" aria-hidden="true"></i>
            <span>Stoff löschen mit Word Wrapping Beispiel</span>
          </a>
        </li>
        <li class="c-list__item">
          <a href="student/" class="c-link -icon-left">
            <i class="fas fa-info-circle" aria-hidden="true"></i>
            <span>Details</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

Small Action Btn

• Stoff löschen
• Details

Show Code

<div class="h-pos-relative">
  <button type="button" class="c-btn -icon-btn -small -link" data-target="#action-menu2">
    <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
    <span class="h-sr-only">Menü</span>
  </button>
  <div class="c-panel -close-backdrop -is-dropdown -is-extra-small" id="action-menu2" role="menu" aria-haspopup="true">
    <div class="c-panel__inner">
      <ul class="c-list -linklist -fullwidth">
        <li class="c-list__item">
          <a href="#" class="c-link -icon-left">
            <i class="fas fa-trash" aria-hidden="true"></i>
            <span>Stoff löschen</span>
          </a>
        </li>
        <li class="c-list__item">
          <a href="#" class="c-link -icon-left">
            <i class="fas fa-info-circle" aria-hidden="true"></i>
            <span>Details</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>