MainNav

The MainNav component provides horizontal desktop navigation.

Usage

Copy<script setup lang="ts">
import { MainNav } from '@/components/MainNav'

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

<template>
  <MainNav :items="items" />
</template>

Features

• Horizontal layout for desktop
• Active state highlighting
• Hover effects
• Responsive (hidden on mobile)

API Reference

MainNav

Styling

• Active link uses text-primary
• Inactive links use text-muted-foreground
• Hover effect with hover:text-primary
• Ghost button variant

Configuration

Typically uses MAIN_NAVIGATION from app/lib/navigation.ts:

Copyexport const MAIN_NAVIGATION = [
  { href: "/docs", name: "Docs" },
]