> ## Documentation Index
> Fetch the complete documentation index at: https://docs.agentictrust.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Navigation

> Upload a routes.csv file so the agent knows your site's page structure and can direct users to the right pages.

The navigation feature gives the agent awareness of your site's page structure. When a user asks "Where can I change my billing info?" the agent can point them to the exact page instead of giving a generic answer.

## How it works

1. You generate a `routes.csv` file describing your application's pages.
2. You upload the CSV in the dashboard.
3. The agent receives the route structure as context and references specific pages when guiding users.

## Downloads

<CardGroup cols={3}>
  <Card title="routes-template.csv" icon="file-csv" href="/downloads/routes-template.csv">
    Starter CSV template. Fill in your pages and upload.
  </Card>

  <Card title="AI skill (file)" icon="robot" href="/downloads/build-routes-skill.md">
    Download the skill for Cursor, Codex, or any AI editor.
  </Card>

  <Card title="Install in Cursor" icon="arrow-pointer" href="https://cursor.com/link/command?name=build-routes&text=Build+a+routes.csv+file+for+this+application+by+discovering+all+navigable+routes.%0A%0AScan+the+codebase+for+route+definitions%3A%0A-+Next.js+App+Router%3A+app%2F%2A%2A%2Fpage.tsx+directories%0A-+React+Router%3A+createBrowserRouter%2C+Route+path+configs%0A-+Vue+Router%3A+routes+arrays+in+router+configs%0A-+Angular%3A+RouterModule.forRoot%2C+Routes+arrays%0A-+Any+URL+path+patterns+in+the+codebase%0A-+If+the+app+is+running%2C+explore+navigation+in+the+browser%0A%0AOutput+CSV+with+header%3A+name%2Cpath%2Cdescription%2Cparameters%0A-+name%3A+unique+snake_case+identifier+%28e.g.+settings_billing%2C+user_detail%29%0A-+path%3A+URL+path+with+%3AparamName+for+dynamic+segments%0A-+description%3A+one-line+summary+of+what+the+page+shows+or+does%0A-+parameters%3A+semicolon-separated+paramName%3Atype+pairs%3B+empty+for+static+routes%0A%0AExample%3A%0Aname%2Cpath%2Cdescription%2Cparameters%0Adashboard%2C%2Fdashboard%2CMain+dashboard+overview%2C%0Auser_detail%2C%2Fusers%2F%3AuserId%2CIndividual+user+profile%2CuserId%3Astring%0Asettings_billing%2C%2Fsettings%2Fbilling%2CBilling+and+subscription+management%2C%0A%0AOrganization%3A+dashboard%2Fhome+pages+first%2C+feature+pages+next%2C+settings%2Fadmin+last.%0ADeduplicate%2C+remove+stale+entries%2C+validate+unique+names%2C+paths+start+with+%2F%2C+params+match+placeholders.%0AWrite+the+result+to+routes.csv+in+the+project+root.">
    One-click install as a reusable Cursor command.
  </Card>
</CardGroup>

## Adding navigation routes

