Responsive navigation using V2 semantic content types with dropdown menus, mega menus, keyboard navigation, and mobile support
A simple navigation bar using V2 semantic navbar content type. Define brand and menu items as JSON objects - no HTML strings required!
const config = {
version: 2,
layoutId: "navbar-demo-1",
breakpoints: { xs: 1 },
items: [{
content: {
type: "navbar",
brand: {
text: "My App",
href: "#"
},
menuItems: [
{ text: "Home", href: "#", active: true },
{ text: "About", href: "#" },
{ text: "Contact", href: "#" }
]
}
}]
};
RSL.JSONLayout.renderLayout('#demo1-output', config);Navigation bar with dropdown menus defined as JSON arrays. Features dark theme, icons, logo-right layout, and automatic ARIA compliance.
const config = {
version: 2,
layoutId: "navbar-demo-2",
breakpoints: { xs: 1 },
items: [{
content: {
type: "navbar",
layout: "logo-right",
theme: "dark",
brand: {
text: "Dashboard",
href: "#",
icon: "fas fa-moon"
},
menuItems: [
{
text: "Dashboard",
href: "#",
icon: "fas fa-home",
active: true
},
{
text: "Settings",
href: "#",
icon: "fas fa-cog",
dropdown: [
{ text: "Profile", href: "#", icon: "fas fa-user" },
{ text: "Preferences", href: "#", icon: "fas fa-sliders-h" },
{ text: "Security", href: "#", icon: "fas fa-shield-alt" }
]
},
{ text: "Notifications", href: "#", icon: "fas fa-bell" },
{ text: "Account", href: "#", icon: "fas fa-user-circle" }
]
}
}]
};
RSL.JSONLayout.renderLayout('#demo2-output', config);Navigation bar with logo centered between menu items using V2 API. Simply set layout: "logo-center" in your JSON configuration!
const config = {
version: 2,
layoutId: "navbar-demo-3",
breakpoints: { xs: 1 },
items: [{
content: {
type: "navbar",
layout: "logo-center",
brand: {
text: "Centered Logo",
href: "#",
icon: "fas fa-rocket"
},
menuItems: [
{ text: "Features", href: "#" },
{ text: "Solutions", href: "#" },
{ text: "Enterprise", href: "#" },
{ text: "Support", href: "#" },
{ text: "Sign In", href: "#" },
{ text: "Get Started", href: "#", active: true }
]
}
}]
};
RSL.JSONLayout.renderLayout('#demo3-output', config);
// Available layouts:
// layout: "default" (logo left - default)
// layout: "logo-right" (logo on right)
// layout: "logo-center" (logo centered, JS automatically splits menu items)Navigation bar featuring a mega menu with rich multi-column content using V2 API. Define mega menu columns as JSON arrays with sections, items, and featured content. Hover dropdowns automatically enabled!
const config = {
version: 2,
layoutId: "navbar-demo-4",
breakpoints: { xs: 1 },
items: [{
content: {
type: "navbar",
hoverDropdowns: true,
brand: {
text: "Company",
href: "#",
icon: "fas fa-layer-group"
},
menuItems: [
{ text: "Home", href: "#", active: true },
{
text: "Products",
href: "#",
dropdown: [
{ text: "Web Design", href: "#" },
{ text: "Mobile Apps", href: "#" },
{ text: "Consulting", href: "#" }
]
},
{
text: "Solutions",
href: "#",
megaMenu: {
columns: [
{
title: "For Business",
icon: "fas fa-building",
items: [
{ text: "Enterprise", href: "#", icon: "fas fa-users", description: "Solutions for large organizations" },
{ text: "Analytics", href: "#", icon: "fas fa-chart-line", description: "Data-driven insights" },
{ text: "Security", href: "#", icon: "fas fa-shield-alt", description: "Enterprise-grade protection" }
]
},
{
title: "For Developers",
icon: "fas fa-code",
items: [
{ text: "API Documentation", href: "#", icon: "fas fa-book", description: "Complete API reference" },
{ text: "CLI Tools", href: "#", icon: "fas fa-terminal", description: "Command-line interface" },
{ text: "Integrations", href: "#", icon: "fas fa-plug", description: "Connect your tools" }
]
},
{
title: "Featured",
icon: "fas fa-star",
featured: {
text: "New: RSL Navbar 2.0",
href: "#",
strong: true,
description: "Multi-level dropdowns, mega menus, and full accessibility support"
}
}
]
}
},
{ text: "Pricing", href: "#" },
{ text: "Contact", href: "#" }
]
}
}]
};
RSL.JSONLayout.renderLayout('#demo4-output', config);Make your JSON-rendered navbar stay at the top of the page when scrolling. This example shows the required CSS and container setup for fixed positioning.
💡 Tip: When rendering a navbar with the JSON Layout API, use a dedicated container with position: fixed and add padding-top to the body to prevent content from hiding under the navbar.
<!-- Navigation Container for JSON Rendering -->
<div id="navigation-container"></div>
<!-- Your page content -->
<div class="container">
<h1>Page Content</h1>
<p>Content will scroll under the fixed navbar...</p>
</div>/* Fixed navbar positioning - more reliable than sticky */
#navigation-container {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 1000;
margin: 0;
padding: 0;
}
/* Add padding to body to account for fixed navbar height */
body {
padding-top: 70px; /* Adjust based on your navbar height */
}
/* Ensure navbar takes full width */
#navigation-container .rsl-navbar {
width: 100%;
position: relative;
}// Navigation JSON configuration
const navigationConfig = {
version: 1,
layoutId: "main-navigation",
breakpoints: { xs: 1 },
items: [{
id: "navbar",
content: {
type: "html",
value: `
<nav class="rsl-navbar sticky-top" aria-label="Main navigation">
<a href="index.html" class="rsl-navbar-brand">
<img src="images/logo.png" alt="Logo" style="height: 40px;">
</a>
<button class="rsl-navbar-toggle" aria-label="Toggle navigation">
<span></span>
<span></span>
<span></span>
</button>
<ul class="rsl-navbar-menu">
<li class="rsl-navbar-item">
<a href="#" class="rsl-navbar-link">Home</a>
</li>
<li class="rsl-navbar-item">
<a href="#" class="rsl-navbar-link">
Products
<i class="fas fa-chevron-down dropdown-icon"></i>
</a>
<ul class="rsl-navbar-dropdown">
<li class="rsl-navbar-item">
<a href="#" class="rsl-navbar-link">Product A</a>
</li>
<li class="rsl-navbar-item">
<a href="#" class="rsl-navbar-link">Product B</a>
</li>
</ul>
</li>
<li class="rsl-navbar-item">
<a href="#" class="rsl-navbar-link">Contact</a>
</li>
</ul>
</nav>
`
}
}]
};
// Custom rendering function to avoid slot-layout wrapper
function loadNavigation(containerId, layoutData) {
const container = document.getElementById(containerId);
// Render HTML directly without grid wrapper
if (layoutData.items && layoutData.items[0]) {
container.innerHTML = layoutData.items[0].content.value;
// Initialize navbar after rendering
setTimeout(() => {
if (window.RSL && window.RSL.Navbar && window.RSL.Navbar.init) {
window.RSL.Navbar.init();
}
}, 0);
}
}
// Load the navigation
loadNavigation('navigation-container', navigationConfig);⚠️ Why Fixed Instead of Sticky?
Fixed positioning (position: fixed) is more reliable than sticky positioning when rendering navbars via JSON API. Sticky positioning can fail if ancestor elements have overflow properties or certain CSS constraints. Fixed positioning works consistently across all scenarios.
💡 New Feature: Direct Render Mode
RSL now supports renderMode: "direct" in wrapper configuration! This skips the slot-layout wrapper and gives you full control over the structure. Perfect for navbars, footers, and custom sections. Learn more about wrapper render modes →