Benutzer-Werkzeuge

Webseiten-Werkzeuge


web:drupal:theme:menu-icons

Dies ist eine alte Version des Dokuments!


Menu-Icons

Modul menu_link_attributes installieren und wie folgt konfigurieren:

menu_link_attributes.yaml
attributes:
  class:
    label: ''
    description: ''
  data-icon:
    label: Menu-Icon
    description: 'Set an Icon for this menu-entry.'
    options:
      icon-academic-cap: Academic-Cap
      icon-newspaper: Newspaper
      icon-pencil: Pencil
      icon-at-symbol: at-Symbol
    default_value: ''
  target:
    label: ''
    description: ''
    options:
      _blank: 'New window (_blank)'
      _self: 'Same window (_self)'
    default_value: ''
  rel:
    label: Rel-Attribute
    description: 'Rel(ation) Attribute festlegen'
    options:
      nofollow: nofollow
    default_value: ''

Theme Hook

Theme Hook für Menu-Entries in der Datei TemplateName.theme bereitstellen und das „formatted Markup“ nach eigenen Wünschen gestalten.

templatename.theme
/** fuer menu_attributes:
 * svg icons als svg sprite bereitstellen
 * passendes sprite auswaehlen
 */
 use Drupal\Component\Render\FormattableMarkup;
 
 /**
  * Implements theme_preprocess_menu().
  */
 function swiftly_preprocess_menu(&$variables, $hook) {
   foreach ($variables['items'] as &$item) {
     $attributes = $item['url']->getOption('attributes');
     if (isset($attributes['data-icon'])) {
       $title = new FormattableMarkup('
        <div class="flex gap-1 items-center">
         <svg class="icon @icon" viewbox="0 0 24 24"><use xlink:href="#@icon"></use></svg>
         <span class="hidden md:block">@title</span>
        </div>
       ', [
         '@title' => $item['title'],
         '@icon' => $attributes['data-icon'],
       ]);
       $item['title'] = $title;
     }
   }
 }
web/drupal/theme/menu-icons.1663161972.txt.gz · Zuletzt geändert: 2022/09/14 13:26 von phoenixseo