Menu Button

The Menu Button is a flexible button component designed for interactive selection and navigation.

There are multiple variants of the Menu Button, including a single button, a static version or a template-style button. Each variation is designed to display structured information in a clear and concise manner, making it ideal for use in menus, lists, or selection interfaces.

• See also: Menu Button Row for a row-like format.

Nested Instances

• An optional Circular Icon or DuoTone Icon (default) on the left to convey more context
• An optional bottom icon .c-menu-btn__arrow to indicate additional actions or states
• An optional remove button .c-menu-btn__remove with Tooltip to delete an item.

Single Button

With Custom DuoTone Icons: .c-menu-btn > .c-duotone-icon

Link Name

Show Code

<a href="#" class="c-menu-btn">
  <span class="c-duotone-icon -md -neu" aria-hidden="true"></span>
  <span class="c-menu-btn__title">Link Name</span>
</a>

With Circular Icons: .c-menu-btn > .c-circular-icon

Neue Taxierung

Show Code

<a href="#" class="c-menu-btn">
  <div class="c-circular-icon -md" aria-hidden="true">
    <i class="c-duotone-icon -taxierung_dark -md"></i>
    <div class="c-context-icon -top -neu">
      <i class="far fa-plus"></i>
    </div>
  </div>
  <span class="c-menu-btn__title">Neue Taxierung</span>
</a>

Modifier Classes

Static Version

.c-menu-btn.-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 Version

Show Code

<div class="c-menu-btn -is-static">
    <button class="c-menu-btn__remove js-tooltip" aria-label="Optional remove btn" data-placement="bottom" data-title="Bereitstellung rückgängig machen">
      <i class="fa-solid fa-times" aria-hidden="true"></i>
    </button>
    <div class="c-circular-icon -md" aria-hidden="true">
      <i class="c-duotone-icon -abfuellung_dark -md"></i>
    </div>
  <span class="c-menu-btn__title">Static Version</span>
</div>

Selected State

.c-menu-btn.-is-selected

Link Name

Show Code

<div class="h-flex h-flex-row gap-m">
  <a href="#" class="c-menu-btn -is-selected">
      <span class="c-duotone-icon -md -neu_dark" aria-hidden="true"></span>
      <span class="c-menu-btn__title">Link Name</span>
  </a>
  <button type="button" class="c-menu-btn -is-selected">
    <span class="c-circular-icon -md" aria-hidden="true">
      <i class="c-duotone-icon -taxierung_dark -md"></i>
      <span class="c-context-icon -top -neu">
        <i class="far fa-plus"></i>
      </span>
    </span>
    <span class="c-menu-btn__title">Link Name 2</span>
  </button>
</div>

Disabled State

.c-menu-btn.-is-disabled

• For Links: Add role=link and aria-disabled="true" for accessibility
• For Buttons: Use the disabled attribute

Disabled Selected Button

Disabled Button with Circular Icon

Show Code

<div class="h-flex h-flex-row gap-m">
    <button class="c-menu-btn -is-disabled -has-link m-r-s" disabled="disabled">
        <span class="c-duotone-icon -md -neu_dark -is-disabled" aria-hidden="true"></span>
        <span class="c-menu-btn__title">Disabled Button</span>
        <span class="c-menu-btn__arrow"></span>
    </button>
    <a role="link" aria-disabled="true" class="c-menu-btn -is-disabled -is-selected -has-link m-r-s">
        <span class="c-duotone-icon -md -neu_dark -is-disabled" aria-hidden="true"></span>
        <span class="c-menu-btn__title">Disabled Selected Button</span>
        <span class="c-menu-btn__arrow"></span>
    </a>
    <a href="#" class="c-menu-btn -is-disabled">
      <div class="c-circular-icon -md -is-disabled" aria-hidden="true">
        <i class="c-duotone-icon -taxierung_dark -md"></i>
        <div class="c-context-icon -top -neu">
          <i class="far fa-plus"></i>
        </div>
      </div>
      <span class="c-menu-btn__title">Disabled Button with Circular Icon</span>
    </a>
</div>

Larger Title

.c-menu-btn__title.-large

Show Code

<button class="c-menu-btn">
    <span class="c-duotone-icon -xl -neu" aria-hidden="true"></span>
    <span class="c-menu-btn__title -large">Link Name</span>
</button>

Additional Bottom Icon

Usage Details

