Menu-Btn new

INFO

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, and a row-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.

Based on Custom DuoTone Icons

Single Button

.c-menu-btn

Show Code

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

TIP

Use the keyboard Tab key to navigate through the buttons and show the :focus-visible state.

Modifiers

Selected State

.c-menu-btn__title.-is-selected

Show Code

<button class="c-menu-btn -is-selected">
    <span class="c-duotone-icon -md -neu" aria-hidden="true"></span>
    <div class="c-menu-btn__title">Link Name</div>
</button>

Disabled State

.c-menu-btn.-is-disabled

Show Code

<div class="h-flex">
    <button class="c-menu-btn -is-disabled -has-link m-r-s" disabled="disabled">
        <span class="c-duotone-icon -md -neu -is-disabled" aria-hidden="true"></span>
        <div class="c-menu-btn__title">Disabled Button</div>
        <span class="c-menu-btn__arrow"></span>
    </button>
    <button class="c-menu-btn -is-disabled -is-selected -has-link m-r-s" disabled="disabled">
        <span class="c-duotone-icon -md -neu -is-disabled" aria-hidden="true"></span>
        <div class="c-menu-btn__title">Disabled Selected Button</div>
        <span class="c-menu-btn__arrow"></span>
    </button>
</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>
    <div class="c-menu-btn__title -large">Link Name</div>
</button>

Additional Icons

INFO

The optional icon on the bottom indicates different states:

• 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.

All variants feature an icon, a title, and a subtle separator for visual clarity. The component adapts to different use cases while maintaining a clean and accessible design.

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

WARNING

Use the <button> tag for interactive elements and <a href="#"> for navigation.

I'm a link to another page

Show Code

<div class="tw-relative tw-grid tw-w-full tw-gap-6 tw-grid-cols-3">
    <button class="c-menu-btn -has-dropdown">
        <span class="c-duotone-icon -xl -rezeptur" aria-hidden="true"></span>
        <div class="c-menu-btn__title">I'm a dropdown</div>
        <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>
        <div class="c-menu-btn__title">I'm a link to another page</div>
        <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>
        <div class="c-menu-btn__title">I open an advanced search interface</div>
        <span class="c-menu-btn__arrow"></span>
    </button>
</div>

Menu-Button Template new

INFO

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="tw-relative tw-grid tw-w-full tw-gap-6 tw-grid-cols-2">
<a href="#"  class="c-menu-btn -has-link p-x-m">
        <div class="h-flex h-flex-column h-type-align-center h-width-100">
            <i class="fad fa-file-lines fa-3x" aria-hidden="true"></i>
            <div>
                <div class="c-menu-btn__title h-type-base m-t-m  h-width-100">NRF 11.51. Dithranol-Vaselin 0,25%</div>
                <ul class="c-list -no-bullets -small h-width-100 m-t-l">
                    <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-type-align-center h-width-100">
            <i class="fad fa-file-lines fa-3x" aria-hidden="true"></i>
            <div class="c-menu-btn__title h-type-base m-t-m h-width-100">NRF 11.51. Dithranol-Vaselin 0,25%</div>
            <ul class="c-list -no-bullets -small h-width-100 m-t-l">
                <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>
        <span class="c-menu-btn__arrow"></span>
    </a>
</div>

Menu-Button Row new

INFO

Menu-Button Row is a versatile button component designed to display structured information in a row-like format. 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.

Adding a tooltip improves usability by providing users with clarity about the button's function or purpose.

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

Prüfung

Fertigarzneimittel

Bezeichnung

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

Prüfung

Fertigarzneimittel

Bezeichnung

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

Prüfung

Fertigarzneimittel

Bezeichnung

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

Another Example

Custom Style

Title

Grid Template Columns Example

Dokumenten-Nr.

Aö00004

Datum

12.04.2025

Show Code

