Dropdown

the Dropdown-component ermoglicht the Anzeige einer versteckten list from Optionen, the at Aktivierung sichtbar wird. these component ist ideal for Navigationsmenus, Filteroptionen and others interaktive elements.

Installation

the Dropdown-component ist Teil the Casoon UI Library.

# Installation the gesamten Bibliothek
npm install @casoon/ui-lib

Import

/* Import aller UI-Components */
@import '@casoon/ui-lib/ui.css';

/* or only the Dropdown-component */
@import '@casoon/ui-lib/ui/components/dropdown.css';

Basic Usage

<div class="dropdown">
  <button class="dropdown__trigger button">
    Dropdown offnen
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <polyline points="6 9 12 15 18 9"></polyline>
    </svg>
  </button>
  <div class="dropdown__menu">
    <a href="#" class="dropdown__item">Option 1</a>
    <a href="#" class="dropdown__item">Option 2</a>
    <a href="#" class="dropdown__item">Option 3</a>
  </div>
</div>

Option 1Option 2Option 3

Variants

with Trennlinien

<div class="dropdown">
  <button class="dropdown__trigger button">Aktionen</button>
  <div class="dropdown__menu">
    <a href="#" class="dropdown__item">Bearbeiten</a>
    <a href="#" class="dropdown__item">Duplizieren</a>
    <div class="dropdown__divider"></div>
    <a href="#" class="dropdown__item dropdown__item--danger">delete</a>
  </div>
</div>

BearbeitenDuplizieren

delete

With icons

<div class="dropdown">
  <button class="dropdown__trigger button">Menu</button>
  <div class="dropdown__menu">
    <a href="#" class="dropdown__item">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
        <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
      </svg>
      Bearbeiten
    </a>
    <a href="#" class="dropdown__item">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
        <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
      </svg>
      Kopieren
    </a>
    <a href="#" class="dropdown__item">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
        <polyline points="17 8 12 3 7 8"></polyline>
        <line x1="12" y1="3" x2="12" y2="15"></line>
      </svg>
      Herunterladen
    </a>
  </div>
</div>

Bearbeiten Kopieren Herunterladen

Usagesbeispiele

Navigationsmenu

<nav class="navbar">
  <div class="navbar__brand">Meine Website</div>
  <div class="navbar__menu">
    <a href="#" class="navbar__link">Home</a>
    <a href="#" class="navbar__link">over us</a>
    <div class="dropdown">
      <button class="dropdown__trigger navbar__link">
        Produkte
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <polyline points="6 9 12 15 18 9"></polyline>
        </svg>
      </button>
      <div class="dropdown__menu">
        <a href="#" class="dropdown__item">category 1</a>
        <a href="#" class="dropdown__item">category 2</a>
        <a href="#" class="dropdown__item">category 3</a>
      </div>
    </div>
    <a href="#" class="navbar__link">Kontakt</a>
  </div>
</nav>

Meine Website

Homeover us

category 1category 2category 3

Kontakt

Aktionsmenu

<div class="card">
  <div class="card__header">
    <h3 class="card__title">Projekt: Website-Redesign</h3>
    <div class="dropdown">
      <button class="dropdown__trigger button button--icon">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <circle cx="12" cy="12" r="1"></circle>
          <circle cx="12" cy="5" r="1"></circle>
          <circle cx="12" cy="19" r="1"></circle>
        </svg>
      </button>
      <div class="dropdown__menu dropdown__menu--right">
        <a href="#" class="dropdown__item">Details anzeigen</a>
        <a href="#" class="dropdown__item">Bearbeiten</a>
        <a href="#" class="dropdown__item">Archivieren</a>
        <div class="dropdown__divider"></div>
        <a href="#" class="dropdown__item dropdown__item--danger">delete</a>
      </div>
    </div>
  </div>
  <div class="card__body">
    Redesign the Unternehmenswebsite with neuer Markenidentitat and verbesserten functions.
  </div>
</div>

Projekt: Website-Redesign

Details anzeigenBearbeitenArchivieren

delete

Redesign the Unternehmenswebsite with neuer Markenidentitat and verbesserten functions.

Anpassung

the Dropdown-component kann with CSS Variables angepasst become:

:root {
  --dropdown-min-width: 10rem;
  --dropdown-bg: var(--color-white);
  --dropdown-border: 1px solid var(--color-neutral-200);
  --dropdown-border-radius: var(--radius-m);
  --dropdown-shadow: var(--shadow-lg);
  --dropdown-z-index: 50;
  
  --dropdown-item-padding: 0.5rem 1rem;
  --dropdown-item-color: var(--color-neutral-700);
  --dropdown-item-hover-bg: var(--color-neutral-100);
  --dropdown-item-hover-color: var(--color-neutral-900);
  
  --dropdown-divider-color: var(--color-neutral-200);
  --dropdown-divider-margin: 0.25rem 0;
  
  --dropdown-item-danger-color: var(--color-error-600);
  --dropdown-item-danger-hover-bg: var(--color-error-50);
  --dropdown-item-danger-hover-color: var(--color-error-700);
}

JavaScript-Example

Hier ist a einfaches JavaScript-Example, um the Dropdown-Funktionalitat to implement:

document.addEventListener('DOMContentLoaded', function() {
  // all Dropdown-Trigger finden
  const triggers = document.querySelectorAll('.dropdown__trigger');
  
  triggers.forEach(trigger => {
    trigger.addEventListener('click', function(e) {
      e.preventDefault();
      e.stopPropagation();
      
      const dropdown = this.closest('.dropdown');
      const menu = dropdown.querySelector('.dropdown__menu');
      
      // Umschalten des aktiven Zustands
      dropdown.classList.toggle('active');
      
      // close at Klick ausserhalb
      document.addEventListener('click', function closeDropdown(e) {
        if (!dropdown.contains(e.target)) {
          dropdown.classList.remove('active');
          document.removeEventListener('click', closeDropdown);
        }
      });
    });
  });
  
  // Tastaturunterstutzung for Dropdown-Items
  const items = document.querySelectorAll('.dropdown__item');
  
  items.forEach(item => {
    item.addEventListener('keydown', function(e) {
      if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
        e.preventDefault();
        
        const currentIndex = Array.from(items).indexOf(this);
        let targetIndex;
        
        if (e.key === 'ArrowDown') {
          targetIndex = (currentIndex + 1) % items.length;
        } else {
          targetIndex = (currentIndex - 1 + items.length) % items.length;
        }
        
        items[targetIndex].focus();
      }
    });
  });
});

Accessibility

• Verwende aria-expanded="true/false" on dem Trigger-element
• Setze aria-haspopup="true" on dem Trigger-element
• Fuge aria-labelledby zum Dropdown-Menu hinzu, the on the ID des Triggers verweist
• Stelle sicher, that Dropdown-Menus with the Tastatur bedienbar sind
• Verwende role="menu" for the Menu and role="menuitem" for the Menupunkte
• Ermogliche the close des Menus with the ESC-Taste
• Achte on ausreichenden Kontrast between Text and background

Browser-Kompatibilitat

the Dropdown-component ist with allen modernen Browsern kompatibel.

function	Chrome	Firefox	Safari	Edge
Grundlegende Funktionalitat	✅	✅	✅	✅
Positionierung	✅	✅	✅	✅
CSS Variables	49+	31+	9.1+	15+