Learn how to create sidebar layouts with RSL's JSON Layout API
This example demonstrates a classic left sidebar layout rendered through the JSON API. The sidebar automatically positions on the left with the main content on the right.
// Create left sidebar layout using V2 API
const config = {
version: 2,
layoutId: "sidebar-demo-1",
breakpoints: { xs: 1 },
items: [{
id: "sidebar-item",
content: {
type: "sidebar",
position: "left",
sidebar: {
type: "html",
value: `
<div class="demo-sidebar-content">
<h3>Navigation</h3>
<ul>
<li>Dashboard</li>
<li>Users</li>
<li>Settings</li>
<li>Reports</li>
</ul>
</div>
`
},
main: {
type: "html",
value: `
<div class="demo-main-content">
<h2>Main Content Area</h2>
<p>This is the main content area with the sidebar on the left.</p>
<p>The sidebar component automatically handles the layout and positioning.</p>
</div>
`
}
}
}]
};
RSL.JSONLayout.renderLayout('#demo-output-1', config);This example shows a right sidebar layout where the sidebar appears on the right side with main content on the left. Perfect for auxiliary content, filters, or contextual information.
Important: For float-based right sidebars, the <aside> element must come before the <main> element in the HTML for proper positioning.
// Create right sidebar layout using V2 API
const config = {
version: 2,
layoutId: "sidebar-demo-2",
breakpoints: { xs: 1 },
items: [{
id: "sidebar-item",
content: {
type: "sidebar",
position: "right",
sidebar: {
type: "html",
value: `
<div class="demo-sidebar-content">
<h3>Related Info</h3>
<ul>
<li>Quick Links</li>
<li>Recent Posts</li>
<li>Categories</li>
<li>Tags</li>
</ul>
</div>
`
},
main: {
type: "html",
value: `
<div class="demo-main-content">
<h2>Article Content</h2>
<p>Main article content goes here with a sidebar on the right for related information.</p>
<p>This layout is commonly used for blog posts, documentation, and article pages.</p>
</div>
`
}
}
}]
};
RSL.JSONLayout.renderLayout('#demo-output-2', config);This example demonstrates a layout with sidebars on both left and right sides. Perfect for complex applications, dashboards, or content management systems.
Important: For dual sidebars, both <aside> elements must come before the <main> element in the HTML. Order: left sidebar, right sidebar, then main content.
// Create dual sidebar layout using V2 API
const config = {
version: 2,
layoutId: "sidebar-demo-3",
breakpoints: { xs: 1 },
items: [{
id: "sidebar-item",
content: {
type: "sidebar",
position: "both",
leftSidebar: {
type: "html",
value: `
<div class="demo-sidebar-content">
<h4>Left Nav</h4>
<ul>
<li>Home</li>
<li>Projects</li>
<li>Team</li>
</ul>
</div>
`
},
rightSidebar: {
type: "html",
value: `
<div class="demo-sidebar-content">
<h4>Tools</h4>
<ul>
<li>Search</li>
<li>Filters</li>
<li>Export</li>
</ul>
</div>
`
},
main: {
type: "html",
value: `
<div class="demo-main-content">
<h2>Dashboard</h2>
<p>Central content area with sidebars on both sides.</p>
<p>Ideal for complex applications and admin panels.</p>
</div>
`
}
}
}]
};
RSL.JSONLayout.renderLayout('#demo-output-3', config);This example shows a sidebar layout with an additional full-width section below the sidebar and main content. Perfect for footers, related content, or call-to-action sections.
// Create sidebar with below section using V2 API
const config = {
version: 2,
layoutId: "sidebar-demo-4",
breakpoints: { xs: 1 },
items: [{
id: "sidebar-item",
content: {
type: "sidebar",
position: "left",
sidebar: {
type: "html",
value: `
<div class="demo-sidebar-content">
<h4>Menu</h4>
<ul>
<li>Dashboard</li>
<li>Analytics</li>
<li>Settings</li>
</ul>
</div>
`
},
main: {
type: "html",
value: `
<div class="demo-main-content">
<h2>Content Area</h2>
<p>Main content with sidebar on left and a full-width section below.</p>
</div>
`
},
below: {
type: "html",
value: `
<div class="demo-below-content">
<strong>Full-Width Footer Section</strong>
<p>This section spans the full width below the sidebar layout.</p>
</div>
`
}
}
}]
};
RSL.JSONLayout.renderLayout('#demo-output-4', config);