The additional bottom icon can be used to indicate different states or actions. Here are some common examples of how the bottom icon can be used:

• Dropdown Mode: Indicates expandable content with a downward arrow, often used for revealing additional options or submenus.
• Link Mode: Functions as a direct navigation button with a right-facing arrow, guiding users to another page or section.
• Search Mode: Features a search icon, opening an advanced search interface or filtering options.

.c-menu-btn[.-has-dropdown/.-has-link/.-has-search] > .c-menu-btn__arrow

I'm a link to another page

Show Code

<div class="h-flex h-flex-row gap-m">
    <button class="c-menu-btn -has-dropdown">
        <span class="c-duotone-icon -xl -rezeptur" aria-hidden="true"></span>
        <span class="c-menu-btn__title">I'm a dropdown</span>
        <span class="c-menu-btn__arrow"></span>
    </button>
    <a href="#" class="c-menu-btn -has-link">
        <span class="c-duotone-icon -xl -pdf" aria-hidden="true"></span>
        <span class="c-menu-btn__title">I'm a link to another page</span>
        <span class="c-menu-btn__arrow"></span>
    </a>
    <button class="c-menu-btn -has-search">
        <span class="c-duotone-icon -xl -taxierung" aria-hidden="true"></span>
        <span class="c-menu-btn__title">I open an advanced search interface</span>
        <span class="c-menu-btn__arrow"></span>
    </button>
</div>

Menu-Button Template

The Menu Button Template is a structured button component designed for displaying detailed information in a vertical layout. It features an icon, a prominent headline, and a list of key details, making it ideal for selecting items with rich metadata.

.c-menu-btn.-is-template.-has-link

NRF 11.51. Dithranol-Vaselin 0,25%

• Name: Random HA Name
• Nummer: 123123123
• Vorlage: Lorem Ipsum
• Zusammensetzung: Propranololhydrochlorid 0,1 g Grundlage für Suspensionen zum Einnehmen (NRF S.52.) ad 104 g

NRF 11.51. Dithranol-Vaselin 0,25%

• Name: Random HA Name
• Nummer: 123123123
• Vorlage: Lorem Ipsum

Show Code

<div class="h-flex h-flex-row gap-m">
  <a href="#"  class="c-menu-btn -has-link p-x-m">
    <div class="h-flex h-flex-column h-align-center h-width-100">
        <div class="c-circular-icon -xs" aria-hidden="true">
          <i class="c-duotone-icon -rezeptur_dark -sm"></i>
          <div class="c-context-icon -top -archiv -sm">
            <i class="fa-kit fa-archiv"></i>
          </div>
        </div>
        <div class="h-width-100">
            <div class="c-menu-btn__title h-type-base m-t-s h-width-100">NRF 11.51. Dithranol-Vaselin 0,25%</div>
            <ul class="c-list -no-bullets -small h-width-100 m-t-s">
                <li><strong>Name: </strong> <span>Random HA Name</span></li>
                <li><strong>Nummer: </strong> <span>123123123</span></li>
                <li><strong>Vorlage: </strong> <span>Lorem Ipsum</span></li>
                <li><strong>Zusammensetzung: </strong> <span>Propranololhydrochlorid 0,1 g Grundlage für Suspensionen zum Einnehmen (NRF S.52.) ad 104 g</span></li>
            </ul>
        </div>
    </div>
    <span class="c-menu-btn__arrow"></span>
  </a>
  <a href="#" class="c-menu-btn -has-link -is-disabled p-x-m" disabled="disabled">
    <div class="h-flex h-flex-column h-align-center h-width-100">
      <div class="c-circular-icon -xs -is-disabled" aria-hidden="true">
        <i class="c-duotone-icon -rezeptur_dark -sm"></i>
        <div class="c-context-icon -top -archiv -sm">
          <i class="fa-kit fa-archiv"></i>
        </div>
      </div>
      <div class="h-width-100">
          <div class="c-menu-btn__title h-type-base m-t-s h-width-100">NRF 11.51. Dithranol-Vaselin 0,25%</div>
          <ul class="c-list -no-bullets -small m-t-s">
              <li><strong>Name: </strong> <span>Random HA Name</span></li>
              <li><strong>Nummer: </strong> <span>123123123</span></li>
              <li><strong>Vorlage: </strong> <span>Lorem Ipsum</span></li>
          </ul>
      </div>
    </div>
    <span class="c-menu-btn__arrow"></span>
  </a>
</div>