PatternLab (1.3.1)

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"
                aria-controls="css-action-menu"
                aria-haspopup="true"
                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"
            id="css-action-menu">
          <li class="c-list__item">
            <a class="c-link -icon-left" href="#">
              <i class="far fa-eye fa-fw" aria-hidden="true"></i>
              Öffnen
            </a>
          </li>
          <li class="c-list__item">
            <a href="#" class="c-link -icon-left" disabled>
              <i class="far fa-arrow-rotate-left fa-fw" aria-hidden="true"></i>
              Erneut herstellen
            </a>
          </li>
          <li class="c-list__item">
            <a href="#" class="c-link -icon-left">
              <i class="far fa-pencil fa-fw" aria-hidden="true"></i>
              Rezeptur verändern
            </a>
          </li>
          <li class="c-list__item">
            <a href="#" class="c-link -icon-left">
              <i class="far fa-euro fa-fw" aria-hidden="true"></i>
              Rezeptur taxieren
            </a>
          </li>
          <li class="c-list__item">
            <button type="button" class="c-link -error -icon-left">
              <i class="far fa-trash fa-fw" aria-hidden="true"></i>
              Löschen
            </button>
          </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"
          aria-controls="action-menu"
          aria-haspopup="true"
          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-small -m-r-xs" id="action-menu">
    <div class="c-panel__inner">
      <ul class="c-list -linklist -fullwidth">
        <li class="c-list__item">
          <a class="c-link -icon-left" href="#">
            <i class="far fa-eye fa-fw" aria-hidden="true"></i>
            Öffnen
          </a>
        </li>
        <li class="c-list__item">
          <a href="#" class="c-link -icon-left" disabled>
            <i class="far fa-arrow-rotate-left fa-fw" aria-hidden="true"></i>
            Erneut herstellen
          </a>
        </li>
        <li class="c-list__item">
          <a href="#" class="c-link -icon-left">
            <i class="far fa-pencil fa-fw" aria-hidden="true"></i>
            Rezeptur verändern
          </a>
        </li>
        <li class="c-list__item">
          <a href="#" class="c-link -icon-left">
            <i class="far fa-euro fa-fw" aria-hidden="true"></i>
            Rezeptur taxieren
          </a>
        </li>
        <li class="c-list__item">
          <button type="button" class="c-link -error -icon-left">
            <i class="far fa-trash fa-fw" aria-hidden="true"></i>
            Löschen
          </button>
        </li>
      </ul>
    </div>
  </div>
</div>

2026 - Pharma4u