RSL Navbar - Quick Start Guide

3-Minute Setup

1 Include Files (Add to `<head>`)

2 Include JavaScript (Add before `</body>`)

3 Add Basic Navbar to Your Page

✓ Done! The navbar will automatically initialize on page load with full keyboard navigation and mobile support.

Adding Dropdown Menus & Mega Menus

Single-Level Dropdown

Add aria-haspopup="true" to the parent link and nest a .rsl-navbar-dropdown list:

Multi-Level Nested Dropdown

Nest dropdowns within dropdowns for multi-level menus:



    
        Services
        
    
    
        
            
                Development
                
            
            
                
                    Frontend
                
                
                    Backend

Tip: Use fa-chevron-down for top-level dropdowns and fa-chevron-right for nested dropdowns.

Mega Menu Dropdown

Create rich, multi-column dropdowns with arbitrary HTML content. Perfect for complex navigation with images, descriptions, and custom layouts:



    
        Solutions
        
    
    
        
            
                For Business
                Enterprise
                Solutions for large organizations
            
            
                For Developers
                API Documentation
                Complete API reference
            
            
                
                    Featured
                    Special content

Mega Menu Requirements:
• Add data-menu-type="mega" to the .rsl-navbar-item
• Use .rsl-navbar-mega-menu instead of .rsl-navbar-dropdown
• Use RSL's .slot-layout for responsive columns
• Keyboard navigation: Use Tab to move through elements (Arrow keys not supported in mega menus)
• Automatic viewport detection: Menus auto-position to stay within viewport bounds

Mega Menu Helper Classes

.mega-section - Container for each column section
.mega-description - Secondary descriptive text
.mega-featured - Highlighted/featured content box
.full-width - Make mega menu full viewport width

Theme Variants

Dark Theme

Add .dark-theme for a dark background with light text:

Primary Theme

Add .primary-theme for a branded purple background:

Dropdown Behavior Options

Click vs Hover

Control how dropdowns open using the data-hover-dropdowns attribute:

Attribute	Behavior
No attribute (default)	Click-only mode: Dropdowns open only on click (all screen sizes)
`data-hover-dropdowns="true"`	Hover mode: Dropdowns open on hover for desktop (>768px), click for mobile

Recommendation: Use click-only mode (default) for better mobile experience and accessibility. Hover mode is provided for users who prefer traditional desktop navigation patterns.

Layout Options

Logo Positioning

Control the logo and menu positioning using the data-layout attribute:

Attribute	Layout
No attribute (default)	Logo left, menu links right
`data-layout="logo-right"`	Logo right, menu links left
`data-layout="logo-center"`	Logo center, menu links split left and right (automatically divided)



    Brand



    Brand
    
    
        
        
        Link 1
        Link 2
        Link 3
        Link 4

Logo Center: JavaScript automatically splits menu items in half. First half goes left, second half goes right. For 6 items, 3 will be on each side.

Positioning Options

Class	Behavior
`.sticky-top`	Sticks to top when scrolling
`.sticky-bottom`	Sticks to bottom when scrolling
`.fixed-top`	Always fixed at top
`.fixed-bottom`	Always fixed at bottom

Z-Index Management: The navbar uses z-index: 10100 for sticky/fixed positioning, ensuring it always appears above other content.

JavaScript API

Methods

Method	Description
`RSL.Navbar.init()`	Initialize all navbars (runs automatically on page load)
`RSL.Navbar.open(element)`	Open a specific dropdown menu item
`RSL.Navbar.close(element)`	Close a specific dropdown menu item
`RSL.Navbar.toggle(element)`	Toggle a dropdown menu item
`RSL.Navbar.closeAll()`	Close all open dropdowns


// Get a menu item
const menuItem = document.querySelector('.rsl-navbar-item');

// Open dropdown
RSL.Navbar.open(menuItem);

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

// Toggle dropdown
RSL.Navbar.toggle(menuItem);

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

Accessibility Features

Keyboard Navigation

Tab - Move focus between menu items (and within mega menus)
Arrow Keys - Navigate within regular dropdowns (not mega menus)
Enter / Space - Activate link or toggle dropdown/mega menu
Escape - Close dropdown/mega menu and return focus, or close mobile menu
Home / End - Jump to first/last item in regular dropdowns

Mobile Menu: When the mobile menu is open, the Tab key creates a focus trap (keeping focus within the menu and close button), and the Escape key closes the menu and returns focus to the previously focused element.

Mega Menus: Use Tab (not Arrow keys) to navigate through all focusable elements in mega menus. Arrow key navigation is reserved for simple list-based dropdowns.

ARIA Support

Automatic aria-expanded state management
Proper role="button" for dropdown triggers
Screen reader announcements for state changes
Focus trap in mobile menu

CSS Variables

Customize the navbar by overriding these CSS variables:

Variable	Default	Description
`--navbar-bg`	#ffffff	Background color
`--navbar-text`	#333333	Text color
`--navbar-hover-bg`	#f5f5f5	Hover background
`--navbar-active-bg`	#6E7BFF	Active item background
`--navbar-height`	60px	Navbar height
`--navbar-z-index`	10000	Base z-index


:root {
    --navbar-bg: #2c3e50;
    --navbar-text: #ecf0f1;
    --navbar-active-bg: #e74c3c;
}

Troubleshooting

Dropdowns not opening

Ensure navbar.js is loaded after the navbar HTML
Check browser console for JavaScript errors
Verify aria-haspopup="true" is on parent links

Mobile menu not working

Ensure the .rsl-navbar-toggle button is present
Check that viewport width is below 768px
Verify navbar.css is loaded

Z-index issues

Use .sticky-top or .fixed-top for elevated z-index (10100)
Regular navbars have z-index 10000
Adjust --navbar-z-index if conflicts occur

Mega menu overflowing viewport

The navbar automatically detects viewport overflow and repositions menus
If a mega menu would overflow the right edge, it aligns to the right
If it would overflow the left edge, it aligns to the left
This happens automatically on desktop (>768px) only
On mobile, menus use static positioning and stack vertically

Next Steps

See It In Action

Open navbar.html in your browser

Copy Examples

Use playground.html as a template

Fully Accessible

Complete keyboard navigation, ARIA support, and focus management built-in

Navbar