Drop Component

Drop JavaScript Methods & Events

// Drop component initialization
const drop = UIkit.drop(element, {
  pos: 'bottom-left',           // Position
  mode: 'hover',               // Trigger mode
  delayShow: 0,                // Delay before showing
  delayHide: 800,              // Delay before hiding
  animation: 'uk-animation-fade', // Animation
  duration: 200,               // Animation duration
  offset: 0,                   // Offset from trigger
  toggle: true,                // Toggle on click
  boundary: window,            // Boundary element
  boundaryAlign: false,        // Align within boundary
  flip: true,                  // Flip if out of viewport
  clsDrop: 'uk-drop',          // Drop class
  clsDropShow: 'uk-open'       // Show class
});

// Tooltip initialization
const tooltip = UIkit.tooltip(element, {
  title: '',                   // Tooltip content
  pos: 'top',                  // Position
  offset: 0,                   // Offset
  animation: 'uk-animation-scale-up',
  duration: 200,
  delay: 0
});

// Drop methods
drop.show();                    // Show the drop
drop.hide();                    // Hide the drop
drop.toggle();                  // Toggle show/hide

// Tooltip methods
tooltip.show();                 // Show tooltip
tooltip.hide();                 // Hide tooltip

// Drop events
dropElement.addEventListener('show', function(event) {
  console.log('Drop showing:', event.detail);
});

dropElement.addEventListener('shown', function(event) {
  console.log('Drop shown:', event.detail);
});

dropElement.addEventListener('hide', function(event) {
  console.log('Drop hiding:', event.detail);
});

dropElement.addEventListener('hidden', function(event) {
  console.log('Drop hidden:', event.detail);
});

// Tooltip events
tooltipElement.addEventListener('show', function(event) {
  console.log('Tooltip showing');
});

tooltipElement.addEventListener('hide', function(event) {
  console.log('Tooltip hiding');
});

// Dynamic drop management
const dropManager = {
  drops: [],
  
  initDrop: function(dropId, options = {}) {
    const dropElement = document.getElementById(dropId);
    if (!dropElement) return null;
    
    const drop = UIkit.drop(dropElement, options);
    this.drops.push({ id: dropId, element: dropElement, instance: drop });
    
    return drop;
  },
  
  showDrop: function(dropId) {
    const drop = this.drops.find(d => d.id === dropId);
    if (drop) {
      drop.instance.show();
    }
  },
  
  hideDrop: function(dropId) {
    const drop = this.drops.find(d => d.id === dropId);
    if (drop) {
      drop.instance.hide();
    }
  },
  
  toggleDrop: function(dropId) {
    const drop = this.drops.find(d => d.id === dropId);
    if (drop) {
      drop.instance.toggle();
    }
  },
  
  updateDropContent: function(dropId, content) {
    const drop = this.drops.find(d => d.id === dropId);
    if (drop) {
      drop.element.innerHTML = content;
    }
  },
  
  destroyDrop: function(dropId) {
    const index = this.drops.findIndex(d => d.id === dropId);
    if (index > -1) {
      const drop = this.drops[index];
      drop.instance.$destroy();
      this.drops.splice(index, 1);
    }
  }
};

// Initialize drops
dropManager.initDrop('userMenu', { 
  pos: 'bottom-justify', 
  mode: 'click' 
});

dropManager.initDrop('notifications', {
  pos: 'bottom-right',
  mode: 'click',
  animation: 'uk-animation-slide-top-small'
});

// Example: Show drop on button click
document.getElementById('showMenuBtn').addEventListener('click', function() {
  dropManager.showDrop('userMenu');
});

// Example: Update drop content dynamically
document.getElementById('updateContentBtn').addEventListener('click', function() {
  const newContent = `
    <div class="uk-card uk-card-body uk-card-default">
      <h3>Updated Content</h3>
      <p>This content was updated dynamically.</p>
    </div>
  `;
  dropManager.updateDropContent('userMenu', newContent);
});

