title: How to use Bootstrap-Vue with a custom navbar dropdown button?
body: <p>I'm working on an early-in-development Django + Vue website that uses the <a href="https://themes.getbootstrap.com/product/maisonnette-responsive-admin-template/" rel="nofollow noreferrer">Maisonette</a> Bootstrap theme.  Part of the website is regular Django-rendered templates, and part of the website is a single-page app.</p>
  
  <p>I've been tasked with making the navbar for the Vue single-page app match the navbar in the Maisonette theme.  The Vue SPA was set up to use Bootstrap-Vue before I started working on it.</p>
  
  <p>My first thought was to just copy the Django template code into the Vue template, but that didn't work at all (I'm not sure why).  It seems I <em>must</em> use the Bootstrap-Vue tags to have this work.</p>
  
  <p>However, I'm now encountering a problem where I'm trying to get a dropdown-activator(?) link(?) to look the same, and it seems not possible because of the way Bootstrap-Vue creates dropdown links.</p>
  
  <p>I want to make the SPA look like this (image taken from the Django part of the website):</p>
  
  <p><a href="https://i.stack.imgur.com/nUxeW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nUxeW.png" alt="enter image description here"></a></p>
  
  <p>...which uses this code in the Django template:</p>
  
  <pre><code>    &lt;a href="#" data-toggle="dropdown" role="button" aria-expanded="false"
         class="dropdown-toggle nav-link"&gt;
        &lt;span class="user-name"&gt;{{ user.get_username }}&lt;/span&gt;
        &lt;span class="angle-down s7-angle-down"&gt;&lt;/span&gt;
      &lt;/a&gt;
  </code></pre>
  
  <p>...but in Bootstrap-Vue I only seem to have access to this tag:</p>
  
  <pre><code>            &lt;b-nav-item-dropdown text="Navigation" right&gt;
  </code></pre>
  
  <p>...which ends up looking like this in the SPA:</p>
  
  <p><a href="https://i.stack.imgur.com/qhFtu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qhFtu.png" alt="enter image description here"></a></p>
  
  <p>So the way the Bootstrap-Vue tag works seems to make it impossible to add the angle-down span.</p>
  
  <p>Is there a way to accomplish this?</p>
  
  <hr>
  
  <p>The full code for the Django navbar:</p>
  
  <pre><code>{% extends 'base.html' %} {% load static %} {% block nav %}
  &lt;nav class="navbar navbar-expand navbar-dark mai-top-header"&gt;
    &lt;div class="container"&gt;
      &lt;a href="#" class="navbar-brand"&gt;&lt;/a&gt;
      &lt;!--Left Menu--&gt;
      &lt;ul class="nav navbar-nav mai-top-nav"&gt;
        &lt;li class="nav-item"&gt;
          &lt;a href="/" class="nav-link"&gt;Home&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a href="http://www.bluescanlabs.com/index.html" class="nav-link"&gt;About&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
      &lt;!--User Menu--&gt;
      &lt;ul class="nav navbar-nav float-lg-right mai-user-nav"&gt;
        &lt;li class="dropdown nav-item"&gt;
          &lt;a href="#" data-toggle="dropdown" role="button" aria-expanded="false"
             class="dropdown-toggle nav-link"&gt;
            &lt;span class="user-name"&gt;{{ user.get_username }}&lt;/span&gt;
            &lt;span class="angle-down s7-angle-down"&gt;&lt;/span&gt;
          &lt;/a&gt;
          &lt;div role="menu" class="dropdown-menu"&gt;
            &lt;a href="/" class="dropdown-item"&gt;
              &lt;span class="icon s7-home"&gt; &lt;/span&gt;Home&lt;/a&gt;
            &lt;a href="{% url 'account_profile' %}" class="dropdown-item"&gt;
              &lt;span class="icon s7-user"&gt; &lt;/span&gt;Profile&lt;/a&gt;
            &lt;a href="{% url 'account_change_password' %}" class="dropdown-item"&gt;
              &lt;span class="icon s7-lock"&gt; &lt;/span&gt;Password&lt;/a&gt;
            &lt;a href="{% url 'account_logout' %}" class="dropdown-item"&gt;
              &lt;span class="icon s7-power"&gt; &lt;/span&gt;Log Out&lt;/a&gt;
          &lt;/div&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  {% endblock %}
  </code></pre>
  
  <p>The full (but not finished) code for the SPA's navbar:</p>
  
  <pre><code>&lt;template&gt;
      &lt;b-navbar toggleable="md"
                type="dark"
                class="mai-top-header"&gt;
          &lt;b-container&gt;
              &lt;b-navbar-brand :to="{ name: 'home' }"&gt;&lt;/b-navbar-brand&gt;
              &lt;!--Left Menu--&gt;
              &lt;b-navbar-nav class="mai-top-nav"&gt;
                  &lt;b-nav-item :to="{ name: 'home' }"&gt;Home&lt;/b-nav-item&gt;
                  &lt;b-nav-item href="http://www.bluescanlabs.com/index.html"&gt;About&lt;/b-nav-item&gt;
              &lt;/b-navbar-nav&gt;
              &lt;!--User Menu--&gt;
              &lt;b-navbar-nav class="float-lg-right mai-user-nav"&gt;
                  &lt;b-nav-item-dropdown text="Navigation" right&gt;
                      &lt;b-dropdown-item class="icon s7-home"&gt;Home&lt;/b-dropdown-item&gt;
                      &lt;b-dropdown-item class="icon s7-user"&gt;Profile&lt;/b-dropdown-item&gt;
                      &lt;b-dropdown-item&gt;Password&lt;/b-dropdown-item&gt;
                      &lt;b-dropdown-item&gt;Log Out&lt;/b-dropdown-item&gt;
                  &lt;/b-nav-item-dropdown&gt;
              &lt;/b-navbar-nav&gt;
          &lt;/b-container&gt;
      &lt;/b-navbar&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {}
  &lt;/script&gt;
  
  &lt;style scoped&gt;
  
  &lt;/style&gt;
  </code></pre>