Semantic-Org/Semantic-UI · error

The tab you specified is missing a content url.

Error message

The tab you specified is missing a content url.

What it means

Semantic UI Tab error defined at tab.js:926 indicating the activated tab has no content url configured. The tab module needs either an in-DOM pane to show, or a remote content url (via data-url, path, or apiSettings) to load; if neither is present, the message warns the developer.

Source

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

  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. Provide a content url via apiSettings.url or a data-url attribute on the tab element.
  2. If the tab is meant to be local, ensure a DOM pane with the matching data-tab exists so remote loading is not attempted.
  3. Confirm the path resolution in evaluateScripts/auto settings yields a non-empty content url.

Example fix

// before
$('.menu .item').tab({ apiSettings: {} }); // no url
// after
$('.menu .item').tab({ apiSettings: { url: '/tabs/profile.html' } });
Defensive patterns

Strategy: validation

Validate before calling

function tabHasContent(navEl) {
  var path = navEl.getAttribute('data-tab');
  var hasPane = !!document.querySelector('[data-tab="' + path + '"]');
  var hasUrl = !!navEl.getAttribute('data-url') || !!(tabSettings && tabSettings.apiSettings && tabSettings.apiSettings.url);
  return hasPane || hasUrl;
}

Type guard

function isRemoteTabConfigured(settings) {
  return !!(settings && settings.apiSettings && typeof settings.apiSettings.url === 'string' && settings.apiSettings.url.length > 0);
}

Prevention

When it happens

Trigger: Configuring a tab for remote loading (path contains a '/' so it splits into parent/child, or apiSettings.url is set) but the resolved content url is empty/undefined; the data-tab path points to a remote resource without a corresponding url.

Common situations: Forgetting to set apiSettings.url or data-url for a remote tab; misconfigured autoRoutes; mixing local tab paths with remote expectations; partial copy-paste of a remote-tab example.

Related errors


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