// Tooltip management
const tooltipManager = {
  tooltips: [],
  
  initTooltip: function(elementId, options = {}) {
    const element = document.getElementById(elementId);
    if (!element) return null;
    
    const tooltip = UIkit.tooltip(element, options);
    this.tooltips.push({ id: elementId, element: element, instance: tooltip });
    
    return tooltip;
  },
  
  updateTooltipTitle: function(elementId, newTitle) {
    const tooltip = this.tooltips.find(t => t.id === elementId);
    if (tooltip) {
      tooltip.instance.title = newTitle;
    }
  },
  
  showTooltip: function(elementId) {
    const tooltip = this.tooltips.find(t => t.id === elementId);
    if (tooltip) {
      tooltip.instance.show();
    }
  },
  
  hideTooltip: function(elementId) {
    const tooltip = this.tooltips.find(t => t.id === elementId);
    if (tooltip) {
      tooltip.instance.hide();
    }
  }
};

// Initialize tooltips
tooltipManager.initTooltip('infoButton', {
  title: 'Additional information',
  pos: 'right'
});

tooltipManager.initTooltip('helpButton', {
  title: 'Click for help',
  pos: 'top',
  animation: 'uk-animation-scale-up'
});

// Dynamic tooltip updates
document.getElementById('changeTooltipBtn').addEventListener('click', function() {
  tooltipManager.updateTooltipTitle('infoButton', 'Updated information text');
});

// Drop positioning helper
const dropPositioning = {
  calculatePosition: function(triggerElement, dropElement, position = 'bottom-left') {
    const triggerRect = triggerElement.getBoundingClientRect();
    const dropRect = dropElement.getBoundingClientRect();
    const viewportWidth = window.innerWidth;
    const viewportHeight = window.innerHeight;
    
    let top, left;
    
    switch(position) {
      case 'bottom-left':
        top = triggerRect.bottom;
        left = triggerRect.left;
        break;
      case 'bottom-center':
        top = triggerRect.bottom;
        left = triggerRect.left + (triggerRect.width - dropRect.width) / 2;
        break;
      case 'bottom-right':
        top = triggerRect.bottom;
        left = triggerRect.right - dropRect.width;
        break;
      case 'top-left':
        top = triggerRect.top - dropRect.height;
        left = triggerRect.left;
        break;
      case 'top-center':
        top = triggerRect.top - dropRect.height;
        left = triggerRect.left + (triggerRect.width - dropRect.width) / 2;
        break;
      case 'top-right':
        top = triggerRect.top - dropRect.height;
        left = triggerRect.right - dropRect.width;
        break;
      case 'left':
        top = triggerRect.top + (triggerRect.height - dropRect.height) / 2;
        left = triggerRect.left - dropRect.width;
        break;
      case 'right':
        top = triggerRect.top + (triggerRect.height - dropRect.height) / 2;
        left = triggerRect.right;
        break;
    }
    
    // Adjust if out of viewport
    if (left < 0) left = 0;
    if (left + dropRect.width > viewportWidth) {
      left = viewportWidth - dropRect.width;
    }
    if (top < 0) top = 0;
    if (top + dropRect.height > viewportHeight) {
      top = viewportHeight - dropRect.height;
    }
    
    return { top, left };
  },
  
  repositionDrop: function(dropId) {
    const drop = dropManager.drops.find(d => d.id === dropId);
    if (!drop) return;
    
    const trigger = document.querySelector(`[aria-controls="${dropId}"]`);
    if (!trigger) return;
    
    const position = drop.instance.pos || 'bottom-left';
    const coords = this.calculatePosition(trigger, drop.element, position);
    
    drop.element.style.position = 'fixed';
    drop.element.style.top = `${coords.top}px`;
    drop.element.style.left = `${coords.left}px`;
    drop.element.style.zIndex = '1040';
  }
};

// Reposition drops on window resize
window.addEventListener('resize', function() {
  dropManager.drops.forEach(drop => {
    if (drop.instance.isActive()) {
      dropPositioning.repositionDrop(drop.id);
    }
  });
});

