appsmith-statistics-app/.cursor/skills/navigation-section-add/SKILL.md

name, description

name	description
navigation-section-add	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:

{
  "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.