My navbar looks like this: The dropdown toggles are obviously missing, but that's not the first issue I want to concentrate on. What I want to concentrate on is the fact that "Yropeên" does not have the same text color as the others, nor can I click on it as if it were a link.   The navbar.vue code looks like this:

<template>
<div>
<!--Navbar-->
<router-link to="/">
</router-link>
<navbar color="primary" dark>
<mdb-navbar-brand href="safe://yropeen.yro2">
Yropeên
</mdb-navbar-brand>
<navbar-collapse>
<navbar-nav>

<dropdown tag="li" class="nav-item">
<dropdown-toggle @click.native="toggleDropdown(0)" tag="a" navLink color="primary" waves-fixed>Philosophy</dropdown-toggle>
<dropdown-menu v-show="active[0]">
<router-link to="/philosophy/core"><dropdown-item>Core</dropdown-item></router-link>
<router-link to="/philosophy/accent"><dropdown-item>Accent</dropdown-item></router-link>
<router-link to="/philosophy/suffix"><dropdown-item>Suffixes</dropdown-item></router-link>
</dropdown-menu>
</dropdown>

<dropdown tag="li" class="nav-item">
<dropdown-toggle @click.native="toggleDropdown(1)" tag="a" navLink color="primary" waves-fixed>Basics</dropdown-toggle>
<dropdown-menu v-show="active[1]">
<router-link to="/basics/phonology"><navbar-item waves-fixed>Phonology</navbar-item></router-link>
</dropdown-menu>
</dropdown>

<dropdown tag="li" class="nav-item">
<dropdown-toggle @click.native="toggleDropdown(2)" tag="a" navLink color="primary" waves-fixed>Clause</dropdown-toggle>
<dropdown-menu v-show="active[2]">
<router-link to="/grammar/sentence"><navbar-item waves-fixed>Sentence</navbar-item></router-link>
<router-link to="/grammar/clause/focal"><navbar-item waves-fixed>Focal</navbar-item></router-link>
<router-link to="/grammar/clause/list"><navbar-item waves-fixed>List</navbar-item></router-link>
<router-link to="/grammar/clause/command"><navbar-item waves-fixed>Command</navbar-item></router-link>
<router-link to="/grammar/clause/empathy"><navbar-item waves-fixed>Empathy</navbar-item></router-link>
</dropdown-menu>
</dropdown>

<dropdown tag="li" class="nav-item">
<dropdown-toggle @click.native="toggleDropdown(3)" tag="a" navLink color="primary" waves-fixed>Syntagma</dropdown-toggle>
<dropdown-menu v-show="active[3]">
<router-link to="/grammar/syntagma/synfocus"><navbar-item waves-fixed>Synfocus</navbar-item></router-link>
<router-link to="/grammar/syntagma/ambit"><navbar-item waves-fixed>Ambit</navbar-item></router-link>
<router-link to="/grammar/syntagma/synfluence"><navbar-item waves-fixed>Synfluence</navbar-item></router-link>
</dropdown-menu>
</dropdown>

<dropdown tag="li" class="nav-item">
<dropdown-toggle @click.native="toggleDropdown(4)" tag="a" navLink color="primary" waves-fixed>Phrase class</dropdown-toggle>
<dropdown-menu v-show="active[4]">
<router-link to="/grammar/phrase/determiner"><navbar-item waves-fixed>Phonology</navbar-item></router-link>
</dropdown-menu>
</dropdown>

<dropdown tag="li" class="nav-item">
<dropdown-toggle @click.native="toggleDropdown(5)" tag="a" navLink color="primary" waves-fixed>Word class</dropdown-toggle>
<dropdown-menu v-show="active[5]">
<router-link to="/grammar/syntagmas/focus"><dropdown-item>Focus</dropdown-item></router-link>
<li class="divider"></li>
<router-link to="/grammar/wordclass/pronoun"><dropdown-item>Pronouns</dropdown-item></router-link>
<router-link to="/grammar/wordclass/verb"><dropdown-item>Verbs</dropdown-item></router-link>
<router-link to="/grammar/wordclass/noun"><dropdown-item>Nouns</dropdown-item></router-link>
<router-link to="/grammar/wordclass/determiner"><dropdown-item>Determiners</dropdown-item></router-link>
<router-link to="/grammar/wordclass/adjective"><dropdown-item>Adjectives</dropdown-item></router-link>
<router-link to="/grammar/wordclass/adverb"><dropdown-item>Adbverbs</dropdown-item></router-link>
<router-link to="/grammar/wordclass/preposition"><dropdown-item>Prepositions</dropdown-item></router-link>
<router-link to="/grammar/wordclass/conjunction"><dropdown-item>Conjunctions</dropdown-item></router-link>
<router-link to="/grammar/wordclass/interjection"><dropdown-item>Interjections</dropdown-item></router-link>
</dropdown-menu>
</dropdown>

