# Blog Frontend Navigation

**Last Updated:** 2026-01-09

Documentation of navigation structure, user flows, and breadcrumb patterns for the blog.

## Overview

This document maps navigation paths, breadcrumb structures, related posts logic, pagination, and user journey flows through the blog.

## Navigation Structure

### Main Navigation Paths

```
Home (/)
    └── Blog Index (/insights/)
            ├── Lexikon Archive (/insights/lexikon/)
            │   └── Lexikon Post (/insights/lexikon/{slug}/)
            ├── Ratgeber Archive (/insights/ratgeber/)
            │   └── Ratgeber Post (/insights/ratgeber/{slug}/)
            └── Inside Ordio Archive (/insights/inside-ordio/)
                └── Inside Ordio Post (/insights/inside-ordio/{slug}/)
```

### Header Navigation

**Structure**:

- Home Link
- Blog/Insights Link
- Category Links (Lexikon, Ratgeber, Inside Ordio)
- Main Site Navigation

**Behavior**:

- Persistent across all pages
- Active state highlighting
- Mobile-responsive collapse

### Category Navigation

**Location**: Blog index and category archive pages

**Structure**:

```
Category Filters
├── All Posts (index only)
├── Lexikon
├── Ratgeber
└── Inside Ordio
```

**Behavior**:

- Filter posts by category
- Active category highlighting
- URL updates on filter

## Breadcrumb Structure

### Breadcrumb Pattern

**Format**: Home → Category → Post

**Examples**:

1. **Blog Index**:

   ```
   Home → Ordio Insights
   ```

2. **Category Archive**:

   ```
   Home → Lexikon
   ```

3. **Single Post**:
   ```
   Home → Finanzbuchhaltung für Arbeitgeber: Ein Leitfaden
   ```

### Breadcrumb Schema

**Schema Type**: `BreadcrumbList`

**Structure**:

```json
{
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://www.ordio.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Category/Post Name"
    }
  ]
}
```

## Related Posts Logic

### Related Posts Display

**Location**: Single post pages

**Count**: 14 related posts displayed

**Logic** (inferred):

- Same category posts
- Similar topics/keywords
- Recent posts
- Popular posts

**Display**:

- Post card grid
- Below main content
- Above footer

## Pagination Structure

### Pagination Pattern

**Location**: Index and archive pages

**Structure**:

```
[Previous] [1] [2] [3] ... [Next]
```

**Behavior**:

- Previous/Next links (when applicable)
- Page numbers
- Current page highlighting
- Ellipsis for page gaps

**URL Pattern**:

- Page 1: `/insights/` (no page parameter)
- Page 2+: `/insights/page/2/`

## User Journey Flows

### Flow 1: Browse All Posts

```
Home
  → Blog Index (/insights/)
    → View Post Cards
    → Click Post
      → Single Post Page
        → Read Content
        → View Related Posts
          → Click Related Post
            → Another Single Post
```

### Flow 2: Browse by Category

```
Home
  → Blog Index (/insights/)
    → Click Category (Lexikon)
      → Category Archive (/insights/lexikon/)
        → View Category Posts
        → Click Post
          → Single Post Page
```

### Flow 3: Direct Post Access

```
Search/External Link
  → Single Post Page
    → Read Content
    → Click Category Link
      → Category Archive
    → Click Related Post
      → Another Single Post
```

## Internal Linking Patterns

### In-Content Links

**Patterns**:

- Links to related posts
- Links to category archives
- Links to other site pages
- External links

### Navigation Links

**Patterns**:

- Header navigation
- Category filters
- Breadcrumbs
- Related posts
- Pagination

## Migration Considerations

### Navigation Requirements

1. **Header Navigation**

   - Persistent navigation component
   - Active state management
   - Mobile responsiveness

2. **Category Navigation**

   - Category filter component
   - URL routing
   - Active state highlighting

3. **Breadcrumbs**

   - Breadcrumb component
   - Schema markup
   - Dynamic generation

4. **Related Posts**

   - Relationship logic
   - Post card component
   - Limit/ordering

5. **Pagination**
   - Page number generation
   - URL structure
   - Previous/Next logic

### URL Structure Preservation

- **Maintain current URLs** for SEO
- **301 redirects** for any changes
- **Canonical URLs** to prevent duplicates

## Data Files

- **Frontend Structure**: `docs/data/blog-frontend-structure.json`
- **Internal Links**: `docs/data/blog-internal-links.json`
- **Content Relationships**: `docs/data/blog-content-relationships.json`

## Related Documentation

- [Frontend Page Types](FRONTEND_PAGE_TYPES.md) - Page type inventory
- [Frontend Layouts](FRONTEND_LAYOUTS.md) - Layout structure
- [Frontend Components](FRONTEND_COMPONENTS.md) - Component inventory
- [Internal Linking Analysis](INTERNAL_LINKING_ANALYSIS.md) - Current linking patterns