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

{  "title": "My Directory",  "_path": "/my-directory",  "children": [    ...pagesNodes  ]}

{  "title": "Page title",  "_path": "/my-directory/my-page",  "_id": "content:my-directory:page.md"}

[  {    "title": "My Directory",    "_path": "/my-directory",    "children": [      {        "title": "Page title",        "_path": "/my-directory/my-page",        "_id": "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

[  {    "title": "Home",    "icon": "🏡",    "_path": "/",  }]

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

title: 'My awesome directory'navigation.icon: '📁'

{  "title": "My awesome directory",  "icon": "📁",  "_path": "/my-directory",  "children": [    ...  ]}

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']    }  }})

---title: My Pageauthor: 'Sébastien Chopin'publishedAt: '15-06-2022'---

{  "title": "My Page",  "author": "Sébastien Chopin",  "publishedAt": "15-06-2022",  "_path": "/page",  "_id": "content:page.md",}

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

[  {    "title": "Not Hidden Directory",    "_path": "/not-hidden-directory",    "children": [      {        "title": "Page",        "_id": "content:not-hidden-directory:page.md",        "_path": "/not-hidden-directory/page"      }    ]  }]

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' }  }})