CoreUI for Vue v5.7.0 - Dropdown Enhancements

We are pleased to announce the release of CoreUI for Vue v5.7.0. This update introduces significant enhancements to the Dropdown component, including custom positioning capabilities, improved accessibility features, and comprehensive dependency updates to ensure compatibility with Vue 3.5.21 and modern development tools.

Speed up your responsive apps and websites with fully-featured, ready-to-use open-source admin panel templates—free to use and built for efficiency.

Angular

Bootstrap

React.js

Vue.js

How to Update

To update your project to CoreUI for Vue v5.7.0, follow these steps:

1. Open your project’s package.json.
2. Locate the @coreui/vue entry under dependencies and update the version number to 5.7.0.
3. Find the @coreui/coreui entry under dependencies and update the version number to ^5.6.0 or later.
4. Save your changes to the package.json file.
5. In your project’s root directory, run the update command appropriate for your package manager:
   • For npm users, execute npm install.
   • For yarn users, execute yarn install.
   • For pnpm users, execute pnpm install.

What’s New

Features

This release brings powerful enhancements to dropdown functionality:

• CDropdown - Custom Positioning: Added a new reference prop that enables you to specify custom positioning targets for dropdown menus. This feature provides greater flexibility when positioning dropdowns relative to specific elements, perfect for complex UI layouts and custom trigger elements.

• CDropdown - Focus Trap with Teleport: Introduced focus trap functionality when using teleport, improving keyboard navigation and ensuring accessible dropdown behavior when menu content is rendered outside the normal DOM hierarchy.

• CDropdownToggle - Accessibility Enhancement: Added the splitLabel prop for customizable screen reader text in split button dropdowns. This improves accessibility by allowing you to provide context-specific labels for assistive technologies, ensuring compliance with WCAG guidelines.

Bug Fixes

• CNavItem: Fixed an issue where the class property was not properly enforced. The property is now correctly required, resolving issue #305 and ensuring consistent styling behavior.

• CDropdown: Resolved a critical issue preventing dropdown closure when clicking on scrollbars. Users can now interact with scrollable dropdown content naturally, with the dropdown closing only when clicking outside the menu or on close triggers.

Dropdown Component Enhancements

Custom Positioning Example

The new reference prop allows for advanced dropdown positioning:

<template>
  <div>
    <CButton ref="customTrigger">Trigger</CButton>
    <CDropdown :reference="customTrigger">
      <CDropdownMenu>
        <CDropdownItem>Action</CDropdownItem>
      </CDropdownMenu>
    </CDropdown>
  </div>
</template>

Accessibility Improvement

Enhanced split button dropdowns with custom screen reader labels:

<CDropdownToggle split splitLabel="Open user menu">
  User Actions
</CDropdownToggle>

Dependency Updates

We have updated key dependencies to ensure compatibility with the latest Vue ecosystem:

Framework Updates

• vue from: 3.5.20 to: 3.5.21

Development Tool Updates

• eslint from: 9.34.0 to: 9.35.0
• @typescript-eslint/eslint-plugin from: 8.41.0 to: 8.44.0
• @typescript-eslint/parser from: 8.41.0 to: 8.44.0
• sass from: 1.91.0 to: 1.92.1
• @docsearch/js from: 3.9.0 to: 4.0.0

These updates bring improved linting capabilities, better TypeScript support, and enhanced documentation search functionality.

Documentation Improvements

This release includes comprehensive documentation enhancements:

• Sass Modules Migration: Updated documentation to use modern Sass module syntax with enhanced responsive behavior guidance
• Updated Navigation: Refreshed header brand link for better user experience
• Enhanced Search: Upgraded to @docsearch/js v4.0.0 for faster, more accurate documentation search
• README Updates: Refined documentation for clarity and accuracy

Use Cases for New Features

Custom Reference Positioning

The reference prop is particularly useful for:

• Complex Layouts: Position dropdowns relative to non-standard trigger elements
• Dynamic UIs: Attach dropdowns to dynamically positioned elements
• Custom Controls: Create unique dropdown interactions with custom trigger logic
• Tooltip-Style Menus: Position dropdown menus near specific UI elements

Focus Trap Benefits

Focus trap with teleport ensures:

• Keyboard Accessibility: Users can navigate dropdown content with keyboard only
• Screen Reader Support: Assistive technologies properly track focus within teleported dropdowns
• Modal-Like Behavior: Prevent focus from escaping dropdown when using teleport
• WCAG Compliance: Meet accessibility standards for interactive components

Vue 3.5.21 Compatibility

CoreUI for Vue v5.7.0 is fully compatible with Vue 3.5.21, including:

• Reactivity System: Full support for Vue 3’s latest reactivity improvements
• Composition API: Enhanced compatibility with Composition API patterns
• TypeScript: Improved type inference and IDE support
• Performance: Benefits from Vue 3.5.21’s performance optimizations

Migration Notes

This is primarily a feature and bug-fix release with minimal breaking changes:

• CNavItem class Property: Now properly enforced as required. If you’re using CNavItem, ensure the class prop is provided where expected
• Dropdown Behavior: Improved scrollbar interaction is backward compatible and requires no code changes

Why Update?

Updating to CoreUI for Vue v5.7.0 provides:

• Enhanced Flexibility: Custom dropdown positioning for complex UIs
• Better Accessibility: Improved screen reader support and keyboard navigation
• Bug Fixes: Resolved dropdown and navigation issues
• Modern Dependencies: Latest Vue and development tool versions
• Performance: Vue 3.5.21 optimizations
• Developer Experience: Better TypeScript support and linting

For a comprehensive overview of all changes, enhancements, and updates introduced in this release, please refer to the full changelog on GitHub.