<Steps>
  <Step title="Generate your routes.csv">
    Create a `routes.csv` file following the format below. You can:

    * **One-click with Cursor** — [install the build-routes command](https://cursor.com/link/command?name=build-routes\&text=Build+a+routes.csv+file+for+this+application+by+discovering+all+navigable+routes.%0A%0AScan+the+codebase+for+route+definitions%3A%0A-+Next.js+App+Router%3A+app%2F%2A%2A%2Fpage.tsx+directories%0A-+React+Router%3A+createBrowserRouter%2C+Route+path+configs%0A-+Vue+Router%3A+routes+arrays+in+router+configs%0A-+Angular%3A+RouterModule.forRoot%2C+Routes+arrays%0A-+Any+URL+path+patterns+in+the+codebase%0A-+If+the+app+is+running%2C+explore+navigation+in+the+browser%0A%0AOutput+CSV+with+header%3A+name%2Cpath%2Cdescription%2Cparameters%0A-+name%3A+unique+snake_case+identifier+%28e.g.+settings_billing%2C+user_detail%29%0A-+path%3A+URL+path+with+%3AparamName+for+dynamic+segments%0A-+description%3A+one-line+summary+of+what+the+page+shows+or+does%0A-+parameters%3A+semicolon-separated+paramName%3Atype+pairs%3B+empty+for+static+routes%0A%0AExample%3A%0Aname%2Cpath%2Cdescription%2Cparameters%0Adashboard%2C%2Fdashboard%2CMain+dashboard+overview%2C%0Auser_detail%2C%2Fusers%2F%3AuserId%2CIndividual+user+profile%2CuserId%3Astring%0Asettings_billing%2C%2Fsettings%2Fbilling%2CBilling+and+subscription+management%2C%0A%0AOrganization%3A+dashboard%2Fhome+pages+first%2C+feature+pages+next%2C+settings%2Fadmin+last.%0ADeduplicate%2C+remove+stale+entries%2C+validate+unique+names%2C+paths+start+with+%2F%2C+params+match+placeholders.%0AWrite+the+result+to+routes.csv+in+the+project+root.) and let the AI generate it from your codebase.
    * **Start from the template** — download the [routes-template.csv](/downloads/routes-template.csv) and fill in your own pages.
    * **Use the AI skill** — download the [build-routes skill](/downloads/build-routes-skill.md) for any AI coding editor.
    * **Build manually** — follow the format specification and examples below.
  </Step>

  <Step title="Upload in the dashboard">
    Navigate to **Navigation** in the dashboard sidebar and upload your `routes.csv` file.
  </Step>

  <Step title="The agent uses it automatically">
    The navigation context is included in the agent's system prompt. No additional configuration needed.
  </Step>
</Steps>

## CSV format

The `routes.csv` file uses four columns:

```csv theme={null}
name,path,description,parameters
dashboard_home,/dashboard,Main dashboard with project overview,
settings_general,/settings,Account and project settings,
settings_billing,/settings/billing,Billing and subscription management,
user_detail,/users/:userId,Individual user profile and account info,userId:string
```

| Column        | Description                                                                                                     |
| ------------- | --------------------------------------------------------------------------------------------------------------- |
| `name`        | A unique snake\_case identifier for the route (e.g. `settings_billing`, `user_detail`)                          |
| `path`        | The URL path. Use `:paramName` for dynamic segments (e.g. `/users/:userId`)                                     |
| `description` | A short plain-English summary of what the page shows or does                                                    |
| `parameters`  | Dynamic parameter definitions as `paramName:type` pairs, separated by semicolons. Leave empty for static routes |

### Formatting rules

* The first row must be the header: `name,path,description,parameters`
* Every `name` must be unique across the file
* Every `path` must start with `/`
* Dynamic segments in `path` must use `:paramName` syntax and have a matching entry in `parameters`
* Only quote fields if they contain a comma
* Group related routes together for readability

## Generating routes from your codebase

You can extract routes from common frontend frameworks:

<AccordionGroup>
  <Accordion title="Next.js (App Router)">
    Each directory under `app/` with a `page.tsx` maps to a route. Dynamic segments use `[paramName]` folders.

    ```
    app/
    ├── dashboard/page.tsx        → /dashboard
    ├── settings/page.tsx         → /settings
    ├── settings/billing/page.tsx → /settings/billing
    └── users/[userId]/page.tsx   → /users/:userId
    ```

    Convert bracket syntax to colon syntax: `[userId]` becomes `:userId`.
  </Accordion>

  <Accordion title="React Router">
    Search your router configuration for `path` properties:

    ```jsx theme={null}
    createBrowserRouter([
      { path: "/dashboard", element: <Dashboard /> },
      { path: "/users/:userId", element: <UserDetail /> },
    ]);
    ```

    Each `path` value maps directly to a row in the CSV.
  </Accordion>

  <Accordion title="Vue / Angular">
    Look for route arrays in your router config. Vue uses `path` in `routes: [...]`, Angular uses `RouterModule.forRoot(...)`. The path format is the same.
  </Accordion>

  <Accordion title="Manual discovery">
    Navigate your application and record each page's URL. Replace dynamic values (IDs, slugs) with `:paramName` placeholders. Check your sidebar, navbar, tabs, and settings pages for the full list.
  </Accordion>
</AccordionGroup>

## Examples

A small application with a dashboard, settings, and user management:

```csv theme={null}
name,path,description,parameters
dashboard,/dashboard,Main dashboard with project overview,
dashboard_analytics,/dashboard/analytics,Usage analytics and charts,
settings_general,/settings,General account settings,
settings_billing,/settings/billing,Billing and subscription management,
settings_api_keys,/settings/api-keys,API key management and rotation,
users,/users,User listing and search,
user_detail,/users/:userId,Individual user profile and account info,userId:string
user_permissions,/users/:userId/permissions,User role and permission management,userId:string
help,/help,Help center and documentation,
help_getting_started,/help/getting-started,Getting started guide for new users,
```

A larger application with nested routes and multiple parameter types:

```csv theme={null}
name,path,description,parameters
workspaces,/workspaces,Workspace listing and management,
test_cases,/td/:workspaceId/cases,Test case listing and management,workspaceId:string
test_case_detail,/td/cases/:testCaseId,Individual test case detail and steps,testCaseId:string
environments,/td/:workspaceId/environments,Environment listing and management,workspaceId:string
```

<Tip>
  Write descriptions that match how users ask about each page. "Billing and subscription management" is better than just "Billing" because it helps the agent match user intent more accurately.
</Tip>

## Auto-generate with AI

Let your AI coding agent scan your codebase and produce the `routes.csv` for you.

<Tabs>
  <Tab title="Cursor (one-click)">
    Click the link below to install `build-routes` as a reusable command in Cursor. You'll be asked to review the command before it's saved.

    <a href="https://cursor.com/link/command?name=build-routes&text=Build+a+routes.csv+file+for+this+application+by+discovering+all+navigable+routes.%0A%0AScan+the+codebase+for+route+definitions%3A%0A-+Next.js+App+Router%3A+app%2F%2A%2A%2Fpage.tsx+directories%0A-+React+Router%3A+createBrowserRouter%2C+Route+path+configs%0A-+Vue+Router%3A+routes+arrays+in+router+configs%0A-+Angular%3A+RouterModule.forRoot%2C+Routes+arrays%0A-+Any+URL+path+patterns+in+the+codebase%0A-+If+the+app+is+running%2C+explore+navigation+in+the+browser%0A%0AOutput+CSV+with+header%3A+name%2Cpath%2Cdescription%2Cparameters%0A-+name%3A+unique+snake_case+identifier+%28e.g.+settings_billing%2C+user_detail%29%0A-+path%3A+URL+path+with+%3AparamName+for+dynamic+segments%0A-+description%3A+one-line+summary+of+what+the+page+shows+or+does%0A-+parameters%3A+semicolon-separated+paramName%3Atype+pairs%3B+empty+for+static+routes%0A%0AExample%3A%0Aname%2Cpath%2Cdescription%2Cparameters%0Adashboard%2C%2Fdashboard%2CMain+dashboard+overview%2C%0Auser_detail%2C%2Fusers%2F%3AuserId%2CIndividual+user+profile%2CuserId%3Astring%0Asettings_billing%2C%2Fsettings%2Fbilling%2CBilling+and+subscription+management%2C%0A%0AOrganization%3A+dashboard%2Fhome+pages+first%2C+feature+pages+next%2C+settings%2Fadmin+last.%0ADeduplicate%2C+remove+stale+entries%2C+validate+unique+names%2C+paths+start+with+%2F%2C+params+match+placeholders.%0AWrite+the+result+to+routes.csv+in+the+project+root.">**Install build-routes command in Cursor**</a>

    Once installed, run the command from Cursor's command palette anytime you need to regenerate routes.
  </Tab>

  <Tab title="Cursor (quick prompt)">
    Open Cursor chat and click this link to pre-fill a one-shot prompt:

    <a href="https://cursor.com/link/prompt?text=Build+a+routes.csv+for+my+app.+Scan+the+codebase+for+all+route+definitions+%28Next.js+pages%2C+React+Router%2C+Vue%2FAngular+routers%29.+Output+CSV%3A+name+%28snake_case%29%2C+path+%28with+%3Aparam+placeholders%29%2C+description+%28one-line%29%2C+parameters+%28paramName%3Atype%29.+Group+by+dashboard%2C+features%2C+settings.+Write+to+routes.csv.">**Open build-routes prompt in Cursor**</a>
  </Tab>

  <Tab title="Any AI editor">
    1. Download the [build-routes skill](/downloads/build-routes-skill.md)
    2. Save it to your project:
       * **Cursor**: `.cursor/skills/build-routes/SKILL.md`
       * **Codex**: `.codex/skills/build-routes/SKILL.md`
       * **Generic**: `.agents/skills/build-routes/SKILL.md`
    3. Ask your AI agent: **"Build a routes.csv for my app"**
  </Tab>
</Tabs>

The agent scans your source code for route definitions (Next.js pages, React Router configs, Vue/Angular routers), explores the live app if it's running, and produces a properly formatted CSV ready to upload.

## When to use navigation

Navigation is most useful when:

* Your product has many pages and users frequently ask "where do I find X?"
* You want the agent to link directly to relevant pages in its answers
* Your site structure changes and you want the agent to stay current

<Note>
  Navigation routes are processed and stored per project. Re-upload your `routes.csv` whenever your site structure changes.
</Note>