Aurelia/Bootstrap: Making a dropdown menu in a nav bar when routing

Question

I'm trying to implement a Bootstrap dropdown menu in a nav bar in an Aurelia application. I'm using rather standard Bootstrap code, nothing too fancy at this point.

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav">
    ...
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
        Artists
      </a>
      <ul class="dropdown-menu">
        <li><a href="#/artists">All</a></li>
        <li><a href="#/artists/incomplete">Incomplete</a></li>
      </ul>
    </li>
    ...
  </ul>
</div>

The problem is href="#" in the menu header item. I have a router and a route for #. When I click on the link, it goes to that route. No big surprise, but that's clearly not what I want to do; I want to display my dropdown menu.

I don't know what to do here. href="" causes the application to refresh. Putting a fake route in there throws an error on the JavaScript side and still doesn't show the menu.

Answer 1

Add:

import 'bootstrap';

to your main file.