<dropdown tag="li" class="nav-item">
<dropdown-toggle @click.native="toggleDropdown(6)" tag="a" navLink color="primary" waves-fixed>Verb class</dropdown-toggle>
<dropdown-menu v-show="active[6]">
<router-link to="/grammar/verbclass/directive"><dropdown-item>Imperative/Prohibitive</dropdown-item></router-link>
<router-link to="/grammar/verbclass/receptive"><dropdown-item>Expressive/Commissive</dropdown-item></router-link>
<router-link to="/grammar/verbclass/hortative"><dropdown-item>Adhortative</dropdown-item></router-link>
<router-link to="/grammar/verbclass/volitive"><dropdown-item>Volitive</dropdown-item></router-link>
<li class="divider"></li>
<router-link to="/grammar/verbclass"><dropdown-item>Indicative</dropdown-item></router-link>
</dropdown-menu>
</dropdown>

<router-link to="/learn"><navbar-item waves-fixed>Learn</navbar-item></router-link>

<dropdown tag="li" class="nav-item">
<dropdown-toggle @click.native="toggleDropdown(7)" tag="a" navLink color="primary" waves-fixed>Why</dropdown-toggle>
<dropdown-menu v-show="active[7]">
<router-link to="/whynot/european"><dropdown-item>Why European is the best choice</dropdown-item></router-link>
<router-link to="/whynot/english"><dropdown-item>We have English already</dropdown-item></router-link>
<router-link to="/whynot/french"><dropdown-item>Why not French?</dropdown-item></router-link>
<router-link to="/whynot/esperanto"><dropdown-item>Why not Esperanto?</dropdown-item></router-link>
<router-link to="/whynot/otherlanguages"><dropdown-item>Other languages</dropdown-item></router-link>
</dropdown-menu>
</dropdown>

<router-link to="/guestbook"><navbar-item waves-fixed>Guestbook</navbar-item></router-link>

</navbar-nav>
<!-- Search form -->
<!--
<form>
<md-input type="text" class="text-white" placeholder="Search" aria-label="Search" label navInput waves waves-fixed/>
</form>
-->
</navbar-collapse>
</navbar>
<!--/.Navbar-->
</div>
</template>

<script>
import { Navbar, NavbarItem, NavbarNav, NavbarCollapse, Dropdown, DropdownItem, DropdownMenu, DropdownToggle, MdInput } from 'mdbvue';

export default {
name: 'NavigationPage',
components: {
Navbar,
NavbarItem,
NavbarNav,
NavbarCollapse,
Dropdown,
DropdownItem,
DropdownMenu,
DropdownToggle,
MdInput
},
data() {
return {
active: {
0: false,
1: false,
2: false,
3: false,
4: false,
5: false,
6: false,
7: false,
},
navbarType: 'regular-fixed',
content: false
};
},
methods: {
toggleDropdown(index) {
for (let i = 0; i < Object.keys(this.active).length; i++) {
if (index !== i) {
this.active[i] = false;
}
}
this.active[index] = !this.active[index];
},
allDropdownsClose(target) {
for (let i = 0; i < Object.keys(this.active).length; i++) {
this.active[i] = false;
}
},
onClick(e) {
let parent = e.target;
let body = document.getElementsByTagName('body')[0];
while (parent !== body) {
if (parent.classList.contains('dropdown') || parent.classList.contains('btn-group')) {
return;
}
parent = parent.parentNode;
}
this.allDropdownsClose(e.target);
}
},
mounted() {
document.addEventListener('click', this.onClick);
},
destroyed() {
document.removeEventListener('click', this.onClick);
}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.navbar {
margin-bottom: 8px;
}

.navbar .dropdown-menu a:hover {
color: inherit !important;
}
</style>

package.json

 "dependencies": {
"babel-helper-module-imports": "~7.0.0-beta.3",
"mdbootstrap": "4.5.8",
"mdbvue": "~4.5.0",
"vue": "2.5.17",
"vue-router": "~3.0.0"
},
"devDependencies": {
"@neutrinojs/vue": "~8.0.0",
"babel-plugin-transform-runtime": "~6.0.0",
"babel-preset-stage-2": "~6.0.0",
"eslint": "~4.19.0",
"eslint-config-standard": "~11.0.0",
"eslint-plugin-import": "~2.13.0",
"eslint-plugin-node": "~7.0.0",
"eslint-plugin-promise": "~3.8.0",
"eslint-plugin-standard": "~3.1.0",
"eslint-plugin-vue": "~4.7.0",
"jquery": "~3.3.0",
"neutrino": "~8.3.0",
"webpack": "~3.11.0"
}

---