<div id="navbar">
  <block-navigation></block-navigation>
  <span>World!</span>
  <other-components></other-components>
</div>

Vue.component('block-navigation', {
    props: ['val'],
    data() {
      return {
        navlist: [
          { link: 'name-1', name: 'linkName-1' },
          { link: 'name-2', name: 'linkName-2' },
          { link: 'name-3', name: 'linkName-3' },
          { link: 'name-4', name: 'linkName-4' },
          { link: 'name-5', name: 'linkName-5' },
        ]
      }
    },
    template: `
    <ul>
    	<li 
      	v-for="val in navlist"
        :key="val.id">
        <a :href=val.link :title=val.name>{{ val.name }}</a>
      </li>
    </ul>
    `
  })

  new Vue({
    el: '#navbar'
  })

<div class="menu">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

.menu {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

.menu div {
  border: 1px solid lightgray;
}

.menu {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

.menu div {
  border-top: 1px solid lightgray;
  border-right: 1px solid lightgray;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  // добавляете в див иконку и текст, все само встанет как надо
}

.menu div:nth-child(-n+3) {
  border-top: 0;
}

.menu div:nth-child(3n) {
  border-right: 0;
}