Components

Global Navigation

Global Navigation is the list of navigation links your users find in the Header on every page in Salesforce. Your Global Navigation includes a Navigation Bar where your users find the App Launcher, App Name, and Pages that each App includes.

Navigation BarNavigation Bar › DefaultNavigation Bar › Item ActiveNavigation Bardev ready

Preview

Code

<div class="slds-context-bar">
  <div class="slds-context-bar__primary slds-context-bar__item--divider-right">
    <div class="slds-context-bar__item slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger--click slds-no-hover">
      <div class="slds-context-bar__icon-action">
        <a href="javascript:void(0);" class="slds-icon-waffle_container slds-context-bar__button">
          <div class="slds-icon-waffle">
            <div class="slds-r1"></div>
            <div class="slds-r2"></div>
            <div class="slds-r3"></div>
            <div class="slds-r4"></div>
            <div class="slds-r5"></div>
            <div class="slds-r6"></div>
            <div class="slds-r7"></div>
            <div class="slds-r8"></div>
            <div class="slds-r9"></div>
          </div>
          <span class="slds-assistive-text">Open App Launcher</span>
        </a>
      </div>
      <span class="slds-context-bar__label-action slds-context-bar__app-name">
        <span class="slds-truncate" title="{ props.appName || &#x27;App Name&#x27; }">App Name</span>
      </span>
    </div>
  </div>
  <nav class="slds-context-bar__secondary" role="navigation">
    <ul class="slds-grid">
      <li class="slds-context-bar__item">
        <a href="javascript:void(0);" class="slds-context-bar__label-action" title="Home">
          <span class="slds-truncate">Home</span>
        </a>
      </li>
      <li class="slds-context-bar__item slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger--hover" aria-haspopup="true">
        <a href="javascript:void(0);" class="slds-context-bar__label-action" title="Menu Item">
          <span class="slds-truncate">Menu Item</span>
        </a>
        <div class="slds-context-bar__icon-action slds-p-left--none" tabindex="0">
          <button class="slds-button slds-button--icon slds-context-bar__button" tabindex="-1" title="Open menu item submenu">
            <svg class="slds-button__icon" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevrondown"></use>
            </svg>
            <span class="slds-assistive-text">Open menu item submenu</span>
          </button>
        </div>
        <div class="slds-dropdown slds-dropdown--right">
          <ul class="slds-dropdown__list" role="menu">
            <li class="slds-dropdown__item" role="presentation">
              <a href="javascript:void(0);" role="menuitem" tabindex="-1">
                <span class="slds-truncate">
                  <svg class="slds-icon slds-icon--x-small slds-icon-text-default slds-m-right--x-small" aria-hidden="true">
                    <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#add"></use>
                  </svg>Main action</span>
              </a>
            </li>
            <li class="slds-dropdown__header slds-has-divider--top-space" role="separator">
              <span class="slds-text-title--caps">Menu header</span>
            </li>
            <li class="slds-dropdown__item" role="presentation">
              <a href="javascript:void(0);" role="menuitem" tabindex="-1">
                <span class="slds-truncate">Menu Item One</span>
              </a>
            </li>
            <li class="slds-dropdown__item" role="presentation">
              <a href="javascript:void(0);" role="menuitem" tabindex="-1">
                <span class="slds-truncate">Menu Item Two</span>
              </a>
            </li>
            <li class="slds-dropdown__item" role="presentation">
              <a href="javascript:void(0);" role="menuitem" tabindex="-1">
                <span class="slds-truncate">Menu Item Three</span>
              </a>
            </li>
          </ul>
        </div>
      </li>
      <li class="slds-context-bar__item">
        <a href="javascript:void(0);" class="slds-context-bar__label-action" title="Menu Item 0">
          <span class="slds-truncate">Menu Item</span>
        </a>
      </li>
      <li class="slds-context-bar__item">
        <a href="javascript:void(0);" class="slds-context-bar__label-action" title="Menu Item 1">
          <span class="slds-truncate">Menu Item</span>
        </a>
      </li>
      <li class="slds-context-bar__item">
        <a href="javascript:void(0);" class="slds-context-bar__label-action" title="Menu Item 2">
          <span class="slds-truncate">Menu Item</span>
        </a>
      </li>
    </ul>
  </nav>
</div>

