PatternLab (1.0.31)

Appearance

Action Menu ​

An Action Menu is a button that opens a dropdown menu with a list of links or actions. It is commonly used to provide quick access to common actions or settings.

Nested Instances: Icon Button, Link Lists, Panel Dropdown (only JS version).

CSS Only Action Menu ​

.c-action-menu > .c-btn.-icon-btn + .c-list.-linklist

Show Code
html
<div class="h-pos-relative">
  <div class="c-action-menu h-inline-block">
    <div class="c-action-menu__row">
      <div class="c-action-menu__dropdown">
        <button type="button" class="c-btn -icon-btn -small -inverted">
          <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
          <span class="h-sr-only">Menü</span>
        </button>
        <ul class="c-list -linklist m-r-xxs">
          <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>
</div>

JS-Panel Action Menu ​

The JS-Panel Action Menu uses the Panel Dropdown

html
.c-btn.-icon-btn[data-target="#action-menu"]
+
.c-panel.-is-dropdown#action-menu
Show Code
html
<div class="h-pos-relative h-inline-block">
  <button type="button" class="c-btn -icon-btn -small -link" 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  -arrow-up-right -is-extra-small -m-r-xs" 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 class="c-link -icon-left -redesign" href="apotheker/labxpert/archiv/Rezeptur/overview/?tx_plausi_archiv%5Brezeptur%5D=3790641">
            <i class="far fa-arrow-circle-right" aria-hidden="true"></i>
            Öffnen
          </a>
        </li>
        <li class="c-list__item">
          <a data-identifier="3790641" data-context="rezeptur" class="delete c-link -icon-left -redesign" href="apotheker/labxpert/archiv/Archiv/delete/?tx_plausi_archiv%5Brezeptur%5D=3790641">
            <i class="far fa-trash" aria-hidden="true"></i>
            Löschen
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

2026 - Pharma4u