Joseba Mirena - BRC JS
BRC JS: Open Source Bootstrap Right-Click Navigation Menu
3 followers
BRC JS: Open Source Bootstrap Right-Click Navigation Menu
3 followers
Bootstrap Right-Click Navigation Menu. Zero dependencies. Theme aware. A lightweight (9.6 kB), zero-dependency JavaScript module that adds a customizable right-click navigation menu to your Bootstrap website. The menu automatically syncs with your existing navbar structure, supports RTL languages, and respects your theme's CSS variables.
Features
🎯 No Code Duplication - Automatically builds menu from your existing Bootstrap navbar
🎨 Theme Aware - Uses Bootstrap CSS variables, supports custom color schemes
🌍 RTL Support - Full right-to-left language support
♿ Accessible - ARIA labels, keyboard navigation, screen reader friendly
🎭 Smart Positioning - Automatically positions menu where most space is available
🎨 Customizable - Easy to style with CSS variables or configuration options
⚡ Lightweight - No external dependencies, just 9.6 kB vanilla JavaScript
Perfect For
🖥️ Web applications (dashboards, admin panels)
📊 Data-heavy interfaces (quick navigation)
🎮 Game portals (context menus)
🛠️ Developer tools (power users expect right-click)
BRC v1.2.0 has full keyboard navigation and ARIA support baked in. Here's exactly how:
Keyboard Navigation ✅
Key
Action
↓ (Arrow Down)
Move focus to next menu item
↑ (Arrow Up)
Move focus to previous menu item
Enter / Space
Activate focused menu item
Esc
Close menu
The menu also:
Auto-focuses when opened
Returns focus to the previously focused element when closed
Supports circular navigation (arrow keys wrap around)
ARIA Attributes ✅
Element
ARIA Attributes
Menu container
role="menu", aria-label="Navigation menu", aria-hidden (toggles)
Menu items
role="menuitem"
Screen reader announcements
aria-hidden toggles when menu opens/closes
What This Means
User Type
Experience
Screen reader users
Menu is announced correctly, items are readable
Keyboard-only users
Full navigation without mouse
Mouse users
Standard right-click experience
Verified With
✅ NVDA (Windows)
✅ VoiceOver (macOS/iOS)
✅ ChromeVox
✅ Keyboard-only navigation
BRC is accessible to everyone, regardless of how they interact with your site. ♿
Would ❤️ to hear how BRC works for your projects. If you run into any issues or have feature requests, drop them here, open an issue on GitHub or reach me at my website. Let's build better tools together! 👽
Made with ❤️ by Joseba Mirena