MobileNav

The MobileNav component provides a mobile-friendly navigation menu with a hamburger button and full-screen overlay.

Usage

Copy<script setup lang="ts">
import { MobileNav } from '@/components/MobileNav'
import type { ContentNavigationItem } from '@nuxt/content'

const tree: ContentNavigationItem[] = [
  {
    title: "Docs",
    children: [
      {
        title: "Getting Started",
        children: [
          {
            title: "Introduction",
            path: "/docs/getting-started/introduction",
          },
        ],
      },
    ],
  },
]

const items = [
  { href: "/docs", name: "Docs" },
]
</script>

<template>
  <MobileNav :tree="tree" :items="items" />
</template>

Features

Hamburger Menu

• Animated hamburger icon
• Transforms to X when open
• Touch-friendly target size

Navigation Sections

Displays three sections:

1. Main Links: Home and top-level navigation
2. Sections: Section pills from NAV_SECTIONS
3. Content Tree: Auto-generated from content structure

Full-Screen Overlay

• Full viewport height and width
• Backdrop blur effect
• Scrollable content
• Large, touch-friendly links

API Reference

MobileNav

Styling

• Large text sizes (text-2xl) for readability
• Generous spacing (gap-12, gap-4, gap-3)
• Section labels with muted foreground
• Icon support for navigation items

Configuration

Uses NAV_SECTIONS from app/lib/navigation.ts and respects showMcpDocs flag for filtering.