Menu Button Row work in progress

The MenuBtnRow is a versatile button component based on the classic Menu Button designed to display structured information in a horizontal layout. Similar to a table row, it presents multiple data points while remaining fully interactive and selectable. Ideal for use in menus, lists, or selection interfaces where users need to quickly access detailed information at a glance.

Nested Instances

• An optional Circular Icon or DuoTone Icon (default) on the left to convey more context
• An optional “RemoveBtn” .c-menu-btn__remove to delete the item
• An optional Icon Button on the right for any kind of action (in static versions only this button is clickable!)

Usage Details

• Adding a Tooltip improves usability by providing users with clarity on where the Menu-Button Row leads before they interact with it.
• Use Grid for layouting the content.

TODOs

• Test + fix print styles
• Improve responsiveness, add dividers to grid? update grid?

Static Version

.c-menu-btn.-is-row.-is-static

Usage Details

Use the static version to display read-only data and the default interactive version if the whole container should be a link or button.

Static Example

Try hovering over me.

Bezeichnung

NRF 11.100. Hydrophile Tretinoin-Creme 0,1 % aus Rezeptursubstanz

Datum

12.04.2025

Show Code

<div class="c-menu-btn -is-row -is-static" tabindex="0">
  <button class="c-menu-btn__remove js-tooltip" aria-label="Bereitstellung rückgängig machen" data-placement="bottom" data-title="Bereitstellung rückgängig machen">
    <i class="fa-solid fa-times" aria-hidden="true"></i>
  </button>
  <div class="c-menu-btn__icon">
    <div class="c-circular-icon -xs" aria-hidden="true">
      <i class="c-duotone-icon -pruefung_dark -sm"></i>
    </div>
  </div>
  <div class="grid-noGutter h-width-100">
    <div class="col-2_sm-12 p-r-12">
      <p class="h-color-dark-gray h-type-extra-small -redesign m-b-xxs h-type-bold h-no-wrap h-overflow-ellipsis">Static Example</p>
      <p class="h-type-bold h-type-small">Try hovering over me.</p>
    </div>
    <div class="col-7_sm-12 h-border-left-light-gray p-x-12">
      <p class="h-color-dark-gray h-type-extra-small -redesign m-b-xxs h-type-bold h-no-wrap h-overflow-ellipsis">Bezeichnung</p>
      <p class="h-type-bold h-type-small">NRF 11.100. Hydrophile Tretinoin-Creme 0,1 % aus Rezeptursubstanz</p>
    </div>
    <div class="col-3_sm-12 h-border-left-light-gray p-x-12">
      <p class="h-color-dark-gray h-type-extra-small -redesign m-b-xxs h-type-bold h-no-wrap h-overflow-ellipsis">Datum</p>
      <p class="h-type-bold h-type-small">12.04.2025</p>
    </div>
  </div>
  <a href="#" aria-label="In neuem Tab öffnen" class="c-btn -icon-btn -small -primarylight m-l-auto js-tooltip print-hide" data-title="In neuem Tab öffnen" data-placement="bottom">
    <i class="fa-regular fa-arrow-up-right-from-square" aria-hidden="true"></i>
  </a>
</div>

Interactive Example

.c-menu-btn.-is-row > .c-menu-btn__remove

Interactive Example

Fertigarzneimittel

Bezeichnung

NRF 11.100. Hydrophile Tretinoin-Creme 0,1 % aus Rezeptursubstanz

Datum

12.04.2025

Example With Remove Button

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Show Code

<div class="c-menu-btn -is-row" role="button" tabindex="0">
  <div class="c-menu-btn__icon">
    <div class="c-circular-icon -xs -has-status -success" aria-hidden="true">
      <i class="c-duotone-icon -pruefung_dark -sm"></i>
    </div>
  </div>
  <div class="grid-noGutter h-width-100">
    <div class="col-3_sm-12 p-r-12">
      <p class="h-color-dark-gray h-type-extra-small -redesign m-b-xxs h-type-bold h-no-wrap h-overflow-ellipsis">Interactive Example</p>
      <p class="h-type-bold h-type-small">Fertigarzneimittel</p>
    </div>
    <div class="col-6_sm-12 h-border-left-light-gray p-x-12">
      <p class="h-color-dark-gray h-type-extra-small -redesign m-b-xxs h-type-bold h-no-wrap h-overflow-ellipsis">Bezeichnung</p>
      <p class="h-type-bold h-type-small">NRF 11.100. Hydrophile Tretinoin-Creme 0,1 % aus Rezeptursubstanz</p>
    </div>
    <div class="col-3_sm-12 h-border-left-light-gray p-x-12">
      <p class="h-color-dark-gray h-type-extra-small -redesign m-b-xxs h-type-bold h-no-wrap h-overflow-ellipsis">Datum</p>
      <p class="h-type-bold h-type-small">12.04.2025</p>
    </div>
  </div>
  <a href="#" class="c-btn -icon-btn -small -primarylight m-l-auto js-tooltip print-hide"
     aria-label="Öffnen"
     data-title="Öffnen"
     data-placement="bottom">
    <i class="fa-regular fa-arrow-right" aria-hidden="true"></i>
  </a>
