BootstrapVue — Dropdown Customization and Embedding

To make good looking Vue apps, we need to style our components.

To make our lives easier, we can use components with styles built-in.

In this article, we’ll look at how to customize BootstrapVue dropdowns and embed media.

Disabling Flipping

The alignment of a dropdown may change according to its viewport position.

To prevent that from happening, we can add the no-filip prop to our b-dropdown .

Menu Offset

We can add an offset to our dropdown with the offset prop.

For instance, we can write:

<template>
  <div id="app">
    <b-dropdown id="dropdown-offset" offset="25" text="Offset Dropdown" class="m-2">
      <b-dropdown-item href="#">Action</b-dropdown-item>
    </b-dropdown>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

Then we move the dropdown 25 pixels to the right.

Split Button

We can create a menu button that has a button that does something other than opening the dropdown in addition to opening it.

To do that, we add the split prop:

<template>
  <div id="app">
    <b-dropdown split id="dropdown" text="Dropdown" class="m-2">
      <b-dropdown-item href="#">Action</b-dropdown-item>
    </b-dropdown>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

Now we only have an arrow on the right that opens the dropdown.

Split Button Link

The part of a split button that doesn’t open the dropdown can open a URL.

We can add the split-href prop to open a URL.

For instance, we can write:

<template>
  <div id="app">
    <b-dropdown split id="dropdown" split-href="#foo" text="Dropdown" class="m-2">
      <b-dropdown-item href="#">Action</b-dropdown-item>
    </b-dropdown>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

We added split-href=”#foo” so that we’ll opening the #foo path when we click on the left part.

Split Button Type

Split button can have all the types of a button.

To specify the type, we use the split-button-type prop.

The value can be 'button' , 'submit' or 'reset' .

Sizing

We can change the size of the dropdown button with the size prop.

For instance, we can write:

<template>
  <div id="app">
    <b-dropdown id="dropdown" size="lg" text="Dropdown" class="m-2">
      <b-dropdown-item href="#">Action</b-dropdown-item>
    </b-dropdown>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

Then we get an extra big button.

'sm' will make the button smaller than the default size.

Dropdown Color Variants

We can set the variant prop to change the dropdown button color variant.

For instance, if we have:

<template>
  <div id="app">
    <b-dropdown id="dropdown" variant="primary" text="Dropdown" class="m-2">
      <b-dropdown-item href="#">Action</b-dropdown-item>
    </b-dropdown>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

Then we make it blue.

All the outline and fill variants are available.

Split Button Color Variant

If we have a split button, we can set different variants for the left and right parts.

To set the left part, we use the split-variant prop.

To set the right part, we use the variant prop.

For instance, we can write:

<template>
  <div id="app">
    <b-dropdown
      id="dropdown"
      split
      split-variant="outline-primary"
      variant="primary"
      text="Dropdown"
      class="m-2"
    >
      <b-dropdown-item href="#">Action</b-dropdown-item>
    </b-dropdown>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

Now the left part has a blue outline and text.

And the right part has a blue background and a white arrow tip.

Block Level Dropdowns

Dropdowns can be block level.

This means it fills the whole page width.

To make the dropdown a block element, we add the block prop

For instance, we can write:

<template>
  <div id="app">
    <b-dropdown id="dropdown" block text="Dropdown" class="m-2">
      <b-dropdown-item href="#">Action</b-dropdown-item>
    </b-dropdown>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

Now the button fills the viewport since we added the block prop to b-dropdown .

block can be combined with the split button props to make a block-level split button.

Embedding Items Responsively

BootstrapVue comes with a b-embed component to embed things responsively.

To use it, we can write:

<template>
  <div id="app">
    <b-embed
      type="iframe"
      aspect="16by9"
      src="https://www.youtube.com/embed/wtH-hdOF1uA?rel=0"
      allowfullscreen
    ></b-embed>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

We just set the src prop to the YouTube video’s embed URL to embed a YouTube video.

allowfullscreen means that we allow the video to go full screen.

aspect is the aspect ratio, which we set to 16 by 9.

type is the type of object we want to embed. YouTube videos embedded in an iframe, so we set it to 'iframe' .

In addition to iframes, we can also embed video, embed and object elements.

We can also add source elements inside b-embed components to embed what we want.

Conclusion

We can customize our dropdowns with various options.

b-embed can be used to embed items.