Semantic-Org/Semantic-UI · error

Activated tab cannot be found. Tabs are case-sensitive.

Error message

Activated tab cannot be found. Tabs are case-sensitive.

What it means

Semantic UI Tab error logged at tab.js:404 when the tab path activated (via click, programmatic 'change tab', or history) has no matching tab element in the DOM. Tab paths are case-sensitive, so 'Settings' != 'settings'.

Source

Thrown at src/definitions/modules/tab.js:925

  cacheType       : 'response', // Whether to cache exact response, or to html cache contents after scripts execute
  ignoreFirstLoad : false,      // don't load remote content on first load

  apiSettings     : false,      // settings for api call
  evaluateScripts : 'once',     // whether inline scripts should be parsed (true/false/once). Once will not re-evaluate on cached content

  onFirstLoad : function(tabPath, parameterArray, historyEvent) {}, // called first time loaded
  onLoad      : function(tabPath, parameterArray, historyEvent) {}, // called on every load
  onVisible   : function(tabPath, parameterArray, historyEvent) {}, // called every time tab visible
  onRequest   : function(tabPath, parameterArray, historyEvent) {}, // called ever time a tab beings loading remote content

  templates : {
    determineTitle: function(tabArray) {} // returns page title for path
  },

  error: {
    api        : 'You attempted to load content without API module',
    method     : 'The method you called is not defined',
    missingTab : 'Activated tab cannot be found. Tabs are case-sensitive.',
    noContent  : 'The tab you specified is missing a content url.',
    path       : 'History enabled, but no path was specified',
    recursion  : 'Max recursive depth reached',
    legacyInit : 'onTabInit has been renamed to onFirstLoad in 2.0, please adjust your code.',
    legacyLoad : 'onTabLoad has been renamed to onLoad in 2.0. Please adjust your code',
    state      : 'History requires Asual\'s Address library <https://github.com/asual/jquery-address>'
  },

  metadata : {
    tab    : 'tab',
    loaded : 'loaded',
    promise: 'promise'
  },

  className   : {
    loading : 'loading',
    active  : 'active'
  },

View on GitHub (pinned to 597843ab84)

Solutions

1. Verify the data-tab attribute on the nav item exactly matches (case included) the data-tab on the target pane.
2. Render the target tab pane before activating it (or wire up the remote loading path).
3. Clear browser history state if stale paths are being reactivated.

Example fix

// before
<a data-tab="Profile"> ... </a>
<div data-tab="profile"></div>
// after
<a data-tab="profile"> ... </a>
<div data-tab="profile"></div>

function tabTargetsExist(navSel) {
  var ok = true;
  document.querySelectorAll(navSel + ' [data-tab]').forEach(function(el){
    var path = el.getAttribute('data-tab');
    if (!document.querySelector('[data-tab="' + CSS.escape(path) + '"]')) {
      console.error('Missing tab pane for data-tab="' + path + '"'); ok = false;
    }
  });
  return ok;
}

function hasMatchingPane(path) {
  return document.querySelectorAll('[data-tab="' + path + '"]').length > 0;
}

When it happens

Trigger: A nav item with data-tab="profile" is clicked, but no element with data-tab="profile" (or #tab-profile, depending on config) exists in the DOM. Also triggered by typos, casing differences, or stale references after a DOM rebuild.

Common situations: SPA dynamic content where the tab pane hasn't been rendered yet; mismatched data-tab attributes between nav and pane; copy-paste casing errors (Profile vs profile); leftover history entries pointing at removed tabs.

Related errors

• You attempted to load content without API module
• The method you called is not defined
• The tab you specified is missing a content url.
• History enabled, but no path was specified
• Max recursive depth reached

AI-assisted analysis of Semantic-Org/Semantic-UI@597843ab84 (2026-08-13). Data as JSON: /api/errors/d0bdc3bfd61345a3. Report an issue: GitHub.