// Keyboard navigation for dropdowns
const dropdownNavigation = {
  currentIndex: -1,
  currentDropdown: null,
  
  init: function(dropdownId) {
    const dropdown = document.getElementById(dropdownId);
    if (!dropdown) return;
    
    const items = dropdown.querySelectorAll('.uk-dropdown-nav li > a');
    
    dropdown.addEventListener('keydown', (e) => {
      switch(e.key) {
        case 'ArrowDown':
          e.preventDefault();
          this.navigateNext(items);
          break;
        case 'ArrowUp':
          e.preventDefault();
          this.navigatePrevious(items);
          break;
        case 'Enter':
          if (this.currentIndex > -1) {
            items[this.currentIndex].click();
          }
          break;
        case 'Escape':
          UIkit.drop(dropdown).hide();
          break;
      }
    });
    
    items.forEach((item, index) => {
      item.addEventListener('focus', () => {
        this.currentIndex = index;
      });
      
      item.addEventListener('mouseenter', () => {
        this.currentIndex = index;
        items.forEach(i => i.classList.remove('uk-active'));
        item.classList.add('uk-active');
      });
    });
  },
  
  navigateNext: function(items) {
    if (items.length === 0) return;
    
    this.currentIndex = (this.currentIndex + 1) % items.length;
    items[this.currentIndex].focus();
    items.forEach(i => i.classList.remove('uk-active'));
    items[this.currentIndex].classList.add('uk-active');
  },
  
  navigatePrevious: function(items) {
    if (items.length === 0) return;
    
    this.currentIndex = (this.currentIndex - 1 + items.length) % items.length;
    items[this.currentIndex].focus();
    items.forEach(i => i.classList.remove('uk-active'));
    items[this.currentIndex].classList.add('uk-active');
  }
};

// Initialize dropdown navigation
document.addEventListener('DOMContentLoaded', function() {
  dropdownNavigation.init('userDropdown');
  dropdownNavigation.init('settingsDropdown');
});

// Drop with AJAX content loading
const ajaxDrop = {
  loadContent: function(dropId, url) {
    const drop = dropManager.drops.find(d => d.id === dropId);
    if (!drop) return;
    
    // Show loading state
    drop.element.innerHTML = `
      <div class="uk-card uk-card-body uk-card-default">
        <div class="uk-text-center">
          <div uk-spinner></div>
          <p class="uk-margin-small-top">Loading...</p>
        </div>
      </div>
    `;
    
    // Fetch content
    fetch(url)
      .then(response => response.text())
      .then(html => {
        drop.element.innerHTML = html;
        UIkit.update(drop.element);
      })
      .catch(error => {
        drop.element.innerHTML = `
          <div class="uk-card uk-card-body uk-card-default">
            <div class="uk-alert-danger" uk-alert>
              <p>Failed to load content. Please try again.</p>
            </div>
          </div>
        `;
      });
  }
};

// Example usage
document.getElementById('loadUserDataBtn').addEventListener('click', function() {
  ajaxDrop.loadContent('userMenu', '/api/user-data');
});

// Drop with form submission
const dropFormHandler = {
  init: function(dropId, formSelector) {
    const drop = dropManager.drops.find(d => d.id === dropId);
    if (!drop) return;
    
    const form = drop.element.querySelector(formSelector);
    if (!form) return;
    
    form.addEventListener('submit', function(e) {
      e.preventDefault();
      
      const formData = new FormData(form);
      const submitBtn = form.querySelector('[type="submit"]');
      const originalText = submitBtn.textContent;
      
      // Show loading state
      submitBtn.disabled = true;
      submitBtn.innerHTML = `
        <span uk-spinner="ratio: 0.5"></span>
        Processing...
      `;
      
      // Simulate API call
      setTimeout(() => {
        // Reset form
        form.reset();
        submitBtn.disabled = false;
        submitBtn.textContent = originalText;
        
        // Show success message
        const successMsg = `
          <div class="uk-alert-success" uk-alert>
            <a class="uk-alert-close" uk-close></a>
            <p>Form submitted successfully!</p>
          </div>
        `;
        drop.element.insertAdjacentHTML('afterbegin', successMsg);
        
        // Hide drop after delay
        setTimeout(() => {
          drop.instance.hide();
        }, 2000);
      }, 1500);
    });
  }
};

// Initialize form handler
dropFormHandler.init('contactFormDrop', '#contactForm');

E-commerce Product Actions Dropdown

