Bootstrap events for dropdown menus don't fire

Technical Q&A

Topic summary

Issue Identified:
Bootstrap v5 dropdown menus and mobile navbar clicks were not functioning on a Shopify theme, despite correct script inclusion (bootstrap.bundle.min.js with Popper.js) and no console errors.

Root Cause:
Data attribute syntax mismatch between Bootstrap versions. The developer was using Bootstrap v4.x data properties (data-toggle) instead of v5.x syntax (data-bs-toggle).

Resolution:
Updating the data attributes to Bootstrap v5 format resolved the issue. This is a common migration pitfall when upgrading from Bootstrap 4 to 5, as v5 introduced namespaced data attributes (prefixed with bs-) to avoid conflicts.

Key Takeaway:
When using Bootstrap v5, ensure all data attributes follow the new naming convention (e.g., data-bs-toggle, data-bs-target) rather than the v4 format.

Summarized with AI on November 13. AI used: claude-sonnet-4-5-20250929.
1

I’m working on a new theme using Bootstrap v5, the problem is that the browser seems to ignore my clicks (even on the navbar in the main menu when on a mobile device)

I can’t seem to work out why, there is no console error and no indication of why it’s not working…

I have the following before the tag, and this isn’t my first rodeo with bootstrap i’ve implemented it without this issue hundreds of times, just never on shopify (using the bundle, which includes the required popper.js thats needed for dropdowns to work)

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

https://ktaubtc49u9175n4-65155924214.shopifypreview.com

Code for the dropdown, should be perfect but nothing works

<div class='product-preview'>
    <div class='product-preview-image'>
        <a href='{{ product.url }}'>
            {% assign dateCreated = product.created_at | date: '%s' %}
            {% assign dateNow = 'now' | date: '%s' %}
            {% assign dateDiff = dateNow | minus: dateCreated %}
            {% assign diffInSecondsToBeConsideredNew = 31 | times: 86400 %}

            {% if dateDiff < diffInSecondsToBeConsideredNew %}
                <span class='badge badge-primary'>New</span>
            {% endif %}
            {{ product.featured_image | img_url: '264x264', crop: 'center' | img_tag }}
        </a>
    </div>
    <h4 class='product-preview-title'>{{ product.title }}</h4>
    <h5 class='product-preview-price'>{{ product.price | money }}</h5>
    {% if product.variants.size > 1 %}
        <div class="btn-group d-flex" role="group" aria-label="Add to cart or Wishlist">
            <div class="btn-group" role="group">
                <button id="variantDropdown" type="button" class="btn btn-outline-secondary add-to-cart dropdown-toggle w-75" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <i class='fa-solid fa-shopping-cart'></i> Add to cart
                </button>
                <div class="dropdown-menu" aria-labelledby="variantDropdown">
                    {% for variant in product.variants %}
                        <button class="dropdown-item" data-tags="{{ variant.tags | join: ',' | downcase }}">{{ variant.title }} - {{ variant.price | money }}</button>
                    {% endfor %}
                </div>
            </div>
            <button class='btn btn-outline-secondary add-to-wishlist w-auto'><i class='fa-solid fa-heart'></i></button>
        </div>
    {% else %}
        <div class="btn-group d-flex" role="group" aria-label="Add to cart or Wishlist">
            <button class='btn btn-outline-secondary add-to-cart w-75' data-tags='{{ product.tags | join: ',' | downcase }}'><i class='fa-solid fa-shopping-cart'></i> Add to cart</button>
            <button class='btn btn-outline-secondary add-to-wishlist w-auto'><i class='fa-solid fa-heart'></i></button>
        </div>
    {% endif %}
</div>
2

I was using v4.x data properties, I had data-toggle=‘dropdown’ instead of data-bs-toggle=‘dropdown’