<div id="app">
  <div class="navigation">
    <ul>
<!--       <li v-for="(navlink, index) in navigation">
        <a :href="navlink">{{ index }}</a>
      </li> -->
      <li v-for="link in links">
        <a :href="link.url">{{ link.text }}</a>
      </li>
    </ul>
  </div>
  <div class="navigation--input">
    <label for="navlink">Link Title</label>
    <input v-model="newLink" type="text">
    <label for="navurl">Link URL</label>
    <input v-model="newURL" type="text">
    <button @click="newAddLink">Add to Navigation</button>
  </div>
</div>

body {
  padding: 0;
  margin: 0;
}
.navigation {
  background-color: #ddd;
  width: 100%;
  margin: 0;
  
  ul {
    margin: 0;
    padding: 20px 0;
    text-align:center;
  }
  
  li {
    display: inline-block;
    padding: 0 20px;
    
    a {
      color: #555;
      text-decoration: none;
      &:hover {
        border-bottom: 2px solid;
      }
    }
  }
  
  &--input {
    width: 20%;
    text-align: center;
    padding: 40px 0;
    margin: 0 auto;
    
    input {
      margin: 10px auto 0 auto;
      border-radius: 5px;
      border: 1px solid #ddd;
      padding: 5px;
      display: block;
      width: 100%;
    }
    
    button {
      margin-top: 20px;
      background-color: cornflowerblue;
      padding: 10px 24px;
      border-radius: 3px;
      color: #fff;
    }
    
    label {
      text-align: left;
      display: block;
      &:not(:first-child){
        margin-top: 20px;
      }
    }
  }
}

new Vue({
  el: '#app',
  data: {
    navigation: {
      Home: 'http://google.com',
      Work: 'http://dribbble.com',
      Blog: 'http://medium.com'
    },
    newLink: '',
    newURL: '',
    links: [
      // { text: 'Test', url: 'ham' }
    ]
  },
  methods: {
    addLink: function() {
      const newLink = {
        navName: "New Title",
        navURL: "testtest"
      };
      this.navigation.push(newLink);
      console.log("Added");
    },
    newAddLink: function() {
      var text = this.newLink.trim()
      var url = this.newURL.trim()
      if (text) {
        this.links.push({ text: text, url: url })
        this.newLink = ""
        this.newURL = ""
      }
    }
  }
})