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 in a JSON format the structure of your content sources.

It is divided in two type of nodes, pages and directories.

Directory structure
content/
  my-directory/
    page.md
Directory node
{  "title": "My Directory",  "_path": "/my-directory",  "children": [    ...pagesNodes  ]}
Page node
{  "title": "Page title",  "_path": "/my-directory/my-page",  "_id": "content:my-directory:page.md"}
Complete navigation
[  {    "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.

index.md
---navigation:  title: 'Home'  icon: '🏡'---# Welcome
Navigation
[  {    "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.

Directory structure
content/
  my-directory/
    _dir.yml
    page.md
_dir.yml
title: 'My awesome directory'navigation.icon: '📁'
Navigation
{  "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:

nuxt.config.ts
defineNuxtConfig({  content: {    navigation: {      fields: ['author', 'publishedAt']    }  }})
page.md
---title: My Pageauthor: 'Sébastien Chopin'publishedAt: '15-06-2022'---
Navigation node
{  "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.

page.md
---navigation: false---

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

_dir.yml
navigation: false

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

Directory structure
content/
  _hidden-directory/
    page.md
    index.md
  not-hidden-directory/
    _dir.yml
    index.md
    page.md
Navigation object
[  {    "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' }  }})

Go deeper in the API section: