Smart Dropdown Vue A smart, adaptive dropdown component for Vue 3 with intelligent positioning and viewport detection.

Features Smart Positioning: Automatically detects available space and flips dropdown when needed Viewport Awareness: Prevents dropdown from going outside screen boundaries Flexible Alignment: Supports left, right, and center positioning Scroll Detection: Repositions dropdown when scrolling Responsive: Adapts to window resizing Smooth Animations: Built-in slide animations for better UX TypeScript Support: Full TypeScript definitions included

Installation bash npm install smart-dropdown-vue

or

yarn add smart-dropdown-vue

or

pnpm add smart-dropdown-vue

Usage Basic Usage vue <button @click="toggleDropdown"> Toggle Dropdown ({{ placement }})

<div :ref="setRef" class="dropdown-content">
  <div class="dropdown-item">Item 1</div>
  <div class="dropdown-item">Item 2</div>
  <div class="dropdown-item">Item 3</div>
</div>

profile Dropdown Example vue <button @click="toggleDropdown" class="profile-button"> {{ userName }} {{ userRole }} ...

<div :ref="setRef" class="dropdown-menu">
  <div class="dropdown-header">
    <p>{{ userName }}</p>
    <p>{{ userEmail }}</p>
  </div>
  
  <button class="dropdown-item">
    <i class="icon"></i>
    Profile
  </button>
  
  <button class="dropdown-item">
    <i class="icon"></i>
    Settings
  </button>
  
  <div class="dropdown-divider"></div>
  
  <button class="dropdown-item danger">
    <i class="icon"></i>
    Logout
  </button>
</div>

Prop Type Description setRef Function Function to set ref on dropdown content setTriggerRef Function Function to set ref on trigger element toggleDropdown Function Function to toggle dropdown open/close open Boolean Current open state placement String Current placement (top or bottom) Styling The component doesn't include built-in styles for the dropdown content, allowing you to customize completely. Here's a basic example:

css .dropdown-content { position: absolute; background: white; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); padding: 8px; min-width: 200px; z-index: 9999; }

.dropdown-item { padding: 8px 12px; border-radius: 4px; cursor: pointer; transition: background-color 0.2s; }

.dropdown-item:hover { background: #f3f4f6; }

.dropdown-divider { height: 1px; background: #e5e7eb; margin: 4px 0; } Advanced Features Custom Positioning The component automatically handles positioning based on available space. It will:

Flip vertically if not enough space below Adjust horizontally if dropdown would overflow viewport Reposition on window resize and scroll Animation Support Add the dropdown-content class to your dropdown element for built-in animations:

html

Dependencies Vue 3.x vueuse/core 10.x License MIT

5 more