<div class="tw-space-y-4">
    <div class="c-menu-btn -is-row js-tooltip" data-title="Auswählen" data-placement="right" tabindex="0">
        <div class="tw-flex tw-items-center tw-justify-center">
            <span class="c-duotone-icon -md -pruefung" aria-hidden="true"></span>
        </div>
        <div class="tw-flex tw-flex-col tw-px-3 h-border-right-light-gray">
            <p class="h-color-gray h-type-extra-small -redesign m-b-xxs h-type-bold h-no-wrap h-overflow-ellipsis">Prüfung</p>
            <p class="h-type-bold h-type-small">Fertigarzneimittel</p>
        </div>
        <div class="tw-flex tw-flex-col tw-px-3">
            <p class="h-color-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="tw-flex tw-items-center tw-justify-center">
            <button aria-label="Öffnen und signieren" class="c-btn -icon-btn -small -link -flat">
                <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
            </button>
        </div>
    </div>
        <div class="c-menu-btn -is-row js-tooltip -is-disabled" disabled="disabled" data-title="Bereits verknüpft" data-placement="right" tabindex="0">
        <div class="tw-flex tw-items-center tw-justify-center">
            <span class="c-duotone-icon -md -pruefung -is-disabled" aria-hidden="true"></span>
        </div>
        <div class="tw-flex tw-flex-col tw-px-3 h-border-right-light-gray">
            <p class="h-color-gray h-type-extra-small -redesign m-b-xxs h-type-bold h-no-wrap h-overflow-ellipsis">Prüfung</p>
            <p class="h-type-bold h-type-small">Fertigarzneimittel</p>
        </div>
        <div class="tw-flex tw-flex-col tw-px-3">
            <p class="h-color-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="tw-flex tw-items-center tw-justify-center">
            <button aria-label="Öffnen und signieren" class="c-btn -icon-btn -small -link -flat -disabled" disabled="disabled">
                <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
            </button>
        </div>
    </div>
    <div class="c-menu-btn -is-row -is-selected js-tooltip" data-title="Auswählen" data-placement="right" tabindex="0">
        <div class="tw-flex tw-items-center tw-justify-center">
            <span class="c-duotone-icon -md -pruefung" aria-hidden="true"></span>
        </div>
        <div class="tw-flex tw-flex-col tw-px-3 h-border-right-light-gray">
            <p class="h-color-gray h-type-extra-small -redesign m-b-xxs h-type-bold h-no-wrap h-overflow-ellipsis">Prüfung</p>
            <p class="h-type-bold h-type-small">Fertigarzneimittel</p>
        </div>
        <div class="tw-flex tw-flex-col tw-px-3">
            <p class="h-color-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="tw-flex tw-items-center tw-justify-center">
            <button aria-label="Öffnen und signieren" class="c-btn -icon-btn -small -link -flat">
                <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
            </button>
        </div>
    </div>
    <div class="c-menu-btn -is-row tw-grid" style="grid-template-columns: auto minmax(4rem, 1fr) minmax(5rem, 2fr) minmax(4rem, 1fr) 6rem auto;" data-placement="right" tabindex="0">
        <button class="c-menu-btn__remove js-tooltip" aria-label="Bereitstellung rückgängig machen" data-title="Bereitstellung rückgängig machen">
            <i class="fa-solid fa-times" aria-hidden="true"></i>
        </button>
        <div class="tw-flex tw-items-center tw-justify-end tw-px-2 lg:tw-pr-4 lg:tw-pl-8">
            <span class="c-duotone-icon -md -pruefung" aria-hidden="true"></span>
        </div>
        <div class="tw-flex tw-flex-col tw-pr-3">
            <p class="h-color-gray h-type-extra-small -redesign m-b-xxs h-type-bold h-no-wrap h-overflow-ellipsis">Another Example</p>
            <p class="h-type-bold h-type-small">Custom Style</p>
        </div>
        <div class="tw-flex tw-flex-col tw-px-2 lg:tw-px-4 h-border-left-light-gray">
            <p class="h-color-gray h-type-extra-small -redesign m-b-xxs h-type-bold h-no-wrap h-overflow-ellipsis">Title</p>
            <p class="h-type-bold h-type-small">Grid Template Columns Example</p>
        </div>
        <div class="tw-flex tw-flex-col tw-px-2 lg:tw-px-4 h-border-left-light-gray">
            <p class="h-color-gray h-type-extra-small -redesign m-b-xxs h-type-bold h-no-wrap h-overflow-ellipsis">
                Dokumenten-Nr.
            </p>
            <p class="tw-overflow-hidden h-type-bold h-type-small -redesign m-b-0 tw-text-ellipsis">
                Aö00004
            </p>
        </div>
        <div class="tw-flex tw-flex-col tw-px-2 lg:tw-px-4 h-border-left-light-gray">
            <p class="h-color-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 class="tw-flex tw-items-center tw-justify-center">
            <button aria-label="Öffnen und signieren" class="c-btn -icon-btn -small -link -flat js-tooltip" data-title="Auswählen">
                <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
            </button>
        </div>
    </div>
</div>

WARNING

The code within the c-menu-btn.-is-row is an example. You can add more content or change the layout via grid-styles as needed as shown in the last example.