<!-- Product Card with Action Dropdown -->
<div class="uk-card uk-card-default">
  <div class="uk-card-media-top">
    <img src="product-image.jpg" alt="Product">
  </div>
  <div class="uk-card-body">
    <div class="uk-flex uk-flex-between uk-flex-middle">
      <h3 class="uk-card-title uk-margin-remove">Wireless Headphones</h3>
      <div class="uk-inline">
        <button class="uk-button uk-button-default uk-button-small" type="button">
          <span uk-icon="icon: more"></span>
        </button>
        <div uk-drop="mode: click; pos: bottom-right">
          <div class="uk-card uk-card-body uk-card-default uk-padding-small">
            <ul class="uk-nav uk-dropdown-nav">
              <li>
                <a href="#" class="uk-flex uk-flex-middle">
                  <span uk-icon="icon: heart" class="uk-margin-small-right"></span>
                  Add to Wishlist
                </a>
              </li>
              <li>
                <a href="#" class="uk-flex uk-flex-middle">
                  <span uk-icon="icon: copy" class="uk-margin-small-right"></span>
                  Duplicate Product
                </a>
              </li>
              <li>
                <a href="#" class="uk-flex uk-flex-middle">
                  <span uk-icon="icon: tag" class="uk-margin-small-right"></span>
                  Edit Tags
                </a>
              </li>
              <li class="uk-nav-divider"></li>
              <li>
                <a href="#" class="uk-flex uk-flex-middle uk-text-danger">
                  <span uk-icon="icon: trash" class="uk-margin-small-right"></span>
                  Delete Product
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <p class="uk-text-meta">Noise-cancelling wireless headphones</p>
    <div class="uk-flex uk-flex-between uk-flex-middle uk-margin-top">
      <div class="uk-text-lead uk-text-bold">$199.99</div>
      <button class="uk-button uk-button-primary">
        <span uk-icon="icon: cart" class="uk-margin-small-right"></span>
        Add to Cart
      </button>
    </div>
  </div>
  <div class="uk-card-footer">
    <div class="uk-grid-small uk-child-width-auto" uk-grid>
      <div>
        <span uk-icon="icon: star" class="uk-text-warning"></span>
        <span class="uk-text-small">4.8</span>
      </div>
      <div>
        <span uk-icon="icon: users" class="uk-text-muted"></span>
        <span class="uk-text-small">124 sold</span>
      </div>
      <div>
        <button class="uk-button uk-button-text uk-text-small" uk-tooltip="title: Share this product">
          <span uk-icon="icon: share"></span> Share
        </button>
      </div>
    </div>
  </div>
</div>

User Dashboard with Context Menus

