{
  "_copyright": "Copyright (c) 2026, Salesforce, Inc., All rights reserved. For full license text, see the LICENSE.txt file",
  "$schema": "https://slds.lightningdesignsystem.com/schemas/uif-system.v1.json",
  "apiVersion": "1.0.0",
  "name": "GlobalNavigation",
  "description": "Horizontal context bar that anchors the top of a Salesforce application, exposing the app launcher, app name, object switcher, primary navigation items, and an optional tabset of pinnable, closable, status-bearing tabs.",
  "extensions": {
    "com.salesforce-ux": {
      "genReady": false
    }
  },
  "cssSource": "./globalNavigation.css",
  "styleApi": {
    "status": "stable",
    "ready": true
  },
  "structure": {
    "name": "globalNavigation",
    "restrict": [
      "div"
    ],
    "description": "Root context bar wrapper that lays out the primary, secondary, and tertiary zones.",
    "attributes": {
      "static": {
        "class": "slds-context-bar"
      }
    },
    "variants": [
      {
        "name": "layout",
        "description": "Mutually exclusive layout treatment of the context bar.",
        "options": [
          {
            "value": "default",
            "class": "slds-context-bar",
            "description": "Standard navigation bar layout with primary and secondary zones."
          },
          {
            "value": "tabs",
            "class": "slds-context-bar slds-context-bar_tabs",
            "description": "Tabset layout where the secondary zone hosts a row of pinnable, closable tabs."
          }
        ]
      }
    ],
    "children": [
      {
        "name": "primary",
        "restrict": [
          "div"
        ],
        "description": "Primary zone hosting the app launcher, app name, and (in tabs layout) the object switcher and new-tab control.",
        "attributes": {
          "static": {
            "class": "slds-context-bar__primary"
          }
        },
        "children": [
          {
            "name": "appLauncherItem",
            "restrict": [
              "div"
            ],
            "description": "Context bar item that wraps the app launcher waffle and the app name. Carries slds-no-hover so the item does not show hover paint.",
            "attributes": {
              "static": {
                "class": "slds-context-bar__item slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_click slds-no-hover"
              }
            },
            "children": [
              {
                "name": "appLauncherAction",
                "restrict": [
                  "div"
                ],
                "description": "Icon-action container around the waffle button.",
                "attributes": {
                  "static": {
                    "class": "slds-context-bar__icon-action"
                  }
                },
                "children": [
                  {
                    "name": "waffleButton",
                    "restrict": [
                      "button"
                    ],
                    "description": "Button that opens the app launcher; renders the 9-dot waffle glyph.",
                    "attributes": {
                      "static": {
                        "class": "slds-button slds-icon-waffle_container slds-context-bar__button"
                      }
                    },
                    "children": [
                      {
                        "name": "waffle",
                        "restrict": [
                          "span"
                        ],
                        "description": "Waffle glyph composed of nine animated dots.",
                        "attributes": {
                          "static": {
                            "class": "slds-icon-waffle"
                          }
                        },
                        "children": [
                          {
                            "name": "waffleDot1",
                            "restrict": [
                              "span"
                            ],
                            "description": "First waffle dot (top-start).",
                            "attributes": {
                              "static": {
                                "class": "slds-r1"
                              }
                            }
                          },
                          {
                            "name": "waffleDot2",
                            "restrict": [
                              "span"
                            ],
                            "description": "Second waffle dot (top-center).",
                            "attributes": {
                              "static": {
                                "class": "slds-r2"
                              }
                            }
                          },
                          {
                            "name": "waffleDot3",
                            "restrict": [
                              "span"
                            ],
                            "description": "Third waffle dot (top-end).",
                            "attributes": {
                              "static": {
                                "class": "slds-r3"
                              }
                            }
                          },
                          {
                            "name": "waffleDot4",
                            "restrict": [
                              "span"
                            ],
                            "description": "Fourth waffle dot (middle-start).",
                            "attributes": {
                              "static": {
                                "class": "slds-r4"
                              }
                            }
                          },
                          {
                            "name": "waffleDot5",
                            "restrict": [
                              "span"
                            ],
                            "description": "Fifth waffle dot (middle-center).",
                            "attributes": {
                              "static": {
                                "class": "slds-r5"
                              }
                            }
                          },
                          {
                            "name": "waffleDot6",
                            "restrict": [
                              "span"
                            ],
                            "description": "Sixth waffle dot (middle-end).",
                            "attributes": {
                              "static": {
                                "class": "slds-r6"
                              }
                            }
                          },
                          {
                            "name": "waffleDot7",
                            "restrict": [
                              "span"
                            ],
                            "description": "Seventh waffle dot (bottom-start).",
                            "attributes": {
                              "static": {
                                "class": "slds-r7"
                              }
                            }
                          },
                          {
                            "name": "waffleDot8",
                            "restrict": [
                              "span"
                            ],
                            "description": "Eighth waffle dot (bottom-center).",
                            "attributes": {
                              "static": {
                                "class": "slds-r8"
                              }
                            }
                          },
                          {
                            "name": "waffleDot9",
                            "restrict": [
                              "span"
                            ],
                            "description": "Ninth waffle dot (bottom-end).",
                            "attributes": {
                              "static": {
                                "class": "slds-r9"
                              }
                            }
                          }
                        ]
                      },
                      {
                        "name": "waffleAssistiveText",
                        "restrict": [
                          "span"
                        ],
                        "description": "Visually hidden label announcing the app launcher action.",
                        "attributes": {
                          "static": {
                            "class": "slds-assistive-text"
                          }
                        }
                      }
                    ]
                  }
                ]
              },
              {
                "name": "appName",
                "restrict": [
                  "span",
                  "a"
                ],
                "description": "Display label for the current application; combines the label-action and app-name treatments.",
                "attributes": {
                  "static": {
                    "class": "slds-context-bar__label-action slds-context-bar__app-name"
                  }
                },
                "children": [
                  {
                    "name": "appNameLabel",
                    "restrict": [
                      "span"
                    ],
                    "description": "Truncated text label of the application name.",
                    "attributes": {
                      "static": {
                        "class": "slds-truncate"
                      }
                    }
                  }
                ]
              }
            ]
          },
          {
            "name": "objectSwitcher",
            "restrict": [
              "div"
            ],
            "description": "Optional object-switcher item rendered in the primary zone of the tabs layout.",
            "attributes": {
              "static": {
                "class": "slds-context-bar__item slds-context-bar__object-switcher slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_click"
              }
            }
          },
          {
            "name": "newTabItem",
            "restrict": [
              "div"
            ],
            "description": "Optional context bar item that hosts the new-tab (plus) icon button in tabs layout.",
            "attributes": {
              "static": {
                "class": "slds-context-bar__item slds-dropdown-trigger slds-dropdown-trigger_click"
              }
            }
          }
        ]
      },
      {
        "name": "secondary",
        "restrict": [
          "nav",
          "div"
        ],
        "description": "Secondary zone containing the primary navigation list or tablist.",
        "attributes": {
          "static": {
            "class": "slds-context-bar__secondary"
          }
        },
        "children": [
          {
            "name": "verticalDivider",
            "restrict": [
              "div"
            ],
            "description": "Vertical divider that visually separates the primary zone from the tablist in the tabs layout.",
            "attributes": {
              "static": {
                "class": "slds-context-bar__vertical-divider"
              }
            }
          },
          {
            "name": "list",
            "restrict": [
              "ul"
            ],
            "description": "List of navigation items or tabs; carries slds-grid so children flow horizontally.",
            "attributes": {
              "static": {
                "class": "slds-grid"
              }
            },
            "children": [
              {
                "name": "item",
                "restrict": [
                  "li"
                ],
                "description": "A single context bar item (navigation link, dropdown trigger, or tab). Repeats per nav entry.",
                "repeats": true,
                "attributes": {
                  "static": {
                    "class": "slds-context-bar__item"
                  }
                },
                "modifiers": [
                  {
                    "name": "tab",
                    "attribute": "class",
                    "value": "slds-context-bar__item_tab",
                    "description": "Marks the item as a tab inside the tabs layout."
                  },
                  {
                    "name": "dividerLeft",
                    "attribute": "class",
                    "value": "slds-context-bar__item_divider-left",
                    "description": "Adds a left border to the item to separate it from the previous item."
                  },
                  {
                    "name": "dividerRight",
                    "attribute": "class",
                    "value": "slds-context-bar__item_divider-right",
                    "description": "Adds a right border to the item to separate it from the next item."
                  },
                  {
                    "name": "dropdownTrigger",
                    "attribute": "class",
                    "value": "slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_click",
                    "description": "Marks the item as a click-activated dropdown trigger."
                  },
                  {
                    "name": "noHover",
                    "attribute": "class",
                    "value": "slds-no-hover",
                    "description": "Disables the hover background and underline treatments on the item."
                  }
                ],
                "children": [
                  {
                    "name": "labelAction",
                    "restrict": [
                      "a",
                      "button",
                      "span"
                    ],
                    "description": "Actionable text label for the item (link, button, or static span for the app name).",
                    "attributes": {
                      "static": {
                        "class": "slds-context-bar__label-action"
                      }
                    },
                    "children": [
                      {
                        "name": "indicatorContainer",
                        "restrict": [
                          "span"
                        ],
                        "description": "Reserved spacing for tab indicators (unread, unsaved). May be empty.",
                        "attributes": {
                          "static": {
                            "class": "slds-indicator-container"
                          }
                        },
                        "children": [
                          {
                            "name": "unreadIndicator",
                            "restrict": [
                              "span"
                            ],
                            "description": "Unread-activity dot shown when the item has notifications.",
                            "attributes": {
                              "static": {
                                "class": "slds-indicator_unread"
                              }
                            }
                          },
                          {
                            "name": "unsavedIndicator",
                            "restrict": [
                              "abbr"
                            ],
                            "description": "Unsaved-state glyph rendered when the item has dirty content.",
                            "attributes": {
                              "static": {
                                "class": "slds-indicator_unsaved"
                              }
                            }
                          }
                        ]
                      },
                      {
                        "name": "iconContainer",
                        "restrict": [
                          "span"
                        ],
                        "description": "Optional icon slot inside the label action (e.g., a tab object icon).",
                        "attributes": {
                          "static": {
                            "class": "slds-icon_container"
                          }
                        },
                        "children": [
                          {
                            "name": "icon",
                            "restrict": [
                              "svg"
                            ],
                            "description": "Icon glyph paired with the label.",
                            "attributes": {
                              "static": {
                                "class": "slds-icon slds-icon_small slds-icon-text-default"
                              }
                            }
                          },
                          {
                            "name": "iconAssistiveText",
                            "restrict": [
                              "span"
                            ],
                            "description": "Visually hidden label describing the icon for screen readers.",
                            "attributes": {
                              "static": {
                                "class": "slds-assistive-text"
                              }
                            }
                          }
                        ]
                      },
                      {
                        "name": "labelText",
                        "restrict": [
                          "span"
                        ],
                        "description": "Truncated text label of the navigation item.",
                        "attributes": {
                          "static": {
                            "class": "slds-truncate"
                          }
                        }
                      },
                      {
                        "name": "currentPageAssistiveText",
                        "restrict": [
                          "span"
                        ],
                        "description": "Visually hidden 'Current Page:' prefix announced on the active item.",
                        "attributes": {
                          "static": {
                            "class": "slds-assistive-text"
                          }
                        }
                      }
                    ]
                  },
                  {
                    "name": "iconAction",
                    "restrict": [
                      "div"
                    ],
                    "description": "Adjacent icon-action container that hosts a chevron, action menu, or close button next to the label action.",
                    "repeats": true,
                    "attributes": {
                      "static": {
                        "class": "slds-context-bar__icon-action"
                      }
                    },
                    "modifiers": [
                      {
                        "name": "asDropdownTrigger",
                        "attribute": "class",
                        "value": "slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_click",
                        "description": "Marks the icon-action as a click-activated dropdown trigger."
                      },
                      {
                        "name": "bumpLeft",
                        "attribute": "class",
                        "value": "slds-col_bump-left",
                        "description": "Pushes the icon-action (typically the close button) to the inline-end of the tab."
                      },
                      {
                        "name": "padLeftNone",
                        "attribute": "class",
                        "value": "slds-p-left_none",
                        "description": "Removes inline-start padding from the icon-action."
                      },
                      {
                        "name": "padRightNone",
                        "attribute": "class",
                        "value": "slds-p-right_none",
                        "description": "Removes inline-end padding from the icon-action."
                      }
                    ],
                    "children": [
                      {
                        "name": "iconActionButton",
                        "restrict": [
                          "button"
                        ],
                        "description": "Icon button rendered inside the icon-action container (chevron, close, etc.).",
                        "attributes": {
                          "static": {
                            "class": "slds-button slds-button_icon slds-context-bar__button"
                          }
                        },
                        "modifiers": [
                          {
                            "name": "iconContainer",
                            "attribute": "class",
                            "value": "slds-button_icon-container",
                            "description": "Renders the button as an icon-only container with neutral chrome."
                          },
                          {
                            "name": "currentColor",
                            "attribute": "class",
                            "value": "slds-button_icon-current-color",
                            "description": "Inherits its glyph color from the surrounding text color."
                          },
                          {
                            "name": "sizeXSmall",
                            "attribute": "class",
                            "value": "slds-button_icon-x-small",
                            "description": "Applies the extra-small icon-button size."
                          },
                          {
                            "name": "sizeSmall",
                            "attribute": "class",
                            "value": "slds-button_icon-small",
                            "description": "Applies the small icon-button size."
                          }
                        ],
                        "children": [
                          {
                            "name": "iconActionGlyph",
                            "description": "Icon glyph rendered inside the icon-action button (chevron, plus, close, etc.).",
                            "attributes": {
                              "static": {
                                "class": "slds-button__icon"
                              }
                            },
                            "component": "PrimitiveIcon"
                          },
                          {
                            "name": "iconActionAssistiveText",
                            "restrict": [
                              "span"
                            ],
                            "description": "Visually hidden label announcing the icon-button action.",
                            "attributes": {
                              "static": {
                                "class": "slds-assistive-text"
                              }
                            }
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "name": "tertiary",
        "restrict": [
          "div"
        ],
        "description": "Optional tertiary zone for trailing utilities (e.g., user controls). Rendered to the inline-end of the bar.",
        "attributes": {
          "static": {
            "class": "slds-context-bar__tertiary"
          }
        }
      }
    ]
  },
  "stateClasses": [
    {
      "state": "active",
      "class": "slds-is-active"
    },
    {
      "state": "pinned",
      "class": "slds-is-pinned"
    },
    {
      "state": "unsaved",
      "class": "slds-is-unsaved"
    },
    {
      "state": "open",
      "class": "slds-is-open"
    },
    {
      "state": "hasNotification",
      "class": "slds-has-notification"
    },
    {
      "state": "hasSuccess",
      "class": "slds-has-success"
    },
    {
      "state": "hasWarning",
      "class": "slds-has-warning"
    },
    {
      "state": "hasError",
      "class": "slds-has-error"
    },
    {
      "state": "hasFocus",
      "class": "slds-has-focus"
    },
    {
      "state": "hasSubTabs",
      "class": "slds-has-sub-tabs"
    }
  ],
  "componentRefs": {
    "PrimitiveIcon": {
      "description": "Bare SVG icon composed directly inside the component. The host node supplies the SVG class (e.g. slds-button__icon, slds-menu__item-icon) via componentProps; PrimitiveIcon contributes the sprite-href binding.",
      "props": {
        "iconName": {
          "type": "string",
          "required": true,
          "description": "Sprite reference for the icon glyph"
        }
      }
    }
  },
  "states": [
    {
      "name": "active",
      "type": "boolean",
      "description": "Whether the component is in the active state"
    },
    {
      "name": "pinned",
      "type": "boolean",
      "description": "Whether the component is in the pinned state"
    },
    {
      "name": "unsaved",
      "type": "boolean",
      "description": "Whether the component is in the unsaved state"
    },
    {
      "name": "open",
      "type": "boolean",
      "description": "Whether the component is in the open state"
    },
    {
      "name": "hasNotification",
      "type": "boolean",
      "description": "Whether the component is in the hasNotification state"
    },
    {
      "name": "hasSuccess",
      "type": "boolean",
      "description": "Whether the component is in the hasSuccess state"
    },
    {
      "name": "hasWarning",
      "type": "boolean",
      "description": "Whether the component is in the hasWarning state"
    },
    {
      "name": "hasError",
      "type": "boolean",
      "description": "Whether the component is in the hasError state"
    },
    {
      "name": "hasFocus",
      "type": "boolean",
      "description": "Whether the component is in the hasFocus state"
    },
    {
      "name": "hasSubTabs",
      "type": "boolean",
      "description": "Whether the component is in the hasSubTabs state"
    }
  ]
}