bootstrap-vue/src/components/dropdown/fixtures/dropdown.html

BootstrapVue provides one of the most comprehensive implementations of Bootstrap 4 components and grid system for Vue.js and with extensive and automated WAI-ARIA accessibility markup.

<div id="app"
     class="text-center">
    <b-dropdown ref="dd_1"
                text="Dropdown Button sm"
                size="sm"
                class="m-md-2">
        <b-dropdown-item href="#">Action</b-dropdown-item>
        <b-dropdown-item href="#">Another action</b-dropdown-item>
        <b-dropdown-item href="#">Something else here</b-dropdown-item>
    </b-dropdown>

    <br><br>

    <b-dropdown ref="dd_2"
                text="Split Dropdown Button"
                variant="success"
                split
                class="m-md-2">
        <b-dropdown-item href="#">Action</b-dropdown-item>
        <b-dropdown-item href="#">Another action</b-dropdown-item>
        <b-dropdown-item href="#">Something else here...</b-dropdown-item>
    </b-dropdown>

    <br><br>

    <b-dropdown ref="dd_3"
                text="Right align"
                variant="warning"
                right
                class="m-md-2">
        <b-dropdown-item href="#">Action</b-dropdown-item>
        <b-dropdown-item href="#">Another action</b-dropdown-item>
        <b-dropdown-item href="#">Something else here</b-dropdown-item>
    </b-dropdown>

    <br><br>

    <b-dropdown ref="dd_4"
                text="Drop-Up"
                dropup
                variant="info"
                class="m-md-2">
        <b-dropdown-item href="#">Action</b-dropdown-item>
        <b-dropdown-item href="#">Another action</b-dropdown-item>
        <b-dropdown-item href="#">Something else here</b-dropdown-item>
    </b-dropdown>

    <br><br>

    <b-dd ref="dd_5"
          text="Link"
          variant="info"
          class="m-md-2"
          link>
        <b-dd-item href="#">Action</b-dd-item>
        <b-dd-item href="#">Another action</b-dd-item>
        <b-dd-item href="#">Something else here</b-dd-item>
    </b-dd>

    <b-dropdown ref="dd_6" text="Dropdown" variant="primary" class="m-md-2">
        <b-dropdown-item>link</b-dropdown-item>
        <b-dropdown-header>header</b-dropdown-header>
        <b-dropdown-item-button>button</b-dropdown-item-button>
        <b-dropdown-divider></b-dropdown-divider>
    </b-dropdown>

    <br><br>

    <b-dropdown ref="dd_7" text="Dropdown" variant="link" no-caret>
        <template slot="button-content">
          <span>icon</span>
        </template>

        <b-dropdown-item href="#">Action</b-dropdown-item>
        <b-dropdown-item href="#">Another action</b-dropdown-item>
        <b-dropdown-item href="#">Something else here...</b-dropdown-item>
    </b-dropdown>

    <br><br>

    <b-dropdown ref="dd_8" text="Dropdown" no-caret split>
        <b-dropdown-item href="#">Action</b-dropdown-item>
        <b-dropdown-item href="#">Another action</b-dropdown-item>
        <b-dropdown-item href="#">Something else here...</b-dropdown-item>
    </b-dropdown>

    <br><br>

    <b-dropdown ref="dd_9" text="Dropdown" boundary="viewport">
        <b-dropdown-item href="#">Action</b-dropdown-item>
        <b-dropdown-item href="#">Another action</b-dropdown-item>
    </b-dropdown>
</div>