<!-- User Dashboard -->
<div class="uk-grid-match uk-child-width-1-3@m" uk-grid>
  <!-- Quick Actions Card -->
  <div>
    <div class="uk-card uk-card-default uk-card-body">
      <h3 class="uk-card-title">Quick Actions</h3>
      <div class="uk-grid-small uk-child-width-1-2" uk-grid>
        <div>
          <div class="uk-inline uk-width-1-1">
            <button class="uk-button uk-button-default uk-width-1-1" type="button">
              <span uk-icon="icon: plus" class="uk-margin-small-right"></span>
              Create New
            </button>
            <div uk-drop="mode: click; pos: bottom-justify">
              <div class="uk-card uk-card-body uk-card-default uk-padding-small">
                <ul class="uk-nav uk-dropdown-nav">
                  <li><a href="#"><span uk-icon="icon: file-text"></span> Document</a></li>
                  <li><a href="#"><span uk-icon="icon: folder"></span> Folder</a></li>
                  <li><a href="#"><span uk-icon="icon: image"></span> Image</a></li>
                  <li><a href="#"><span uk-icon="icon: video-camera"></span> Video</a></li>
                  <li class="uk-nav-divider"></li>
                  <li><a href="#"><span uk-icon="icon: cloud-upload"></span> Upload Files</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div>
          <button class="uk-button uk-button-primary uk-width-1-1" type="button">
            <span uk-icon="icon: search" class="uk-margin-small-right"></span>
            Search
          </button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Notifications Card -->
  <div>
    <div class="uk-card uk-card-default uk-card-body">
      <div class="uk-flex uk-flex-between uk-flex-middle">
        <h3 class="uk-card-title uk-margin-remove">Notifications</h3>
        <div class="uk-inline">
          <button class="uk-button uk-button-text" type="button" uk-tooltip="title: Notification settings">
            <span uk-icon="icon: settings"></span>
          </button>
          <div uk-drop="mode: click; pos: bottom-right">
            <div class="uk-card uk-card-body uk-card-default uk-padding-small">
              <h4 class="uk-margin-small">Settings</h4>
              <form>
                <label class="uk-flex uk-flex-between uk-flex-middle">
                  <span>Email Notifications</span>
                  <input class="uk-checkbox" type="checkbox" checked>
                </label>
                <label class="uk-flex uk-flex-between uk-flex-middle uk-margin-small-top">
                  <span>Push Notifications</span>
                  <input class="uk-checkbox" type="checkbox">
                </label>
                <label class="uk-flex uk-flex-between uk-flex-middle uk-margin-small-top">
                  <span>Desktop Alerts</span>
                  <input class="uk-checkbox" type="checkbox" checked>
                </label>
                <button class="uk-button uk-button-primary uk-width-1-1 uk-margin-top">Save</button>
              </form>
            </div>
          </div>
        </div>
      </div>
      <!-- Notification list -->
    </div>
  </div>
  
  <!-- User Menu Card -->
  <div>
    <div class="uk-card uk-card-default uk-card-body">
      <div class="uk-flex uk-flex-middle">
        <img class="uk-border-circle" src="avatar.jpg" width="60" height="60" alt="User">
        <div class="uk-margin-left">
          <h4 class="uk-margin-remove">John Doe</h4>
          <p class="uk-text-meta uk-margin-remove">Administrator</p>
        </div>
        <div class="uk-margin-left-auto">
          <div class="uk-inline">
            <button class="uk-button uk-button-default" type="button">
              <span uk-icon="icon: chevron-down"></span>
            </button>
            <div uk-drop="mode: click; pos: bottom-right">
              <div class="uk-card uk-card-body uk-card-default uk-padding-small">
                <ul class="uk-nav uk-dropdown-nav">
                  <li><a href="#"><span uk-icon="icon: user"></span> Profile</a></li>
                  <li><a href="#"><span uk-icon="icon: settings"></span> Settings</a></li>
                  <li><a href="#"><span uk-icon="icon: credit-card"></span> Billing</a></li>
                  <li class="uk-nav-divider"></li>
                  <li><a href="#"><span uk-icon="icon: sign-out"></span> Sign Out</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Context Menu Example -->
<div class="uk-margin-top">
  <div class="uk-card uk-card-default uk-card-body">
    <h3 class="uk-card-title">Files</h3>
    <div class="uk-grid-small uk-child-width-1-4@m" uk-grid>
      <div>
        <div class="uk-card uk-card-secondary uk-card-body uk-text-center" 
             onclick="UIkit.drop('#file-context').show()"
             oncontextmenu="event.preventDefault(); UIkit.drop('#file-context').show()">
          <span uk-icon="icon: file-text; ratio: 2"></span>
          <div class="uk-margin-small-top">Document.pdf</div>
        </div>
      </div>
      <!-- More file items -->
    </div>
  </div>
</div>

<!-- Context Menu (hidden by default) -->
<div id="file-context" uk-drop="mode: click; pos: bottom-left">
  <div class="uk-card uk-card-body uk-card-default uk-padding-small">
    <ul class="uk-nav uk-dropdown-nav">
      <li><a href="#"><span uk-icon="icon: download"></span> Download</a></li>
      <li><a href="#"><span uk-icon="icon: copy"></span> Copy</a></li>
      <li><a href="#"><span uk-icon="icon: pencil"></span> Rename</a></li>
      <li class="uk-nav-divider"></li>
      <li><a href="#"><span uk-icon="icon: trash"></span> Delete</a></li>
    </ul>
  </div>
</div>

/* Custom Drop Styles */
/* Glassmorphism Drop */
.uk-drop-glass {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
}

.uk-drop-glass .uk-dropdown-nav {
  background: transparent;
}

/* Dark Mode Drop */
.uk-drop-dark {
  background: #1a1a1a;
  border: 1px solid #333;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.uk-drop-dark .uk-dropdown-nav a {
  color: #e0e0e0;
}

.uk-drop-dark .uk-dropdown-nav a:hover {
  background: #2a2a2a;
  color: #ffffff;
}

