Layouts

Dashboard Shell

The primary admin panel layout. A fixed-width sidebar sits on the left; the right side contains a sticky topbar and a scrollable main content area.

<div class="wb-dashboard-shell">

  <!-- Sidebar -->
  <aside class="wb-sidebar">
    <div class="wb-sidebar-brand">
      <a href="/">My App</a>
    </div>
    <nav class="wb-sidebar-nav">
      <a href="/dashboard" class="wb-sidebar-link is-active">Dashboard</a>
      <a href="/users"     class="wb-sidebar-link">Users</a>
      <a href="/settings"  class="wb-sidebar-link">Settings</a>
    </nav>
  </aside>

  <!-- Main body -->
  <div class="wb-dashboard-body">

    <!-- Top navigation bar -->
    <header class="wb-navbar">
      <button class="wb-btn wb-btn-ghost wb-btn-sm"
              data-wb-toggle="sidebar">☰</button>
      <div style="flex:1"></div>
      <span class="wb-avatar wb-avatar-sm">JD</span>
    </header>

    <!-- Scrollable content -->
    <main class="wb-dashboard-main">
      <div class="wb-container">
        <h1>Page title</h1>
      </div>
    </main>

  </div>
</div>

Sidebar collapse (mobile)

The sidebar hides on mobile. data-wb-toggle="sidebar" on any button opens it with a backdrop overlay. WBSidebar handles this automatically.

<!-- Hamburger in navbar -->
<button data-wb-toggle="sidebar">☰ Menu</button>

<!-- Or JS -->
WBSidebar.open();
WBSidebar.close();

Sidebar nav groups

Use wb-nav-group for collapsible sections within the sidebar.

<nav class="wb-sidebar-nav">
  <a href="#" class="wb-sidebar-link is-active">Dashboard</a>

  <div class="wb-nav-group">
    <button class="wb-nav-group-trigger">
      Users
      <svg class="wb-nav-group-chevron" ...>...</svg>
    </button>
    <div class="wb-nav-group-body">
      <a href="#" class="wb-sidebar-link">All Users</a>
      <a href="#" class="wb-sidebar-link">Roles</a>
      <a href="#" class="wb-sidebar-link">Permissions</a>
    </div>
  </div>

  <a href="#" class="wb-sidebar-link">Settings</a>
</nav>

<!-- Accordion mode: closes siblings when one group opens -->
<nav class="wb-sidebar-nav" data-wb-nav-group-accordion>
  ...
</nav>

Auth Shell

Centered card layout for login, register, and password reset pages.

<div class="wb-auth">
  <div class="wb-auth-card">

    <div class="wb-auth-logo">
      <!-- Logo here -->
    </div>

    <h1 class="wb-auth-title">Sign in to your account</h1>
    <p class="wb-auth-subtitle">Welcome back. Enter your credentials.</p>

    <form class="wb-auth-form">
      <div class="wb-field">
        <label class="wb-label">Email</label>
        <input type="email" class="wb-input" autocomplete="email">
      </div>
      <div class="wb-field">
        <label class="wb-label">Password</label>
        <input type="password" class="wb-input" autocomplete="current-password">
      </div>
      <button type="submit" class="wb-btn wb-btn-primary" style="width:100%">
        Sign in
      </button>
    </form>

    <p class="wb-auth-footer">
      Don't have an account? <a href="/register">Sign up</a>
    </p>

  </div>
</div>

Settings Shell

Two-column layout for settings pages — a sticky left nav and a content area. Often used inside the dashboard shell's main content area.

<div class="wb-settings-shell">

  <!-- Left nav -->
  <nav class="wb-settings-nav">
    <a href="#profile"   class="wb-settings-nav-link is-active">Profile</a>
    <a href="#security"  class="wb-settings-nav-link">Security</a>
    <a href="#billing"   class="wb-settings-nav-link">Billing</a>
    <a href="#team"      class="wb-settings-nav-link">Team</a>
  </nav>

  <!-- Content -->
  <div class="wb-settings-body">

    <section class="wb-settings-section" id="profile">
      <h2 class="wb-settings-title">Profile</h2>
      <p class="wb-settings-desc">Manage your public profile information.</p>
      <!-- form fields -->
    </section>

    <section class="wb-settings-section" id="security">
      <h2 class="wb-settings-title">Security</h2>
      <p class="wb-settings-desc">Update your password and 2FA settings.</p>
      <!-- form fields -->
    </section>

  </div>
