PatternLab (0.1.505)

Appearance

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 ​

html
.c-btn.-icon-btn[.-inverted, .-link, .-secondary...]
+
.c-action-menu[.h-float-right,... ] > .c-action-menu__row[.-last] > .c-action-menu__dropdown
Show Code
html
<div class="vp-raw 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 -redesign -inverted">
        <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>
</div>

JS-Panel Action Menu ​

TIP

Combination of Action Button and Dropdown

html
.c-btn.-icon-btn[.-inverted, .-link, .-secondary...][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 -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  -arrow-up-right -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 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 class="c-link -icon-left -redesign" href="de/nc/apotheker/labxpert/start/Rezeptur/new/?tx_plausi_labor%5Brezeptur%5D=3790641">
            <i class="far fa-pencil" aria-hidden="true"></i>
            Rezeptur verändern
          </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>

Small Action Btn and Dropdown ​

Show Code
html
<div class="h-pos-relative h-inline-block">
  <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  -arrow-up-right  -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>

2025 - Pharma4u