PatternLab (1.0.18)

Appearance

Menu Button ​

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

There are multiple variations of the Menu Button, including a single button, 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 that presents multiple data points while remaining fully interactive and selectable.

Single Button ​

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

Link Name
Show Code
html
<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
html
<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 ​

Selected State ​

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

Show Code
html
<button 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>
</button>

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

Neue Taxierung
Show Code
html

<a href="#" class="c-menu-btn -is-selected">
  <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>

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 ButtonDisabled Button with Circular Icon
Show Code
html
<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
html
<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 ​

Details

If the menu button has an additional icon at the bottom, it can be used to indicate different states or actions. This icon is optional and can be customized based on the specific use case. 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] > .c-menu-btn__arrow

I'm a link to another page
Show Code
html
<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>

WARNING

TODO: fix the layout

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
html
<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>
            <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>
          <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>

2026 - Pharma4u