Happy path to directory listings? [V3]

[frank-laemmer]

I am looking at queryCollectionNavigation here:
https://content.nuxt.com/docs/utils/query-collection-navigation

If I understand correctly, it always dumps the whole navigation?

Now, my project does not have a permanent side bar navigation like with the documentation of Nuxt Content itself. It has a breadcrumb like this: Docs > Platform > Billing. Each of those items represents a folder in the markdown structure:

docs
 platform
  components
  …
  billing
    index.md
    overview.md
    billing-cycle.md
    proration.md
…

So when clicking on the billing headline, I'd ideally like to show a directory listing of only the items in that directory.

Mapped to the Nuxt Content Docs this means that this page:
https://content.nuxt.com/docs/utils/
would actually show the contents of that folder instead of redirecting.

So far I manually strip down the navigation to the current route (via Vue). But that code doesn't look not nice and feels unnecessarily complex for something that looks like a very common use case to me. So maybe I am missing the correct way to do it?

[frank-laemmer]

Feedback would still be welcome.

[EbrahimSolomon]

TL;DR: queryCollectionNavigation() gives you the full tree, then use the built-in helpers to slice it for the current folder. For a “directory listing” page (e.g. /docs/platform/billing), call findPageChildren on that path and render only those items. You can also build breadcrumbs with findPageBreadcrumb.

TL;DR: You don’t have to render the whole nav. Fetch the collection’s navigation once and then derive just the current folder’s items with the built-in helpers (no manual tree-slicing needed).

Directory listing for the current folder:

<script setup lang="ts"> import { findPageChildren } from '@nuxt/content/utils' const route = useRoute() // Get the full tree once for your collection (e.g. 'docs') const { data: navigation } = await useAsyncData('nav', () => queryCollectionNavigation('docs') ) // Only the children under the current path (treat index.md as child if you like) const children = computed(() => navigation.value ? findPageChildren(navigation.value, route.path, { indexAsChild: true }) : [] ) </script>

• {{ item.title }}

queryCollectionNavigation() returns the tree for a collection, and findPageChildren() extracts just the items under a given path.

(Alternative) Query content by path
If you’d rather not touch the nav tree, you can query pages by path and render your own list:
const { data: items } = await useAsyncData('dir', () =>
queryCollection('docs')
.where('path', 'LIKE', '/docs/platform/billing/%') // folder subtree
.select('title', 'path')
.order('title', 'ASC')
.all()
)

queryCollection() supports .where() and .path() to filter pages within a collection.

Extras:

• Set folder labels/icons with a .navigation.yml inside that folder (useful for breadcrumb/section headings).
• Control ordering with numeric prefixes (1.foo.md, 2.bar.md) at file/dir level.

This gives you a “Docs > Platform > Billing” breadcrumb and a clean directory-only listing on “Billing” without custom tree-surgery.