PatternLab (1.0.11)

Appearance

Menu Button ​

TIP

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

INFO

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

INFO

Disabled State ​

.c-menu-btn.-is-disabled[disabled="disabled"]

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

INFO

Disabled Selected Button

Larger Title ​

.c-menu-btn__title.-large

INFO

Additional Icons ​

TIP

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.

INFO

I'm a link to another page

TIP

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

INFO

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

TIP

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

WARNING

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

INFO

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

2025 - Pharma4u