---
name: step-03-navigation
description: Define the complete navigation tree (routes, menus, breadcrumbs)
model: opus
---

# Step 03 — Navigation (Navigation Tree)

## Objective

Define the complete navigation tree for the application: routes, menus, breadcrumbs, and seedDataCore entries. This ensures consistent navigation across all modules.

## Prerequisites

- Step 01 (screens) and Step 02 (wireframes) completed
- screens.json exists for each module with sections and resources

## Execution

### 1. Load All Screens

Read screens.json for every module via ba-reader. Collect all sections and resources.

### 2. Build Navigation Tree

Build the navigation hierarchy following SmartStack conventions:

```
Application
  |-- Module 1
  |   |-- Section 1 (e.g., "Liste")
  |   |   |-- Resource 1 (e.g., "employees-grid")
  |   |-- Section 2 (e.g., "Fiche")
  |   |   |-- Resource 1 (e.g., "employee-form")
  |   |-- Section 3 (e.g., "Dashboard")
  |       |-- Resource 1 (e.g., "hr-dashboard")
  |-- Module 2
      |-- ...
```

### 3. Generate navigation.json

```json
{
  "application": {
    "code": "{AppCode}",
    "name": "{AppName}",
    "icon": "app-icon"
  },
  "modules": [
    {
      "code": "{ModuleCode}",
      "name": "{ModuleName}",
      "icon": "module-icon",
      "route": "/{app-code}/{module-code}",
      "permission": "{AppCode}.{ModuleCode}.Read",
      "sections": [
        {
          "code": "{sectionCode}",
          "label": "{sectionLabel}",
          "route": "/{app-code}/{module-code}/{section-code}",
          "icon": "section-icon",
          "resources": [
            {
              "code": "{resourceCode}",
              "type": "{SmartTable|SmartForm|SmartDashboard|SmartKanban}",
              "route": "/{app-code}/{module-code}/{section-code}/{resource-code}",
              "permission": "{AppCode}.{ModuleCode}.{Action}"
            }
          ]
        }
      ]
    }
  ],
  "menuItems": [
    {
      "label": "{ModuleName}",
      "icon": "module-icon",
      "route": "/{app-code}/{module-code}",
      "permission": "{AppCode}.{ModuleCode}.Read",
      "children": [
        {
          "label": "{sectionLabel}",
          "route": "/{app-code}/{module-code}/{section-code}",
          "permission": "{AppCode}.{ModuleCode}.Read"
        }
      ]
    }
  ],
  "breadcrumbs": {
    "/{app-code}/{module-code}/{section-code}": [
      { "label": "{AppName}", "route": "/{app-code}" },
      { "label": "{ModuleName}", "route": "/{app-code}/{module-code}" },
      { "label": "{sectionLabel}", "route": "" }
    ]
  }
}
```

### 4. Write navigation.json

Write via ba-writer at project level (alongside master index.json). Update index.json with navigation.json reference.

## Validation

- [ ] Every module in index.json has a corresponding navigation entry
- [ ] Every section in screens.json has a corresponding menu item
- [ ] Every route is unique
- [ ] Every menu item has a valid permission reference
- [ ] Breadcrumbs cover all routes

## Completion Summary

```
================================================================
  UI DESIGN COMPLETE
================================================================

| Module          | Sections | Resources | Wireframes |
|-----------------|----------|-----------|------------|
| {moduleCode}    | {count}  | {count}   | {count}    |
| ...             | ...      | ...       | ...        |

| Artifact        | Path                              |
|-----------------|-----------------------------------|
| screens.json    | {module-path}/screens.json        |
| navigation.json | {project-path}/navigation.json    |

NEXT STEPS:
1. Run /business-analyse-html to produce the interactive HTML with mockups
2. Client reviews the HTML (mockups, ERD, permission matrix)
3. Run /business-analyse-review to apply corrections
================================================================
```

## Status Update

After writing all screens and navigation, update the application status:
```javascript
ba-writer.updateStatus({feature_id}, "designed")
```
