Sidebar - Quick Start Guide

Create magazine-style layouts with floating sidebars

Back to Examples

What are Sidebar Layouts?

RSL Sidebar layouts use classic float behavior to create magazine-style pages where:

3-Minute Setup

1 Include Files

Required Files • HTML

2 Create Sidebar Layout

Right Sidebar • HTML



    

    

        
Main Content

        
This flows beside the sidebar...

    


    

        
Full Width Content

        
This appears below sidebar at full width...
✓ Done! You have a magazine-style layout with a floating sidebar.

Quick Reference

ClassPurpose
.sidebar-wrapperContainer for sidebar layout
.sidebarBase sidebar element
.sidebar-leftFloat sidebar to left
.sidebar-rightFloat sidebar to right
.content-blockContent sections that flow around sidebar

JSON Layout API Integration

The Sidebar component is fully compatible with RSL's JSON Layout API, enabling declarative sidebar layouts through JavaScript configuration. Sidebars automatically initialize after rendering via RSL.JSONLayout.renderLayout().

✅ Automatic Initialization: When you render a layout containing .rsl-sidebar-auto elements using the JSON API, the sidebar layouts automatically initialize without manual setup.
Basic JSON API Example • JavaScript

// Create left sidebar layout
const sidebarHTML = `
  <div class="rsl-sidebar-auto" data-sidebar="left">
    <aside data-sidebar-slot="sidebar">
      <h3>Navigation</h3>
      <ul>
        <li>Dashboard</li>
        <li>Users</li>
        <li>Settings</li>
      </ul>
    </aside>
    <main data-sidebar-slot="main">
      <h2>Main Content</h2>
      <p>Content goes here...</p>
    </main>
  </div>
`;

// Render via JSON API - sidebar auto-initializes!
const config = {
  version: 1,
  layoutId: "sidebar-layout",
  breakpoints: { xs: 1 },
  items: [{
    id: "sidebar-item",
    content: { type: "html", value: sidebarHTML }
  }]
};

RSL.JSONLayout.renderLayout('#container', config);
// Sidebar is now active - no manual init() needed!
📚 Want More Examples? Check out the Sidebar JSON API Examples page for:
  • Left sidebar layout
  • Right sidebar layout
  • Dual sidebar layout (both left and right)
  • Sidebar with full-width section below

Public API Methods

Method Description
RSL.Sidebar.init() Scan and initialize all sidebar layouts (auto-called by JSON API)
RSL.Sidebar.create(container) Manually create sidebar layout for specific container
RSL.Sidebar.instances Map of initialized sidebar instances

Pro Tips

✨ Tip 1: Use right sidebars for Western layouts (reads left-to-right)
✨ Tip 2: First content block flows beside sidebar; second block goes full-width below
✨ Tip 3: Perfect for blog layouts with related articles in sidebar
✨ Tip 4: Sidebar collapses to full-width on mobile automatically

ADA Compliance

Sidebar layouts are accessibility-friendly:

  • ✅ Semantic HTML with <aside> for sidebar content
  • ✅ Responsive on all devices
  • ✅ Natural reading order preserved
Back to Examples