Navigation Tab BarNavigation Tab Bar › DefaultNavigation Tab Bar › Split View - ActiveNavigation Tab Bar › Tab - ActiveNavigation Tab Bar › Tab - Active FocusNavigation Tab Bar › Tab - Action OverflowNavigation Tab Bar › Pinned TabNavigation Tab Bar › Pinned Tab - ActiveNavigation Tab Bar › Pinned Tab - Active FocusNavigation Tab Bar › Unsaved Pinned TabNavigation Tab Bar › Unsaved TabNavigation Tab Bar › Overflow TabsNavigation Tab Bar › Overflow Tabs - OpenNavigation Tab Bar › Unsaved Overflow TabsNavigation Tab Bar › Unsaved Overflow Tabs - OpenNavigation Tab Bar › Object Switcher - ActiveNavigation Tab Bar › Object Switcher - OpenNavigation Tab Bar › Add Tab Dialog - OpenNavigation Tab Bardev ready

Preview

Code

<div class="slds-context-bar slds-context-bar--tabs">
  <div class="slds-context-bar__primary">
    <div class="slds-context-bar__item slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger--click slds-no-hover">
      <div class="slds-context-bar__icon-action">
        <a href="javascript:void(0);" class="slds-icon-waffle_container slds-context-bar__button">
          <div class="slds-icon-waffle">
            <div class="slds-r1"></div>
            <div class="slds-r2"></div>
            <div class="slds-r3"></div>
            <div class="slds-r4"></div>
            <div class="slds-r5"></div>
            <div class="slds-r6"></div>
            <div class="slds-r7"></div>
            <div class="slds-r8"></div>
            <div class="slds-r9"></div>
          </div>
          <span class="slds-assistive-text">Open App Launcher</span>
        </a>
      </div>
      <span class="slds-context-bar__label-action slds-context-bar__app-name">
        <span class="slds-truncate" title="{ props.appName || &#x27;App Name&#x27; }">App Name</span>
      </span>
    </div>
    <div class="slds-context-bar__item slds-context-bar__object-switcher slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger--click">
      <a href="javascript:void(0);" title="Context" class="slds-context-bar__label-action">
        <span class="slds-truncate">Object</span>
      </a>
      <div class="slds-context-bar__icon-action">
        <button class="slds-button slds-button--icon-container slds-button--icon-x-small" aria-haspopup="true" title="settings">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevrondown"></use>
          </svg>
          <span class="slds-assistive-text">Open object switcher menu</span>
        </button>
      </div>
      <div class="slds-dropdown slds-dropdown--right">
        <ul class="slds-dropdown__list" role="menu">
          <li class="slds-dropdown__item" role="presentation">
            <a href="javascript:void(0);" role="menuitem" tabindex="-1">
              <span class="slds-truncate">
                <svg class="slds-icon slds-icon--small slds-icon-standard-account slds-m-right--small" aria-hidden="true">
                  <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
                </svg>Accounts</span>
            </a>
          </li>
          <li class="slds-dropdown__item" role="presentation">
            <a href="javascript:void(0);" role="menuitem" tabindex="-1">
              <span class="slds-truncate">
                <svg class="slds-icon slds-icon--small slds-icon-standard-case slds-m-right--small" aria-hidden="true">
                  <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#case"></use>
                </svg>Cases</span>
            </a>
          </li>
          <li class="slds-dropdown__item" role="presentation">
            <a href="javascript:void(0);" role="menuitem" tabindex="-1">
              <span class="slds-truncate">
                <svg class="slds-icon slds-icon--small slds-icon-standard-work-order slds-m-right--small" aria-hidden="true">
                  <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#work_order"></use>
                </svg>Insights</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <div class="slds-context-bar__item slds-dropdown-trigger slds-dropdown-trigger--click">
      <div class="slds-context-bar__icon-action">
        <button class="slds-button slds-button--icon-container slds-button--icon-small" aria-haspopup="true" title="settings">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#side_list"></use>
          </svg>
          <span class="slds-assistive-text">Toggle split view</span>
        </button>
      </div>
    </div>
    <div class="slds-context-bar__vertical-divider"></div>
    <div class="slds-context-bar__item slds-dropdown-trigger slds-dropdown-trigger--click">
      <div class="slds-context-bar__icon-action">
        <button class="slds-button slds-button--icon-container slds-button--icon-small" aria-haspopup="true" title="settings">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#add"></use>
          </svg>
          <span class="slds-assistive-text">Open object switcher menu</span>
        </button>
      </div>
    </div>
  </div>
  <div class="slds-context-bar__secondary">
    <div class="slds-context-bar__vertical-divider"></div>
    <ul class="slds-grid" role="tablist">
      <li class="slds-context-bar__item slds-context-bar__item--tab slds-is-active" role="presentation">
        <a href="javascript:void(0);" class="slds-context-bar__label-action" role="tab" title="Home" aria-selected="true" tabindex="0">
          <div class="slds-icon_container" title="Home">
            <svg class="slds-icon slds-icon--small slds-icon-text-default" aria-hidden="true">
              <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#home"></use>
            </svg>
            <span class="slds-assistive-text">Home</span>
          </div>
          <span class="slds-truncate" title="Home">Home</span>
        </a>
        <div class="slds-context-bar__icon-action slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger--click slds-p-left--none slds-p-right--none">
          <button class="slds-button slds-button--icon-container slds-button--icon-x-small" aria-haspopup="true" tabindex="0" title="settings">
            <svg class="slds-button__icon" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevrondown"></use>
            </svg>
            <span class="slds-assistive-text">Actions for Home</span>
          </button>
          <div class="slds-dropdown slds-dropdown--right">
            <ul class="slds-dropdown__list" role="menu">
              <li class="slds-dropdown__item" role="presentation">
                <a href="javascript:void(0);" role="menuitem" tabindex="-1">
                  <span class="slds-truncate">Refresh Tab</span>
                </a>
              </li>
              <li class="slds-dropdown__item" role="presentation">
                <a href="javascript:void(0);" role="menuitem" tabindex="-1">
                  <span class="slds-truncate">Pin Tab</span>
                </a>
              </li>
              <li class="slds-dropdown__item" role="presentation">
                <a href="javascript:void(0);" role="menuitem" tabindex="-1">
                  <span class="slds-truncate">Close Tab</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="slds-context-bar__icon-action slds-col--bump-left slds-p-left--none">
          <button class="slds-button slds-button--icon-container slds-button--icon-x-small" tabindex="0" title="settings">
            <svg class="slds-button__icon" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
            </svg>
            <span class="slds-assistive-text">Close Home</span>
          </button>
        </div>
      </li>
      <li class="slds-context-bar__item slds-context-bar__item--tab" role="presentation">
        <a href="javascript:void(0);" class="slds-context-bar__label-action" role="tab" title="Tab Item 1" aria-selected="false" tabindex="-1">
          <div class="slds-icon_container" title="Case">
            <svg class="slds-icon slds-icon--small slds-icon-text-default" aria-hidden="true">
              <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#case"></use>
            </svg>
            <span class="slds-assistive-text">Case</span>
          </div>
          <span class="slds-truncate" title="Tab Item 1">Tab Item 1</span>
        </a>
        <div class="slds-context-bar__icon-action slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger--click slds-p-left--none slds-p-right--none">
          <button class="slds-button slds-button--icon-container slds-button--icon-x-small" aria-haspopup="true" tabindex="-1" title="settings">
            <svg class="slds-button__icon" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevrondown"></use>
            </svg>
            <span class="slds-assistive-text">Actions for Tab Item 1</span>
          </button>
          <div class="slds-dropdown slds-dropdown--right">
            <ul class="slds-dropdown__list" role="menu">
              <li class="slds-dropdown__item" role="presentation">
                <a href="javascript:void(0);" role="menuitem" tabindex="-1">
                  <span class="slds-truncate">Refresh Tab</span>
                </a>
              </li>
              <li class="slds-dropdown__item" role="presentation">
                <a href="javascript:void(0);" role="menuitem" tabindex="-1">
                  <span class="slds-truncate">Pin Tab</span>
                </a>
              </li>
              <li class="slds-dropdown__item" role="presentation">
                <a href="javascript:void(0);" role="menuitem" tabindex="-1">
                  <span class="slds-truncate">Close Tab</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="slds-context-bar__icon-action slds-col--bump-left slds-p-left--none">
          <button class="slds-button slds-button--icon-container slds-button--icon-x-small" tabindex="-1" title="settings">
            <svg class="slds-button__icon" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
            </svg>
            <span class="slds-assistive-text">Close Tab Item 1</span>
          </button>
        </div>
      </li>
      <li class="slds-context-bar__item slds-context-bar__item--tab" role="presentation">
        <a href="javascript:void(0);" class="slds-context-bar__label-action" role="tab" title="Tab Item 2" aria-selected="false" tabindex="-1">
          <div class="slds-icon_container" title="Case">
            <svg class="slds-icon slds-icon--small slds-icon-text-default" aria-hidden="true">
              <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#case"></use>
            </svg>
            <span class="slds-assistive-text">Case</span>
          </div>
          <span class="slds-truncate" title="Tab Item 2">Tab Item 2</span>
        </a>
        <div class="slds-context-bar__icon-action slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger--click slds-p-left--none slds-p-right--none">
          <button class="slds-button slds-button--icon-container slds-button--icon-x-small" aria-haspopup="true" tabindex="-1" title="settings">
            <svg class="slds-button__icon" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevrondown"></use>
            </svg>
            <span class="slds-assistive-text">Actions for Tab Item 2</span>
          </button>
          <div class="slds-dropdown slds-dropdown--right">
            <ul class="slds-dropdown__list" role="menu">
              <li class="slds-dropdown__item" role="presentation">
                <a href="javascript:void(0);" role="menuitem" tabindex="-1">
                  <span class="slds-truncate">Refresh Tab</span>
                </a>
              </li>
              <li class="slds-dropdown__item" role="presentation">
                <a href="javascript:void(0);" role="menuitem" tabindex="-1">
                  <span class="slds-truncate">Pin Tab</span>
                </a>
              </li>
              <li class="slds-dropdown__item" role="presentation">
                <a href="javascript:void(0);" role="menuitem" tabindex="-1">
                  <span class="slds-truncate">Close Tab</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="slds-context-bar__icon-action slds-col--bump-left slds-p-left--none">
          <button class="slds-button slds-button--icon-container slds-button--icon-x-small" tabindex="-1" title="settings">
            <svg class="slds-button__icon" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
            </svg>
            <span class="slds-assistive-text">Close Tab Item 2</span>
          </button>
        </div>
      </li>
    </ul>
  </div>
