# Menu and Dropdown Menu issue

**URL:** <https://discourse.aurelia.io/t/menu-and-dropdown-menu-issue/3477>\
**Category:** Uncategorized\
**Created:** [May 10, 2020, 4:58pm UTC](https://discourse.aurelia.io/t/menu-and-dropdown-menu-issue/3477 "2020-05-10T16:58:28Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![rhysshadow](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/rhysshadow/32/1959_2.png) [@rhysshadow](https://discourse.aurelia.io/u/rhysshadow)\
**Post date:** [May 10, 2020, 4:58pm UTC](https://discourse.aurelia.io/t/menu-and-dropdown-menu-issue/3477/1 "2020-05-10T16:58:28Z")

</div>

I am trying to have only Home show all the time, with the rest of the routes configured in app.js showing up in a dropdown.

I have the dropdown working, but the routes also show up outside the dropdown along with the Home route.

app.js:

```auto
import {PLATFORM} from 'aurelia-pal';

export class App {
  configureRouter( config, router )
  {
    config.title = 'ARIS';
    config.options.pushState = true;
    config.options.root = '/';

    config.map([
      {
        route: '', 
        name: 'home', 
        moduleId: PLATFORM.moduleName('home'), 
        nav: true, 
        title: 'Home',
      },
      {
        route: 'login', 
        name: 'login', 
        moduleId: PLATFORM.moduleName('login'), 
        nav: false
      },
      {
        route: 'customer', 
        name: 'customer', 
        moduleId: PLATFORM.moduleName('customer'), 
        nav: true, 
        title: 'Customer',
        settings: {dropdown: true}
      },
      {
        route: 'search', 
        moduleId: PLATFORM.moduleName('search'), 
        nav: true, 
        title: 'Search/Worklist',
        settings: {dropdown: true}
      },
      ]);

    config.mapUnknownRoutes('home');
    config.fallbackRoute('home');    
    this.router = router;
  }
}

```

app.html:

```auto
<template>
  <require from="./styles.css"></require>
  <ul class="nav navbar-nav">
    <li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
        <a if.bind="!nav.settings.dropdown" 
            data-toggle="collapse" 
            data-target="#skeleton-navigation-navbar-collapse.in" 
            href.bind="row.href">${row.title}</a>
    </li>
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Menu<span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li repeat.for="nav of router.navigation" class.bind="nav.isActive ? 'active' :''">
                <a if.bind="nav.settings.dropdown"
                    href.bind="nav.href">${nav.title}</a>
             </li>
        </ul>
    </li>
</ul>
  <div class="container-md">
    <div class="row">
      <home class="col-sm-5 col-md-4"></home>
    </div>
    <div class="row"></div>
      <router-view class="col-lg"></router-view>
    </div>
  </div>
</template>

```

---

<div class="post-metadata">

**Author:** ![khuongduybui](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/khuongduybui/32/44_2.png) [@khuongduybui](https://discourse.aurelia.io/u/khuongduybui)\
**Post date:** [May 10, 2020, 11:41pm UTC](https://discourse.aurelia.io/t/menu-and-dropdown-menu-issue/3477/2 "2020-05-10T23:41:09Z")

</div>

```auto
<ul class="nav navbar-nav">
    <li repeat.for="row of router.navigation" ...>
        <a if.bind="!nav.settings.dropdown" ...>

```

You are calling it `row` and then later checking for `nav.settings`, of course it will always be falsy, and so all your `<a>`'s show up.

---

<div class="post-metadata">

**Author:** ![rhysshadow](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/rhysshadow/32/1959_2.png) [@rhysshadow](https://discourse.aurelia.io/u/rhysshadow)\
**Post date:** [May 11, 2020, 6:14pm UTC](https://discourse.aurelia.io/t/menu-and-dropdown-menu-issue/3477/3 "2020-05-11T18:14:59Z")

</div>

Thank you, I did not catch that simple error.

It fixed my problem.