navigation-architecture

# Navigation Architecture

Guidance for designing menu systems, breadcrumbs, and navigation APIs for headless CMS architectures.

## When to Use This Skill

- Designing primary/secondary navigation
- Implementing breadcrumb trails
- Building mega-menu structures
- Creating mobile navigation patterns
- Designing navigation APIs

## Menu Types

### Primary Navigation

Main site navigation, typically in header.

```csharp
public class Menu
{
    public Guid Id { get; set; }
    public string Name { get; set; } = string.Empty;
    public string Slug { get; set; } = string.Empty;
    public MenuLocation Location { get; set; }
    public List<MenuItem> Items { get; set; } = new();
}

public class MenuItem
{
    public Guid Id { get; set; }
    public string Label { get; set; } = string.Empty;

    // Link target (one of these)
    public Guid? PageId { get; set; }
    public string? ExternalUrl { get; set; }
    public string? Anchor { get; set; }

    // Computed URL
    public string Url { get; set; } = string.Empty;

    // Hierarchy
    public Guid? ParentId { get; set; }
    public List<MenuItem> Children { get; set; } = new();
    public int Order { get; set; }

    // Display options
    public bool OpenInNewTab { get; set; }
    public string? Icon { get; set; }
    public string? CssClass { get; set; }
}

public enum MenuLocation
{
    Primary,
    Secondary,
    Footer,
    Sidebar,
    Utility,
    Mobile
}
```

### Mega Menu

Complex navigation with multiple columns and featured content.

```csharp
public class MegaMenuItem : MenuItem
{
    // Mega menu specific
    public bool IsMegaMenu { get; set; }
    public int Columns { get; set; } = 4;

    // Featured content
    public Guid? FeaturedContentId { get; set; }
    public string? FeaturedImageUrl { get; set; }
    public string? Description { get; set; }

    // Column groups
    public List<MenuColumn> MenuColumns { get; set; } = new();
}

public class MenuColumn
{
    public string? Heading { get; set;