Navbar Examples

Live examples and demonstrations

RSL Navbar Component

The RSL Navbar is a powerful, fully accessible navigation component with multi-level dropdown support, mobile hamburger menu, keyboard navigation, and automatic ARIA management. It integrates seamlessly with RSL's density modes and works flawlessly with sticky/fixed positioning.

New to RSL Navbar?

Get up and running in 3 minutes with our Quick Start Guide!

View Quick Start Guide
Key Features
• Multi-level Dropdowns: Support for nested menus up to 3+ levels deep
• Mega Menus: Rich, multi-column dropdowns with arbitrary HTML content and RSL grid layouts
• Mobile Hamburger: Automatic responsive menu with slide-out navigation
• Full Keyboard Support: Arrow keys, Tab, Enter, Escape, Home/End navigation
• ADA Compliant: Proper ARIA roles, labels, focus management, and screen reader support
• Fixed Z-Index: Always appears above other content (z-index: 10000+)
• Density Integration: Respects compact/standard/spacious density modes
• Theme Variants: Light, dark, and primary color themes built-in

Download RSL Example Pack

Basic Navbar with Multi-level Dropdowns

A standard navigation bar with nested dropdown menus. Try using keyboard navigation (Tab + Arrow keys) and resize your browser to see the mobile menu.

Navigation Features:
• Hover over "Products", "Resources", or "Solutions" to see menus (desktop only)
• "Solutions" is a mega menu with rich content layout
• Click "Products" → "Development" to see 3rd level nested menu
• Use Tab key to navigate, arrow keys to move through menus
• Resize browser below 768px to see mobile hamburger menu
• This navbar uses data-hover-dropdowns="true" for hover on desktop, click on mobile

Basic Navbar HTML • HTML

Mega Menu Dropdowns

Create rich, multi-column dropdowns with arbitrary HTML content using data-menu-type="mega". Mega menus support RSL's grid utilities, images, buttons, and custom layouts.

Mega Menu Example • HTML

                        
                        
  • 
                            
                                Solutions
                                
                            
                            
    
                                
    
                                    
    
                                        
    Column 1
    
                                        Link 1
                                        Description text
                                    
    
                                    
    
                                        
    Column 2
    
                                        Link 2
                                    
    
                                    
    
                                        
    
                                            
    Featured
    
                                            Special content
                                        
    
                                    
    
                                
    
                            
    
                        
    •

    Key Features:
    • Use data-menu-type="mega" on the navbar item
    • Use .rsl-navbar-mega-menu instead of .rsl-navbar-dropdown
    • Leverage RSL's .slot-layout for responsive columns
    • Add .mega-featured for highlighted sections
    • Use .mega-description for secondary text
    • Fully keyboard accessible with Tab navigation
    • Auto-positioning: Menus automatically adjust to stay within viewport (no horizontal scroll)

    Dark Theme Navbar (Logo Right)

    Apply the .dark-theme class for a dark color scheme. This example uses data-layout="logo-right" to position the logo on the right side with links on the left.

    The dark theme automatically adjusts all colors including hover states, borders, and shadows.

    Dark Theme • HTML

    Primary Colored Theme (Logo Center)

    Use .primary-theme for a branded navigation bar with the RSL primary color. This example uses data-layout="logo-center" to center the logo with links split evenly on both sides.

    Notice the centered logo with navigation links split evenly on both sides. JavaScript automatically divides the menu items.

    Positioning Classes • HTML

    JavaScript API

    Programmatically control dropdowns using the RSL.Navbar API.

    JavaScript API • JavaScript
    
// Initialize all navbars
RSL.Navbar.init();

// Open a specific dropdown
const menuItem = document.querySelector('.rsl-navbar-item');
RSL.Navbar.open(menuItem);

// Close a specific dropdown
RSL.Navbar.close(menuItem);

// Close all open dropdowns
RSL.Navbar.closeAll();

    CSS Classes & Attributes Quick Reference

    Class/Attribute Purpose
    .rsl-navbar Main navbar container
    .rsl-navbar-brand Logo/brand link
    .rsl-navbar-toggle Mobile hamburger button
    .rsl-navbar-menu Menu container (ul)
    .rsl-navbar-item Individual menu item (li)
    .rsl-navbar-link Menu link (a)
    .rsl-navbar-dropdown Dropdown menu (nested ul)
    .dark-theme Dark color theme
    .primary-theme Primary brand color theme
    .sticky-top Sticky position at top
    data-hover-dropdowns="true" Enable hover dropdowns on desktop (default: click-only)