Add the navigationBeta

This article will introduce doing queries outside the Slice Zone and configuring custom types in Prismic. We'll show you how to handle the top navigation in your Prismic repository and Nuxt.js app.


Create a Menu Type & Add content

Menu's are handled outside the Slice Zone. So to be able to create a menu for your application you will need to create a 'menu' custom type in Prismic, add your menu links & query your content. Luckily we've already got some documentation for this, so we're going to follow along and add the content for this project.

You'll see in the video below that we copy the content model for the menu from the the article, then create a menu custom type and paste the JSON in the JSON editor, simple. Then head over to the document writing room and add your document links & link labels.


Query the Menu Content

Now heading back to the project code we're going to query the menu in the Vuex Store, call the query in the layout and create the menu component. All of which is explained in the Nav bars, footers and menus article. The only difference will be in the styling we including for our component. You can see the full component code below:

Copy
 <template>
  <header class="site-header">
    <p v-if="$store.state.menu === 'Please create a menu document'" class="logo">{{ $store.state.menu }}</p>
    <nuxt-link to="/" class="logo">{{ $prismic.asText($store.state.menu.title) }}</nuxt-link>
    <nav>
      <ul>
        <li v-for="menuLink in $store.state.menu.menu_links" :key="menuLink.id">
          <prismic-link :field="menuLink.link">{{ $prismic.asText(menuLink.label) }}</prismic-link>
        </li>
      </ul>
    </nav>
  </header>
</template>

<script>
export default {
  name: 'header-prismic',
}
</script>

<style scoped>
.site-header {
  height: 30px;
  padding: 20px 0;
  color: #484d52;
  font-weight: 700;
}
.site-header a {
  color: #484d52;
  font-weight: 700;
}
.site-header nav a:hover {
  color: #72767B;
}

.site-header .logo {
  display: inline-block;
  font-size: 22px;
  font-weight: 900;
}
.site-header nav {
  float: right;
}
.site-header nav ul {
  margin: 0;
  padding-left: 0;
}
.site-header nav li {
  display: inline-block;
  margin-left: 40px;
}

@media (max-width: 1060px) {
  .site-header {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media (max-width: 767px) {
  .site-header {
    height: auto;
  }

  .site-header {
    position: absolute;
    left: 0;
    right: 0;
  }

  .site-header .logo {
    display: block;
    text-align: center;
  }
  .site-header nav {
    float: none;
    text-align: center;
  }
  .site-header nav li {
    display: inline-block;
    margin-left: 10px;
    margin-right: 10px;
  }
}
</style>

See Your New Menu

Now all the hard work is done, simply run your project:

  • npm
  • Yarn
Copy
npm run dev
Copy
yarn dev

Boom! Simple as that you've got a website menu :)