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

0
votes

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.

1
twitter-bootstrapaurelia
What did you mean with "I have a router for #"? Your code works fine for me - Fabio Luz
Here is my app.js: export class App { configureRouter(config, router) { config.title = 'Song Charts'; config.map([ { route: ['','welcome'], name: 'welcome', moduleId: 'welcome', title: 'Welcome' }, { route: 'artists', name: 'artists', moduleId: 'artists', title: 'Artists' }, { route: 'artists/incomplete', name: 'incomplete-artists', moduleId: 'incomplete-artists', title: 'Incomplete Artists' }, ... this.router = router; } } - Jay Bienvenu
You could use another element than a, and don´t use the href attribute. - kabaehr
This uses Bootstrap. button messes up the formatting. - Jay Bienvenu
I thought bootstrap's javascript stopped propagation on the click event to keep stuff like that from happening. Are other bootstrap functions working (e.g. tooltips)? - redbmk

1 Answers

2
votes

Add:

import 'bootstrap';

to your main file.