<div class="dropdown">
    <button type="button" class="btn btn-secondary" data-toggle="dropdown">
        dropdown
    </button>
    <ul class="dropdown-item">
        <div class="btn-group btn-group-vertical w-40">
            <button type="button" class="btn btn-secondary">item 1</button>
            ...
        </div>
    </ul>
</div>
                

Dropdown is automatically enabled once you provide the data-toggle="dropdown" attribute to the toggler.

However, you can enable it manually by calling the raven.dropdown() and pass an HTML Element or NodeList of the toggler to the method.

const dropdownitems = document.queryselector(".toggle-dropdown")
raven.dropdown(dropdownitems)
                

You can add an caret indicator by adding the toggle-dropdown class to the toggler.

<div class="dropdown">
    <button type="button" class="btn btn-secondary toggle-dropdown" data-toggle="dropdown">
        dropdown
    </button>
    <ul class="dropdown-item">
        <div class="btn-group btn-group-vertical w-40">
            <button type="button" class="btn btn-secondary">item 1</button>
            ...
        </div>
    </ul>
</div>
                

<div class="dropdown">
    <div class="btn-group">
        <button type="button" class="btn btn-secondary">dropdown</button>
        <button type="button" class="btn btn-secondary toggle-dropdown toggle-dropdown-split" data-toggle="dropdown"></button>
    </div>
    <ul class="dropdown-item">
        <div class="btn-group btn-group-vertical w-40">
            <button type="button" class="btn btn-secondary">item 1</button>
            ...
        </div>
    </ul>
</div>
                

Options is based on the PopperJS options itself and can be changed by passing the data-[option name] attribute to the toggler. Please refer to their documentation for the explanation.

Supported options is:

• Strategy [data-strategy]. Default: "absolute".
• Placement [data-placement]. Default: "bottom-start".
• Skidding [data-skidding]. Default: 0.
• Distance [data-distance]. Default: 0.

<div class="dropdown">
    <button type="button" class="btn btn-secondary toggle-dropdown" data-toggle="dropdown" data-placement="top">
        top
    </button>
    <ul class="dropdown-item">
        <div class="btn-group btn-group-vertical w-40">
            <button type="button" class="btn btn-secondary">item 1</button>
            ...
        </div>
    </ul>
</div>