Self-managed navigation

Nuxt Content provides a component and composable to display a navigation based on the content/ directory structure and files.

Based on the generated _id and _path keys, Nuxt Content generates a whole navigation structure for your content.

It allows you to create advanced navigation components without having to maintain any querying logic related to it.

Structure

The navigation object can be seen as a tree, representing the structure of your content sources in JSON format.

It is divided into two types of nodes: pages and directories.

content/
  my-directory/
    page.md

Custom keys

You can use the navigation property in the front-matter of your content files to add keys to the navigation object.

---
navigation:
  title: 'Home'
  icon: '🏡'
---

# Welcome

Alternatively, the navigation also allows you to configure directory nodes via _dir.yml files.

It allows you to overwrite the title and custom properties to directory nodes in navigation.

content/
  my-directory/
    _dir.yml
    page.md

If you want to use top-level keys in the front-matter to be included in the navigation object, use the content.navigation.fields property in the nuxt.config:

defineNuxtConfig({
  content: {
    navigation: {
      fields: ['author', 'publishedAt']
    }
  }
})

Excluding

Set navigation: false in the front-matter of a page to filter it out.

---
navigation: false
---

This pattern also works inside _dir.yml file, allowing you to filter out content directories and files.

navigation: false

You can also use the _ content prefix to exclude content directories and files.

content/
  _hidden-directory/
    page.md
    index.md
  not-hidden-directory/
    _dir.yml
    index.md
    page.md

Nested navigation

You can pass a queryContent() instance to the fetchContentNavigation() utility to filter the items returned.

That allows to create navigation objects for which the starting point is based on a specific content directory.

const query = queryContent({
  where: {
    _path: { $contains: '/your/navigation/starting/point' }
  }
})