---
name: navigation-section-add
description: Adds a new navigation section (label + first button) to the sidebar on all pages. Use when the user asks to create a new section like "Pending POs", add a section header to navigation, or group pages under a new category separate from "Sales".
---

# Navigation Section Addition

Adds a new **section** to the left-side navigation container on **all pages**. A section consists of a bold Text label (e.g. "Pending POs") followed by one or more page buttons. This skill covers adding the section label and first button; additional buttons follow the **navigation-button-add** skill.

## Current Sections

| Section | Label widget | Buttons | Row range |
|---------|-------------|---------|-----------|
| Sales | `Text1` | `Button1`, `Button1Copy`, `Button1Copy2` | 0-16 |
| Pending POs | `Text2` | `Button2` | 18-26 |

## Instructions

### 1. Determine row placement

Sections are separated by a **2-row gap**. Find the last widget's `bottomRow` in the current navigation, add 2 for the gap, then place:
- **Section label** (Text widget): 4 rows (e.g. topRow 18, bottomRow 22)
- **First button**: 4 rows immediately after (e.g. topRow 22, bottomRow 26)

### 2. Choose widget names

Follow the naming sequence based on existing sections:
- First section: `Text1`, `Button1` / `Button1Copy` / `Button1Copy2`
- Second section: `Text2`, `Button2` / `Button2Copy` / ...
- Third section: `Text3`, `Button3` / `Button3Copy` / ...

### 3. Create the Text label widget on ALL pages

Add a `Text<N>.json` file in `pages/<each page>/widgets/Container1/` with:

```json
{
  "animateLoading": true,
  "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
  "bottomRow": <calculated>,
  "dynamicBindingPathList": [
    {"key": "truncateButtonColor"},
    {"key": "fontFamily"},
    {"key": "borderRadius"}
  ],
  "dynamicHeight": "AUTO_HEIGHT",
  "dynamicTriggerPathList": [],
  "fontFamily": "{{appsmith.theme.fontFamily.appFont}}",
  "fontSize": "1rem",
  "fontStyle": "BOLD",
  "isLoading": false,
  "isVisible": true,
  "key": "<unique-key>",
  "leftColumn": 0,
  "maxDynamicHeight": 9000,
  "minDynamicHeight": 4,
  "minWidth": 450,
  "mobileBottomRow": <calculated>,
  "mobileLeftColumn": 10,
  "mobileRightColumn": 26,
  "mobileTopRow": <calculated>,
  "needsErrorInfo": false,
  "originalBottomRow": <calculated>,
  "originalTopRow": <calculated>,
  "overflow": "NONE",
  "parentColumnSpace": 3.841796875,
  "parentId": "<Canvas widgetId from Container1.json>",
  "parentRowSpace": 10,
  "renderMode": "CANVAS",
  "responsiveBehavior": "fill",
  "rightColumn": 64,
  "shouldTruncate": false,
  "text": "<Section Name>",
  "textAlign": "LEFT",
  "textColor": "#231F20",
  "topRow": <calculated>,
  "truncateButtonColor": "{{appsmith.theme.colors.primaryColor}}",
  "type": "TEXT_WIDGET",
  "version": 1,
  "widgetId": "<unique per page>",
  "widgetName": "Text<N>"
}
```

### 4. Create the first button on ALL pages

Follow the **navigation-button-add** skill to add `Button<N>.json`. Key points:
- On the page the button navigates to: `buttonColor` = `{{appsmith.theme.colors.backgroundColor}}` (highlighted), with `dynamicBindingPathList: [{"key": "buttonColor"}]`.
- On all other pages: `buttonColor` = `#ffffff` (inactive), with empty `dynamicBindingPathList`.
- `topRow` = label's `bottomRow`, `bottomRow` = topRow + 4.

### 5. parentId -- CRITICAL

Each page's Container1 has a **different Canvas widget ID**. The `parentId` for all nav widgets must match the `widgetId` of the `CANVAS_WIDGET` child inside that page's `Container1.json`.

**Always read** `pages/<PageName>/widgets/Container1/Container1.json` to find the Canvas `widgetId` before creating widgets. Do NOT copy parentId from another page.

Example Canvas widget IDs (verify these are still current):
- Sales - Capacity Planning: `x3pc17vp6q`
- Sales - Units Shipped: `wj6fxg5wpg`
- Sales - Units Ordered: `wj6fxg5wpg`

### 6. Widget IDs -- must be unique

Every widget across all pages must have a **unique `widgetId`**. Use a short, unique string per widget per page. A practical pattern: `<page-prefix><widget-abbrev>` (e.g. `cp1txtpndpo` for Capacity Planning's "Pending POs" text label).

### 7. Apply to ALL pages

The section label and button must appear on **every page in the app** -- not just pages within the new section. This ensures the full navigation is visible regardless of which page the user is on.

## Example: Adding "Pending POs" section

Files created on each page's `widgets/Container1/`:
- `Text2.json` -- "Pending POs" label, topRow 18, bottomRow 22
- `Button2.json` -- "SLx Pending" button, topRow 22, bottomRow 26

On `Pending POs - SLx Pending` page: Button2 is highlighted.
On all Sales pages: Button2 is white/inactive.

## Reference

- Button styling and highlight pattern: **navigation-button-add** skill.
- Creating the page itself: **create-new-page** skill.
- Row layout: 4 rows per widget, 2-row gap between sections.