Navigation

/**
 * Finds breadcrumb trail for given path in navigation tree
 * @param navigation - Navigation tree to search in
 * @param path - Path to find breadcrumbs for
 * @param options - Configuration options for breadcrumb generation
 * @returns Array of navigation items forming the breadcrumb trail
 */
function findPageBreadcrumb(
  navigation?: ContentNavigationItem[],
  path?: string,
  options?: FindPageBreadcrumbOptions
): ContentNavigationItem[];

interface FindPageBreadcrumbOptions {
  /** Include current page in breadcrumb trail */
  current?: boolean;
  /** Treat index pages as child pages */
  indexAsChild?: boolean;
}

import { findPageBreadcrumb } from '@nuxt/content/utils';

// Generate breadcrumb for current page
const navigation = await queryCollectionNavigation('docs');
const breadcrumb = findPageBreadcrumb(navigation, '/docs/guide/getting-started');

// Include current page in breadcrumb
const breadcrumbWithCurrent = findPageBreadcrumb(
  navigation, 
  '/docs/guide/getting-started',
  { current: true }
);

// Treat index pages as children
const breadcrumbWithIndex = findPageBreadcrumb(
  navigation,
  '/docs/guide/index',
  { indexAsChild: true }
);

/**
 * Finds child pages for given path in navigation tree
 * @param navigation - Navigation tree to search in
 * @param path - Parent path to find children for
 * @param options - Configuration options for child finding
 * @returns Array of child navigation items
 */
function findPageChildren(
  navigation?: ContentNavigationItem[],
  path?: string,
  options?: FindPageOptions
): ContentNavigationItem[];

interface FindPageOptions {
  /** Treat index pages as child pages */
  indexAsChild?: boolean;
}

import { findPageChildren } from '@nuxt/content/utils';

// Find children of a section
const navigation = await queryCollectionNavigation('docs');
const children = findPageChildren(navigation, '/docs/guide');

// Include index pages as children
const childrenWithIndex = findPageChildren(
  navigation,
  '/docs/guide',
  { indexAsChild: true }
);

/**
 * Finds sibling pages for given path in navigation tree
 * @param navigation - Navigation tree to search in
 * @param path - Path to find siblings for
 * @param options - Configuration options for sibling finding
 * @returns Array of sibling navigation items
 */
function findPageSiblings(
  navigation?: ContentNavigationItem[],
  path?: string,
  options?: FindPageOptions
): ContentNavigationItem[];

import { findPageSiblings } from '@nuxt/content/utils';

// Find sibling pages
const navigation = await queryCollectionNavigation('docs');
const siblings = findPageSiblings(navigation, '/docs/guide/installation');

// Include index pages as siblings
const siblingsWithIndex = findPageSiblings(
  navigation,
  '/docs/guide/installation',
  { indexAsChild: true }
);

/**
 * Finds headline/parent title for given path
 * @param navigation - Navigation tree to search in
 * @param path - Path to find headline for
 * @param options - Configuration options for headline finding
 * @returns Headline string or undefined if not found
 */
function findPageHeadline(
  navigation?: ContentNavigationItem[],
  path?: string,
  options?: FindPageOptions
): string | undefined;

import { findPageHeadline } from '@nuxt/content/utils';

// Find section headline for a page
const navigation = await queryCollectionNavigation('docs');
const headline = findPageHeadline(navigation, '/docs/guide/installation');
// Returns the title of the parent section, e.g., "Guide"

// Use with index pages
const headlineWithIndex = findPageHeadline(
  navigation,
  '/docs/guide/index',
  { indexAsChild: true }
);

<template>
  <nav>
    <!-- Breadcrumb -->
    <ol class="breadcrumb">
      <li v-for="item in breadcrumb" :key="item.path">
        <NuxtLink :to="item.path">{{ item.title }}</NuxtLink>
      </li>
    </ol>

    <!-- Current section headline -->
    <h1 v-if="headline">{{ headline }}</h1>

    <!-- Navigation sidebar -->
    <aside>
      <ul>
        <li v-for="child in children" :key="child.path">
          <NuxtLink :to="child.path">{{ child.title }}</NuxtLink>
        </li>
      </ul>
    </aside>

    <!-- Previous/Next navigation -->
    <div class="pagination">
      <NuxtLink v-if="siblings.length" :to="previousSibling?.path">
        Previous: {{ previousSibling?.title }}
      </NuxtLink>
      <NuxtLink v-if="siblings.length" :to="nextSibling?.path">
        Next: {{ nextSibling?.title }}
      </NuxtLink>
    </div>
  </nav>
</template>

<script setup>
import { findPageBreadcrumb, findPageChildren, findPageSiblings, findPageHeadline } from '@nuxt/content/utils';

const route = useRoute();
const navigation = await queryCollectionNavigation('docs');

const breadcrumb = findPageBreadcrumb(navigation, route.path);
const children = findPageChildren(navigation, route.path);
const siblings = findPageSiblings(navigation, route.path);
const headline = findPageHeadline(navigation, route.path);

// Find previous and next siblings
const currentIndex = siblings.findIndex(item => item.path === route.path);
const previousSibling = currentIndex > 0 ? siblings[currentIndex - 1] : null;
const nextSibling = currentIndex < siblings.length - 1 ? siblings[currentIndex + 1] : null;
</script>

<template>
  <ul class="navigation-tree">
    <li v-for="item in navigation" :key="item.path" class="nav-item">
      <NuxtLink 
        :to="item.path" 
        :class="{ active: isActive(item.path) }"
      >
        {{ item.title }}
      </NuxtLink>
      
      <!-- Recursive children -->
      <NavigationTree 
        v-if="item.children?.length" 
        :navigation="item.children"
        class="nav-children"
      />
    </li>
  </ul>
</template>

<script setup>
interface Props {
  navigation: ContentNavigationItem[];
}

const props = defineProps<Props>();
const route = useRoute();

const isActive = (path: string) => {
  return route.path === path || route.path.startsWith(path + '/');
};
</script>

interface ContentNavigationItem {
  /** Display title for navigation item */
  title: string;
  /** URL path for navigation item */
  path: string;
  /** File stem (filename without extension) */
  stem?: string;
  /** Child navigation items */
  children?: ContentNavigationItem[];
  /** Whether this is a page (true) or directory (false) */
  page?: boolean;
  /** Additional custom fields from content frontmatter */
  [key: string]: unknown;
}

interface FindPageBreadcrumbOptions {
  /** Include current page in breadcrumb trail */
  current?: boolean;
  /** Treat index pages as child pages */
  indexAsChild?: boolean;
}

interface FindPageOptions {
  /** Treat index pages as child pages */
  indexAsChild?: boolean;
}