</div>
<div class="c-menu-btn -is-row m-t-s" role="button">
  <button class="c-menu-btn__remove js-tooltip"
          aria-label="Bereitstellung rückgängig machen"
          data-title="Bereitstellung rückgängig machen"
          data-placement="bottom">
    <i class="fa-solid fa-times" aria-hidden="true"></i>
  </button>
  <div class="c-menu-btn__icon">
    <div class="c-circular-icon -xs -has-status -error" aria-hidden="true">
      <i class="c-duotone-icon -defektur_dark -sm"></i>
    </div>
  </div>
  <div class="grid-noGutter h-width-100">
    <div>
      <p class="h-color-dark-gray h-type-extra-small -redesign m-b-xxs h-type-bold h-no-wrap h-overflow-ellipsis">Example With Remove Button</p>
      <p class="h-type-bold h-type-small">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
    </div>
  </div>
</div>

Modifier Classes

Selected State

.c-menu-btn.-is-row[.-is-selected]

Interactive Example

Fertigarzneimittel

Bezeichnung

NRF 11.100. Hydrophile Tretinoin-Creme 0,1 % aus Rezeptursubstanz

Datum

12.04.2025

Show Code

<div class="c-menu-btn -is-row -is-selected" role="button" tabindex="0">
  <div class="c-menu-btn__icon">
    <div class="c-circular-icon -xs -has-status -success" aria-hidden="true">
      <i class="c-duotone-icon -pruefung_dark -sm"></i>
    </div>
  </div>
  <div class="grid-noGutter h-width-100">
    <div class="col-3_sm-12 p-r-12">
      <p class="h-color-dark-gray h-type-extra-small -redesign m-b-xxs h-type-bold h-no-wrap h-overflow-ellipsis">Interactive Example</p>
      <p class="h-type-bold h-type-small">Fertigarzneimittel</p>
    </div>
    <div class="col-6_sm-12 h-border-left-light-gray p-x-12">
      <p class="h-color-dark-gray h-type-extra-small -redesign m-b-xxs h-type-bold h-no-wrap h-overflow-ellipsis">Bezeichnung</p>
      <p class="h-type-bold h-type-small">NRF 11.100. Hydrophile Tretinoin-Creme 0,1 % aus Rezeptursubstanz</p>
    </div>
    <div class="col-3_sm-12 h-border-left-light-gray p-x-12">
      <p class="h-color-dark-gray h-type-extra-small -redesign m-b-xxs h-type-bold h-no-wrap h-overflow-ellipsis">Datum</p>
      <p class="h-type-bold h-type-small">12.04.2025</p>
    </div>
  </div>
  <a href="#" aria-label="Öffnen" class="c-btn -icon-btn -small -primarylight m-l-auto js-tooltip print-hide" data-title="Öffnen" data-placement="bottom">
    <i class="fa-regular fa-arrow-right" aria-hidden="true"></i>
  </a>
</div>

Disabled State

.c-menu-btn.-is-row[.-is-disabled]

Disabled Example

Lorem ipsum dolor sit amet

Disabled Static Example

Lorem ipsum dolor sit amet

Show Code

<div class="c-menu-btn -is-row -is-disabled" disabled role="button" tabindex="0">
  <button class="c-menu-btn__remove js-tooltip" disabled aria-label="Bereitstellung rückgängig machen" data-placement="bottom" data-title="Bereitstellung rückgängig machen">
    <i class="fa-solid fa-times" aria-hidden="true"></i>
  </button>
  <div class="c-menu-btn__icon">
    <div class="c-circular-icon -xs -is-disabled" aria-hidden="true">
      <i class="c-duotone-icon -pruefung_dark -sm"></i>
    </div>
  </div>
  <div class="grid h-width-100">
    <div>
      <p class="h-color-dark-gray h-type-extra-small -redesign m-b-xxs h-type-bold h-no-wrap h-overflow-ellipsis">Disabled Example</p>
      <p class="h-type-bold h-type-small">Lorem ipsum dolor sit amet</p>
    </div>
  </div>
  <a disabled
     class="c-btn -icon-btn -small -primarylight m-l-auto js-tooltip print-hide"
     data-title="In Bearbeitung"
     aria-label="In Bearbeitung"
     data-placement="bottom">
    <i class="fa-regular fa-arrow-right" aria-hidden="true"></i>
  </a>
</div>
<div class="c-menu-btn -is-row -is-static -is-disabled m-t-s" disabled role="button" tabindex="0">
  <button class="c-menu-btn__remove js-tooltip" disabled aria-label="Bereitstellung rückgängig machen" data-placement="bottom" data-title="Bereitstellung rückgängig machen">
    <i class="fa-solid fa-times" aria-hidden="true"></i>
  </button>
  <div class="c-menu-btn__icon">
    <div class="c-circular-icon -xs -is-disabled" aria-hidden="true">
      <i class="c-duotone-icon -pruefung_dark -sm"></i>
    </div>
  </div>
  <div class="grid h-width-100">
    <div>
      <p class="h-color-dark-gray h-type-extra-small -redesign m-b-xxs h-type-bold h-no-wrap h-overflow-ellipsis">Disabled Static Example</p>
      <p class="h-type-bold h-type-small">Lorem ipsum dolor sit amet</p>
    </div>
  </div>
</div>

Upload Style

.c-menu-btn.-is-row[.-is-upload]

Show Code

<button type="button" class="c-menu-btn -is-row -is-upload print-hide" tabindex="0">
  <span class="c-link">
    <i class="fa-regular fa-plus m-r-xs" aria-hidden="true"></i>
    Upload a file ...
  </span>
</button>