# Custom Navigation

Setting up navigation menus is easy with your Nacelle dashboard settings and our Vuex store getters.

By default the Nuxt Starter is set up to display a menu in the site header using the main-menu link list preset in your Nacelle space's settings. Following this guide we will create a new navigation menu that we will display in a custom component.

Sign in to the Nacelle dashboard, go to your space settings, and click the tab for "Link Lists". Here you should see the default main-menu link list. At the bottom of the page, click the button for "Add List" to start creating our custom menu link list.

Give the list a handle of "custom-nav". This is how we will later reference this list in our Nuxt project. Go ahead and add some list items to this list, filling out a title, the relative path for that link, and selecting the type of page for that list item. Your new link list should look something like this: Custom Link List

Save your list, and then open up your Nuxt project in your IDE.

# Making a Menu Component

Now that you have added a new link list to your space settings. We need to create a component that will use those settings to build a custom navigation menu.

Create a new file in components/CustomNav.vue for a Vue single-file component.

<template>
  <nav class="custom-menu"></nav>
</template>

<script>
export default {}
</script>

<style></style>

Link list data is automatically added to the Vuex store under the space module. You can use Vuex methods for retrieving that data and using it in your new component.

<script>
import { mapGetters } from 'vuex'

export default {
  computed: {
    // getLinks getter makes it easy to retrieve link list data for a specific list.
    ...mapGetters('space', ['getLinks']),

    menu() {
      // reference the link list with the handle you set in the dashboard
      return this.getLinks('custom-nav')
    },
  },
}
</script>

Now your component has access to the custom-nav link list data as an array of link items in you new computed property menu. You can update the template to display all the links.

<template>
  <nav class="custom-menu">
    <nuxt-link v-for="(link, index) in menu" :key="index" :to="link.to">
      {{ link.title }}
    </nuxt-link>
  </nav>
</template>

Your new custom menu component is ready. Add it to a template page or in your layouts/defaul.vue component and see the custom navigation menu in action.

TIP

By default Nacelle fetches and generates a local static JSON file with your space data during build time. If you make changes to items in your link list, you will have to rebuild your project with npm run dev, npm run build, or npm run generate to see those changes. Refreshing your browser or hot reloading of your project running on localhost will not show reflect those updates.