Navbar-Synced Context Menu for Bootstrap 5 – BRC JS
It queries the .navbar-nav element at runtime, extracts top-level links and dropdown children, and renders them into a floating panel.
The plugin resolves panel position based on available space in the viewport and reads Bootstrap’s CSS variable stack for automatic theme compatibility.
1. Download and load the BRC JS in your Bootstrap project.
<!-- Bootstrap CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css"> <!-- Bootstrap JS Bundle --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/js/bootstrap.bundle.min.js"></script> <!-- BRC JS – load after Bootstrap --> <script src="/dist/brc.js"></script>
2. Call BootstrapRightClickNav.init() and the plugin locates your .navbar-nav element, builds the menu structure, and registers the right-click listener on the document.
BootstrapRightClickNav.init();
3. Pass a configuration object to init() to adjust the context menu’s width, border color, or active item highlight. All available options:
enabled (boolean): Activates or deactivates the right-click menu globally. Default: true.injectCSS (boolean): Injects the required stylesheet into the document <head> on startup. Default: true.injectHTML (boolean): Appends the menu <div> to the document <body> on startup. Default: true.minWidth (string): Sets the minimum width of the menu panel. Accepts any valid CSS width value. Default: '200px'.zIndex (number): Controls the stacking order of the menu panel. Default: 10000.menuId (string): Sets the id attribute on the generated menu element. Default: 'bootstrap-rightclick-nav'.excludeElements (array): Lists CSS selectors for elements where the library suppresses the right-click menu. Default: ['input', 'textarea', '[>.debug (boolean): Activates console logging for initialization status and event tracking. Default: false.navSelector (string): The CSS selector the library uses to locate your Bootstrap navbar container. Default: '.navbar-nav'.borderColor (string): The border color of the menu panel. Accepts any CSS color value. Default: 'var(--color-tertiary, var(--bs-primary))'.activeColor (string): The background color applied to active menu items. Accepts any CSS color value. Default: 'var(--color-primary, var(--bs-primary))'.BootstrapRightClickNav.init({
minWidth: '260px',
borderColor: '#0d6efd',
activeColor: '#198754',
// more options here
}); 4. API methods.
// Re-enable the menu after it has been programmatically disabled.
BootstrapRightClickNav.enable();
// Disable the menu and hide the panel if it is currently visible.
BootstrapRightClickNav.disable();
// Hide the menu panel programmatically without disabling future right-click events.
BootstrapRightClickNav.hide();
// Rebuild the menu content from the current navbar DOM state.
// Call this after your navbar updates dynamically (e.g., after an AJAX load).
BootstrapRightClickNav.update();
// Returns true when the menu panel is open, false when it is closed.
const isMenuOpen = BootstrapRightClickNav.isVisible();
if (isMenuOpen) {
console.log('The context menu is currently open.');
}
// Update one or more configuration values after initialization.
// Changes take effect on the next right-click event.
BootstrapRightClickNav.setConfig({ borderColor: '#6f42c1', minWidth: '300px' });
// Remove all event listeners and DOM elements created by the library.
// Use this before re-initializing or detaching a section of your SPA.
BootstrapRightClickNav.destroy(); 5. The context menu panel reads from CSS custom properties at render time. Override --color-primary and --color-tertiary in your :root block to apply global theme colors:
:root {
/* Background color for the active menu item */ --color-primary: #0d6efd;
/* Border color for the menu panel */ --color-tertiary: #adb5bd;
} 6. Add a class to any container where you want native right-click behavior to remain active, then reference it in excludeElements:
<div class="article-editor no-context-menu"> <textarea placeholder="Paste your draft here..."></textarea> </div>
BootstrapRightClickNav.init({
excludeElements: ['input', 'textarea', '.no-context-menu', '#code-editor']
}); The post Navbar-Synced Context Menu for Bootstrap 5 – BRC JS appeared first on CSS Script.
A newly disclosed security vulnerability in Microsoft Teams could allow attackers to spoof local devices,…
A critical security flaw has been discovered in SandboxJS, a widely used JavaScript sandboxing library…
Email filters are important, but they can’t remove phishing risk on their own. Today’s campaigns are built to…
Foxconn has officially confirmed a cyberattack targeting its North American operations after the Nitrogen ransomware…
INDIANAPOLIS (AP) — Reserved seating for this year’s Indianapolis 500, the world’s largest single-day sporting…
INDIANAPOLIS (AP) — Reserved seating for this year’s Indianapolis 500, the world’s largest single-day sporting…
This website uses cookies.