Had to move sidebar. For optimal performance make sure sideb

Error message

Had to move sidebar. For optimal performance make sure sidebar and pusher are direct children of your body tag

What it means

Emitted by Sidebar's setup.layout() (sidebar.js:334-336) when the sidebar is not a direct previous sibling of the pusher ($module.nextAll(selector.pusher) does not match the pusher). Sidebar self-heals: it detaches itself and prepends to the context to fix ordering, refreshes, then logs this advisory. It is a console.error (sidebar.js:818), not thrown.

Source

Thrown at src/definitions/modules/sidebar.js:1025

  },

  selector: {
    fixed   : '.fixed',
    omitted : 'script, link, style, .ui.modal, .ui.dimmer, .ui.nag, .ui.fixed',
    pusher  : '.pusher',
    sidebar : '.ui.sidebar'
  },

  regExp: {
    ios          : /(iPad|iPhone|iPod)/g,
    mobileChrome : /(CriOS)/g,
    mobile       : /Mobile|iP(hone|od|ad)|Android|BlackBerry|IEMobile|Kindle|NetFront|Silk-Accelerated|(hpw|web)OS|Fennec|Minimo|Opera M(obi|ini)|Blazer|Dolfin|Dolphin|Skyfire|Zune/g
  },

  error   : {
    method       : 'The method you called is not defined.',
    pusher       : 'Had to add pusher element. For optimal performance make sure body content is inside a pusher element',
    movedSidebar : 'Had to move sidebar. For optimal performance make sure sidebar and pusher are direct children of your body tag',
    overlay      : 'The overlay setting is no longer supported, use animation: overlay',
    notFound     : 'There were no elements that matched the specified selector'
  }

};


})( jQuery, window, document );

View on GitHub (pinned to 597843ab84)

Solutions

Make the sidebar a direct child of the same context as the pusher, positioned before it.
Do not nest the sidebar inside .pusher.

Example fix

<!-- before: sidebar nested inside pusher -->
<body>
  <div class="pusher">
    <div class="ui sidebar"></div>
    <div>content</div>
  </div>
</body>
<!-- after: siblings -->
<body>
  <div class="ui sidebar"></div>
  <div class="pusher"><div>content</div></div>
</body>

Defensive patterns

Strategy: validation

Validate before calling

// Structure sidebar and pusher as direct siblings of the context.
function assertSidebarStructure($ctx){
  var $sb = $ctx.children('.ui.sidebar');
  var $pusher = $ctx.children('.pusher');
  if ($sb.length === 0 || $pusher.length === 0) {
    throw new Error('Sidebar and pusher must be direct children of the same context.');
  }
}

Prevention

Make the sidebar a direct child of body, immediately before the .pusher.
Do not nest the sidebar inside .pusher or other wrappers.
Like error 77, this is self-healing (sidebar.js:337) and advisory.

When it happens

Trigger: The sidebar is nested inside the pusher or placed elsewhere in the DOM rather than as a direct child of body sitting just before the pusher (sidebar.js:334).

Common situations: Sidebar rendered inside a content/template container, templating framework reordering DOM, sidebar placed inside .pusher by mistake.

Related errors

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