Support custom HTML as dropdown trigger

[felixoi]

Currently I'm using this normal bootstrap code to achieve a dropdown navbar brand:

<nav class="navbar navbar-expand-md fixed-top">
    <div class="container">
      <nav class="navbar-nav">
        <li class="nav-item dropdown">
         
         //!!! Not supported !!!
          <a class="nav-link dropdown-toggle navbar-brand" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
            <img src="../assets/img/org-image.svg"/>
            <span class="headline">Some Org</span>
            <font-awesome-icon :icon="['fas', 'chevron-down']" :fixed-width="true"/>
          </a>

          <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Separated link</a>
          </div>
        </li>
      </nav>

      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar_collapse" aria-controls="navbar_collapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbar_collapse">
        <ul class="navbar-nav mr-auto">
          <slot></slot>
        </ul>
      </div>
    </div>
  </nav>

This is not possible with bootstrap-vue since the dropdown only supports a text option and not custom html to be the trigger.

++

':html' really need.

[wrabit]

+1

[NathanWailes]

Why was this closed? I'm currently dealing with the same issue: https://stackoverflow.com/questions/53418160/how-to-use-bootstrap-vue-with-a-custom-navbar-dropdown-button

[tmorehouse]

you can place custom content in the dropdown trigger. the nav dropdown inherits from b-dropdown.

use the slot button-content

<b-nav pills>
  <b-nav-item active>Active</b-nav-item>
  <b-nav-item>Link</b-nav-item>
  <b-nav-item-dropdown id="nav7_ddown" right>
   <template slot="button-content">custom <b>text</b></template>
   <b-dropdown-item>one</b-dropdown-item>
    <b-dropdown-item>two</b-dropdown-item>
    <b-dropdown-divider></b-dropdown-divider>
    <b-dropdown-item>three</b-dropdown-item>
  </b-nav-item-dropdown>
</b-nav>

[NathanWailes]

Thank you, it worked perfectly!