</div>

Component Overview

1.0. Building the Navigation Bar

The navigation bar is composed of a wrapper and 2 required regions:

  • Primary, which contains the App Launcher and App Name
  • Secondary, which contains the App Items, for navigating within the current app

The markup should follow the order listed above for proper keyboard interaction set by the 508 compliance standards. Each included region inside the wrapper of .slds-context-bar needs the appropriate ordering class name, e.g. .slds-context-bar__primary.

1.1. Items on the Navigation Bar

Every item that sits on the horizontal axis of the navigation bar should receive the class .slds-context-bar__item.

This class is used to notify the navigation bar that it has a new item. The styles applied allow the children of the navigation bar to vertically aligned, without knowing the height of the navigation bar. The styles will also allow for the actionable items .slds-context-bar__label-action and .slds-context-bar__icon-action to stretch 100% of the height of the navigation bar, optimizing the hit area of those actions.

Since the items are leveraging flexbox, the elements inside can easily be re-ordered easily by using an order class helper on the element, such as .slds-order--[#].

1.2. Building the Navigation Bar Item

The navigation bar item is built to accommodate 2 specific layout needs.

  1. Individual text hyperlink to invokes link destination
  2. Individual text hyperlink to invokes link destination + button icon to indicate menu dropdown is available

These layouts are built upon 2 reusable classes. The text hyperlink action area would get the class .slds-context-bar__label-action and the icon based action area would get the class .slds-context-bar__icon-action.

The .slds-context-bar__icon-action class handles the alignment and coloring of the icons based on interactions such as :hover, :focus and :active. This is a required if you have an actionable icon area adjacent to an actionable text area.

The markup structure should have the button icon(s) preceding the text label. The icons can be visually reordered by using the ordering utility classes such as .slds-order--[#].

1.3. Building the Icons in the Navigation Bar

The icons in the navigation bar either serve as a visual affordance that indicates an item has a menu with additional actions or the icon itself is actionable.

The class used to indicate a button icon will sit adjacent to another actionable item is .slds-context-bar__icon-action. If you two icons in an item, each icon should be contained in it’s own .slds-context-bar__icon-action element.

The look and feel of the button icon is dependant on the modifiers used from Button Icon Variant Component page.

The .slds-context-bar__icon-action styles apply a default left and right padding of 0.75rem. That padding can be removed or modified by using our spacing utilities. In example #1, the left padding has been removed by using the class .slds-p-left--none.

If a navigation bar item has an icon then we want to provide visual indication that its active when a user hovers into its region. To make this happen, apply the class .slds-hint-parent to the hover region, most cases would be .slds-context-bar__icon-action element.

1.4. Menu trigger area on Navigation Bar Items

When a navigation bar items requires a menu with additional sub options or actions, the classes that need to be added to the target hit area are the following:

  1. .slds-context-bar__dropdown-trigger — Add a hoverable zone below the action so that the dropdown doesn’t disappear when the mouse is between the action and the dropdown — this is specific to the navigation bar
  2. .slds-dropdown-trigger — Globally used utility that notifies the element there is a dropdown menu
  3. .slds-dropdown-trigger--[interaction] — Specify which type of interaction the menu should appear with “hover” or “click”. The default pattern requires hover to show the menu besides the App Launcher Waffle icon.

If the navigation item has one hyperlink with a menu containing additional sub actions, then the hover area that invokes the dropdown menu is both the .slds-context-bar__label-action and .slds-context-bar__icon-action. If the navigation item is demonstrated as a tab format, one hyperlink plus two additional actions, then the hover area that invokes the dropdown menu is only on the .slds-context-bar__icon-action.

1.5. Specifics of the Navigation Bar - App Launcher

🁢🁢🁢🁢🁢🁢🁢🁢🁢🁢🁢🁢🁢

The app launcher is the one element on the navigation bar that requires a mouse click or keyboard enter to invoke the app launcher dropdown. Please use JavaScript to accommodate this requirement.

1.6. Specifics of the Navigation Bar - App Name

🁢🁢🁢🁢🁢🁢🁢🁢🁢🁢🁢🁢🁢

The application name needs to receive the .slds-context-bar__app-name class. This class will handle such things as its unique font sizing and truncation widths.

1.7. Specifics of the Navigation Bar - Divider

🁢🁢🁢🁢🁢🁢🁢🁢🁢🁢🁢🁢🁢

Due to the platform-esc nature of the navigation bar, there is an available element utility to apply a divider between sections where needed. The .slds-context-bar__vertical-divider class should be applied to an empty <div> and placed within the markup of your navigation bar for a visual divider.

Alternatively, two classes are available to add border using css. Adding the class .slds-context-bar__item--divider-left will add a left border to a navigation bar item while .slds-context-bar__item--divider-right will add a right border.

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to create different tabset looks.
Class NameUsage
.slds-context-bar
Applied to:

<div>

Outcome:

Context bar wrapper

Required:

Required

Comments:

--

.slds-context-bar__primary
Applied to:

<div>

Outcome:

Primary zone

Required:

Required

Comments:

--

.slds-context-bar__secondary
Applied to:

<div>

Outcome:

Secondary zone

Required:

Required

Comments:

--

.slds-context-bar__item
Applied to:

<div> or <li>

Outcome:

Item on the horizontal axis of the context bar

Required:

Required

Comments:

--

.slds-context-bar__item--tab
Applied to:

<li>

Outcome:

Tab item on the horizontal axis of the context bar

Required:

No, optional element or modifier

Comments:

--

.slds-context-bar__label-action
Applied to:

<a>

Outcome:

Text hyperlink

Required:

Required

Comments:

--

.slds-context-bar__icon-action
Applied to:

<div>

Outcome:

Container for actionable area of SVG icon or button icon

Required:

No, optional element or modifier

Comments:

--

.slds-context-bar__button
Applied to:

<a> or <button>

Outcome:

Styles for buttons

Required:

No, optional element or modifier

Comments:

--

.slds-context-bar__dropdown-trigger
Applied to:

.slds-context-bar__item

Outcome:

Submenu / dropdown trigger area

Required:

No, optional element or modifier

Comments:

Requires .slds-dropdown-trigger and .slds-dropdown-trigger--hover

.slds-context-bar__vertical-divider
Applied to:

<div>

Outcome:

Add a vertical divider between elements

Required:

No, optional element or modifier

Comments:

--

.slds-context-bar__item--divider-left
Applied to:

<div> or <li>

Outcome:

Add a left border to a context bar item

Required:

No, optional element or modifier

Comments:

--

.slds-context-bar__item--divider-right
Applied to:

<div> or <li>

Outcome:

Add a right border to a context bar item

Required:

No, optional element or modifier

Comments:

--

.slds-context-bar__app-name
Applied to:

.slds-context-bar__label-action

Outcome:

Styles for application name region

Required:

Required

Comments:

--

.slds-context-bar__object-switcher
Applied to:

.slds-context-bar__item

Outcome:

Styles for object switcher region

Required:

Required

Comments:

--

.slds-context-bar__item--tab
Applied to:

.slds-context-bar__item

Outcome:

Tab modifier when using a tabset

Required:

Required

Comments:

Only use on tabset version

.slds-has-focus
Applied to:

.slds-context-bar__item

Outcome:

Toggled class that gets applied via JavaScript

Required:

Required

Comments:

Only needed on tabset version

.slds-is-pinned
Applied to:

.slds-context-bar__item

Outcome:

A state of tabs, user can pin commonly used or favorite tabs

Required:

Required

Comments:

Only use on tabset version

.slds-is-unsaved
Applied to:

.slds-context-bar__item

Outcome:

Handles the "dirty" state of a tab, applies visual indication on the tab to inform user something on their page hasn't been saved

Required:

Required

Comments:

--

.slds-indicator--unsaved
Applied to:

<abbr>

Outcome:

Asterisk that is injected into the markup if a tab state is dirty

Required:

Required

Comments:

--