</div>

Content Shell

Single-column layout with a sticky header, scrollable body, and optional footer. Useful for detail pages, forms, and full-page editors inside the dashboard main area.

<div class="wb-content-shell">

  <div class="wb-content-header">
    <h2 class="wb-content-title">Edit user</h2>
    <div class="wb-content-actions">
      <button class="wb-btn wb-btn-ghost wb-btn-sm">Discard</button>
      <button class="wb-btn wb-btn-primary wb-btn-sm">Save changes</button>
    </div>
  </div>

  <div class="wb-content-body">
    <!-- form / content here -->
  </div>

  <div class="wb-content-footer">
    <!-- optional pagination / status -->
  </div>

</div>

Container & Section

Basic content-width constraint and vertical spacing helpers.

<!-- Constrain content width -->
<div class="wb-container">
  ...
</div>

<!-- Narrow content (forms, article) -->
<div class="wb-container-sm">
  ...
</div>

<!-- Vertical section spacing -->
<section class="wb-section">
  <div class="wb-container">
    ...
  </div>
</section>

<!-- Stack layout -->
<div class="wb-stack">
  <div class="wb-field">...</div>
  <div class="wb-field">...</div>
  <button class="wb-btn wb-btn-primary">Submit</button>
</div>

Navbar

Sticky top navigation bar. Can be used standalone (landing page) or as the topbar inside a dashboard shell.

<header class="wb-navbar">
  <!-- Brand -->
  <a href="/" class="wb-navbar-brand">My App</a>

  <!-- Nav links (hide on mobile with a responsive class) -->
  <nav class="wb-navbar-nav">
    <a href="#" class="wb-navbar-link is-active">Dashboard</a>
    <a href="#" class="wb-navbar-link">Reports</a>
    <a href="#" class="wb-navbar-link">Settings</a>
  </nav>

  <!-- Right side -->
  <div class="wb-navbar-end">
    <button class="docs-mode-btn" data-wb-mode-cycle>...</button>
    <div class="wb-dropdown">
      <button class="wb-avatar wb-avatar-sm" data-wb-toggle="dropdown">JD</button>
      <div class="wb-dropdown-menu">
        <a href="#" class="wb-dropdown-item">My profile</a>
        <a href="#" class="wb-dropdown-item">Settings</a>
        <div class="wb-dropdown-divider"></div>
        <a href="/logout" class="wb-dropdown-item wb-dropdown-item-danger">Sign out</a>
      </div>
    </div>
  </div>
</header>

Toolbar

Horizontal bar for page-level actions — typically placed between the page title and the content table.

<div class="wb-toolbar">
  <div class="wb-toolbar-start">
    <h2 class="wb-toolbar-title">Users <span class="wb-badge">248</span></h2>
  </div>
  <div class="wb-toolbar-end">
    <button class="wb-btn wb-btn-outline wb-btn-sm">Export</button>
    <button class="wb-btn wb-btn-primary wb-btn-sm">+ New user</button>
  </div>
</div>

<!-- Bulk action bar (shown when rows are selected) -->
<div class="wb-toolbar wb-toolbar-bulk">
  <span>3 selected</span>
  <button class="wb-btn wb-btn-danger wb-btn-sm">Delete selected</button>
</div>

Command Palette

Full-screen search/command overlay triggered by Cmd+K / Ctrl+K. Register it once; WebBlocks handles keyboard, search, and navigation.

<!-- HTML -->
<div class="wb-cmd-backdrop" id="my-cmd">
  <div class="wb-cmd-dialog">
    <div class="wb-cmd-header">
      <svg class="wb-cmd-search-icon">...</svg>
      <input type="text" class="wb-cmd-input" placeholder="Search or type a command…">
      <kbd class="wb-cmd-esc">Esc</kbd>
    </div>
    <div class="wb-cmd-results">
      <div class="wb-cmd-group">
        <div class="wb-cmd-group-label">Pages</div>
        <a href="/dashboard" class="wb-cmd-result">Dashboard</a>
        <a href="/users"     class="wb-cmd-result">Users</a>
        <a href="/settings"  class="wb-cmd-result">Settings</a>
      </div>
    </div>
  </div>
</div>

<!-- JS -->
<script>
WBCommandPalette.register('#my-cmd');
</script>

See the JavaScript API page for the full register() options including onSearch.