Dropdown on div element with bootstrap-vue

Question

I'm realy not fan of bootstrap-vue... and i have some problem is it possible to create something like this?

<div class="dropdown open">
    <div data-toggle="dropdown" class="dropdown-toggle">some text</div> 
    <div class="dropdown-menu">
        <div class="row">
            <div id="left_side" class="col-lg-6">
                <label class="checkbox">
                    <input type="checkbox" value="aaa">AAA</label> 
                <label class="checkbox">
                    <input type="checkbox" value="bbb">BBB</label>
            </div> 
            <div id="right_side" class="col-lg-6">some text</div>
        </div>
    </div>
</div>

I was trying many options but <b-dropdown> always create <button> tag

Answer 1

Maybe provide your example usage of bootstrap-vue. The dropdown component has sub components for DD items and DD item buttons. https://bootstrap-vue.js.org/docs/components/dropdown

Answer 2

Elements that are not button or a are not accessibility friendly (they do not have the correct semantic meanings to screen reader users).

You should always use semantic elements where possible, and apply styling to make them appear as you need.

Why use a div which does not convey "clickable", when button always conveys that it is a clickable element that has the same click and keyboard behaviour expected by screen reader users or keyboard only users.

BootstarpVue provides various props for b-dropdown to control styles on the trigger buttons (or anchor tags when in a navbar).

Docs are available at https://bootstrap-vue.js.org/docs/components/dropdown