---
name: navigation-button-add
description: Implements a new navigation button with the existing highlight/default colors. Use when the user asks to add buttons to the nav block, mentions page navigation, or instructs to keep the highlight behavior consistent with the latest change.
---

# Navigation Button Addition

## Instructions

1. **Understand the current navigation canvas** by checking `pages/*/widgets/Container1/`. Each page reuses the same container structure. The navigation is organized into **sections**, each with a Text label and one or more buttons:
   - **Sales** section: `Text1` (label), `Button1` (Capacity Planning), `Button1Copy` (Units Shipped), `Button1Copy2` (Units Ordered)
   - **Pending POs** section: `Text2` (label), `Button2` (SLx Pending)
   - Future sections follow the same pattern (`Text3`/`Button3`, etc.)
2. **Follow the established color scheme**:
   - The highlighted button (current page) uses `appsmith.theme.colors.backgroundColor`.
   - The inactive buttons use `#ffffff`.
3. **When adding a new navigation button**:
   - Copy one of the existing `Button*` definitions, adjusting `text`, `onClick`, `widgetId`, `widgetName`, `topRow`, `bottomRow`, and any other placement metadata so it fits below the existing items in its section.
   - Set `buttonColor` to `#ffffff` (inactive) unless the button is on its own page; then set its definition to `appsmith.theme.colors.backgroundColor` with `dynamicBindingPathList: [{"key": "buttonColor"}]`.
   - Ensure `dynamicBindingPathList` stays empty when `buttonColor` is static white.
   - Point `onClick` to `navigateTo('<Page Name>', {}, 'SAME_WINDOW')` and keep `placement`/`responsiveBehavior` matching other nav buttons.
   - Set `parentId` to the **Canvas widget ID** inside that page's `Container1.json` (the `widgetId` of the `CANVAS_WIDGET` child). This varies per page -- always read `Container1.json` to find the correct value.
4. **Add the button on ALL pages** (not just pages in the same section). Every page gets the full navigation.
5. **If adding a button to a new section**, follow the **navigation-section-add** skill first to create the section label.
6. **Run git status/diff** to verify only the intended files changed before reporting back.

## Row Layout

Each widget occupies 4 rows. Sections are separated by a 2-row gap:

| Widget | topRow | bottomRow |
|--------|--------|-----------|
| Text1 "Sales" | 0 | 4 |
| Button1 "Capacity Planning" | 4 | 8 |
| Button1Copy "Units Shipped" | 8 | 12 |
| Button1Copy2 "Units Ordered" | 12 | 16 |
| *(2-row gap)* | 16 | 18 |
| Text2 "Pending POs" | 18 | 22 |
| Button2 "SLx Pending" | 22 | 26 |

When adding a new button within a section, increment from the last button's `bottomRow` by 4. When adding a new section after the last one, add 2 rows gap, then 4 for the label, then 4 for each button.

## Examples

- *Adding "Units Ordered" button to Sales section*:
  1. Copy `Button1Copy` (Units Shipped) in each page's `Container1`.
  2. Set `text` to "Units Ordered", `onClick` to `navigateTo('Sales - Units Ordered', {}, 'SAME_WINDOW');`.
  3. Assign `buttonColor` to `#ffffff` for inactive cases and to `appsmith.theme.colors.backgroundColor` inside the `Sales - Units Ordered` page definition for highlight.
  4. Set `topRow: 12`, `bottomRow: 16` (next slot after Units Shipped).

- *Adding a second button to Pending POs section*:
  1. Create `Button2Copy.json` in each page's `Container1`.
  2. Set `topRow: 26`, `bottomRow: 30` (next slot after SLx Pending at 22-26).
  3. Follow the same highlight/inactive pattern.