/* Modern Tooltip */
.uk-tooltip-modern {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.875rem;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

.uk-tooltip-modern:after {
  border-top-color: #667eea;
}

/* Animated Drop */
.uk-drop-animated {
  animation: dropIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes dropIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Gradient Drop */
.uk-drop-gradient {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  color: white;
}

.uk-drop-gradient .uk-dropdown-nav a {
  color: white;
}

.uk-drop-gradient .uk-dropdown-nav a:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Minimal Drop */
.uk-drop-minimal {
  background: white;
  border: 1px solid #e5e5e5;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border-radius: 6px;
  padding: 8px;
}

.uk-drop-minimal .uk-dropdown-nav {
  margin: -8px;
}

/* Card Drop */
.uk-drop-card {
  padding: 0;
  overflow: hidden;
}

.uk-drop-card .uk-card-body {
  padding: 20px;
}

.uk-drop-card .uk-card-header {
  padding: 15px 20px;
  background: #f8f9fa;
  border-bottom: 1px solid #e5e5e5;
}

.uk-drop-card .uk-card-footer {
  padding: 15px 20px;
  background: #f8f9fa;
  border-top: 1px solid #e5e5e5;
}

/* Usage Examples */
<div uk-drop="pos: bottom-left" class="uk-drop-glass">
  <!-- Glassmorphism drop -->
</div>

<div uk-drop="pos: bottom-left" class="uk-drop-dark">
  <!-- Dark mode drop -->
</div>

<div uk-tooltip="pos: top" class="uk-tooltip-modern">
  <!-- Modern tooltip -->
</div>

<div uk-drop="pos: bottom-left" class="uk-drop-animated">
  <!-- Animated drop -->
</div>

<div uk-drop="pos: bottom-left" class="uk-drop-gradient">
  <!-- Gradient drop -->
</div>

<div uk-drop="pos: bottom-left" class="uk-drop-minimal">
  <!-- Minimal drop -->
</div>

<div uk-drop="pos: bottom-left" class="uk-drop-card">
  <div class="uk-card uk-card-default">
    <div class="uk-card-header">
      <h3 class="uk-card-title">Title</h3>
    </div>
    <div class="uk-card-body">
      <p>Content</p>
    </div>
    <div class="uk-card-footer">
      <button class="uk-button uk-button-primary">Action</button>
    </div>
  </div>
</div>

/* Responsive Drop Adjustments */
@media (max-width: 640px) {
  .uk-drop-responsive {
    width: calc(100vw - 40px) !important;
    left: 20px !important;
    right: 20px !important;
  }
  
  .uk-tooltip-responsive {
    font-size: 0.75rem;
    max-width: 200px;
    white-space: normal;
  }
}

/* Drop Arrow Styles */
.uk-drop-arrow:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
}

.uk-drop-arrow[uk-drop*="bottom"]:before {
  top: -10px;
  left: 20px;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #ffffff transparent;
}

.uk-drop-arrow[uk-drop*="top"]:before {
  bottom: -10px;
  left: 20px;
  border-width: 10px 10px 0 10px;
  border-color: #ffffff transparent transparent transparent;
}

/* Drop with Icons */
.uk-drop-icons .uk-dropdown-nav a {
  display: flex;
  align-items: center;
  gap: 8px;
}

.uk-drop-icons .uk-dropdown-nav [uk-icon] {
  width: 16px;
  height: 16px;
}

/* Status Drop */
.uk-drop-status .status-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 4px;
  margin-bottom: 4px;
}

.uk-drop-status .status-item:hover {
  background: #f8f9fa;
}

.uk-drop-status .status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
}

.status-indicator.online {
  background: #32d296;
}

.status-indicator.offline {
  background: #f0506e;
}

.status-indicator.away {
  background: #faa05a;
}

/* Drop with Badges */
.uk-drop-badges .uk-dropdown-nav a {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.uk-drop-badges .uk-badge {
  margin-left: 8px;
  font-size: 0.75rem;
  padding: 2px 6px;
  min-width: auto;
}

/* Nested Drop */
.uk-drop-nested .uk-dropdown-nav .uk-parent > a {
  position: relative;
}

.uk-drop-nested .uk-dropdown-nav .uk-parent > a:after {
  content: '›';
  position: absolute;
  right: 12px;
}

.uk-drop-nested .uk-dropdown-nav .uk-parent > div {
  position: absolute;
  left: 100%;
  top: 0;
  min-width: 200px;
  background: white;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  display: none;
  padding: 8px;
}

.uk-drop-nested .uk-dropdown-nav .uk-parent:hover > div {
  display: block;
}