Excluding Pages from Nuxt Content Navigation: A Guide for Nuxt 3 Document-Driven Pages
In Nuxt Content, you can display a navigation based on the structure and files in your content/ directory. The navigation object generated by Nuxt Content is a tree-like representation of your content sources in JSON format, consisting of both pages and directories. You can add custom keys to your navigation using the navigation property in the front-matter of your content files or the _dir.yml files in your directories. To include top-level keys in the navigation object, you can set the content.navigation.fields property in the nuxt.config file. To exclude a page from the navigation, you can set navigation: false in the front-matter of the page. The same pattern also works in _dir.yml files to filter out content directories and files. 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
If you want to create a nested navigation, you can pass a queryContent() instance to the fetchContentNavigation() utility to filter the items returned and create a navigation object based on a specific content directory.
In a Nuxt.js v3 document driven application, pages can be dynamically generated from markdown files. To prevent a specific page from appearing in the navigation, the navigation property in the markdown file's frontmatter can be set to false.
The frontmatter is metadata that appears at the top of a markdown file, enclosed by triple-dashes (---). To make a page not appear in the navigation, you simply add this line to the frontmatter:
navigation: false
The useContent() composable, which is available throughout the application, returns various properties based on the current page. The navigation property can be used to render the navigation, so to prevent the page from appearing in the navigation, you would check if the navigation property is set to false before rendering the link.
Here is an example of how you would use the useContent() composable and check the navigation property in a navigation component:
<script setup lang="ts">
const { navigation } = useContent()
</script>
<template>
<ul>
<li v-for="item in navigation" :key="item._id">
<NuxtLink v-if="item.navigation !== false" :to="item._path">{{ item.title }}</NuxtLink>
</li>
</ul>
</template>
In this example, the useContent() composable is used to get the navigation property, and the navigation items are looped over with v-for. The navigation property for each item is checked, and if it's not false, a link is rendered with the NuxtLink component and the item's path.
In conclusion, Nuxt Content provides a powerful feature for generating a navigation structure based on your content sources. It allows you to create advanced navigation components with ease, without having to maintain any querying logic. To exclude a page from the navigation structure, you can set the "navigation" key to "false" in the front-matter of the content file or in the _dir.yml file. This simple method ensures that the page is filtered out of the navigation structure and does not appear in the navigation menu. By following these steps, you can effectively prevent a Nuxt 3 document-driven page from being displayed in the navigation menu and maintain the clean and organized structure of your content.