Free Open Source Bootstrap Right Click Menu JS v1.0.0

A lightweight, 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.

Right-Click Menu. No Code Duplication. Just Bootstrap.

BRC JS automatically builds a right-click menu from your existing Bootstrap navbar. No need to duplicate navigation links—it reads your navbar structure and creates a context menu that matches your site's theme. Perfect for web apps, dashboards, and any Bootstrap site that needs power-user navigation.

Free Open Source Bootstrap Right Click Menu JS v1.0.0

Key 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.
Touch Optimized — Automatically detects and adapts for touch devices.
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 of vanilla JavaScript.

Installation

Important: If you're fetching the script from a remote location, include integrity and crossorigin="anonymous" to ensure security and prevent tampering.

<script 
  src="https://opensource.josebamirena.com/brc/1.0.0/dist/brc.min.js" 
  integrity="sha384-RDO0QvX/of2ScsQlFBKyx/cD77i8V5v2qPLLW9mm/HC2DBsP9WUmodRvI/d3qED9" 
  crossorigin="anonymous">
</script>

Basic Initialization

<script>
  BootstrapRightClickNav.init();
</script>

Custom Configuration

<script>
  BootstrapRightClickNav.init({
    minWidth: '250px',
    borderColor: 'var(--color-primary, #ff2c6e)',
    activeColor: 'var(--color-secondary, #2ecc71)',
    debug: true
  });
</script>

Configuration Options

Option	Type	Default	Description
enabled	boolean	true	Enable/disable the right-click menu functionality
injectCSS	boolean	true	Automatically inject required CSS styles
injectHTML	boolean	true	Automatically inject menu HTML structure
minWidth	string	'200px'	Minimum width of the menu
zIndex	number	10000	Z-index for menu stacking context
menuId	string	'bootstrap-rightclick-nav'	ID attribute for the menu element
excludeElements	array	['input', 'textarea', '[contenteditable="true"]']	Elements where right-click is disabled
debug	boolean	false	Enable console logging for debugging
navSelector	string	'.navbar-nav'	CSS selector to find your navigation element
borderColor	string	'var(--color-tertiary, var(--bs-primary))'	Menu border color
activeColor	string	'var(--color-primary, var(--bs-primary))'	Background color for active menu items

API Methods

Initialize — BootstrapRightClickNav.init(options);
Enable — BootstrapRightClickNav.enable();
Disable — BootstrapRightClickNav.disable();
Hide — BootstrapRightClickNav.hide();
Update — BootstrapRightClickNav.update(); (after dynamic nav changes)
Check Visibility — BootstrapRightClickNav.isVisible();
Update Config — BootstrapRightClickNav.setConfig({ minWidth: '300px' });
Destroy — BootstrapRightClickNav.destroy(); (removes events and elements)

CSS Customization

Override default colors via CSS variables:

:root {
  --color-primary: #ff2c6e; /* Active item background */
  --color-tertiary: #3498db; /* Menu border */
}

Disable on Specific Elements

Add the no-context-menu class to disable right-click:

<div class="no-context-menu">
  <!-- Right-click disabled here -->
</div>

Download Bootstrap Right Click Menu JS v1.0.0 Files

Important: Please do not fetch files directly from this website. Remote fetching is blocked for security and performance reasons.

Follow the instructions and use my opensource CDN.

brc.min.js— Minified JavaScript code
9.6 kB. CHECKSUM: a4a9249ef3a89dc618fcb40a2b80ea9c
brc.js— Source JavaScript code, unminified
16.1 kB. CHECKSUM: 15e2fe663e39554ef1f98ded83f36568
brc-1.0.0.zip— Complete package with docs & examples
10.9 kB. CHECKSUM: bb1a7b9e87b1966888e68e8be7588af4
README— MD format documentation
LICENSE— MIT license

All Freebies are open source under the MIT License. Free for personal and commercial use. A link back is appreciated but never required.

Free Tools: What to Know

If you need anything, don't hesitate to contact me—I'm always happy to help!

Do I need to sign up to use these tools?

No. Never. Not happening. There is no hidden 'cost'. These are genuinely free.

I don't ask for emails. I don't ask for signups. Click, copy, use. That's it. I built these for myself and I'm sharing them because sharing is how we all grow.

How should I host these tools?

You can download and host them yourself, or you can use my opensource CDN.

Please do not fetch files directly from this website—remote fetching is blocked for security and performance reasons.

What license are these tools under?

These are free, open source, and MIT licensed. Free for anything.

Personal use. Commercial use. Modify it. Sell it. Whatever works for you. All I ask? If you find it useful, a link back to this site is appreciated. But it's not required. Ever.

Can I modify the code?

Absolutely. It's yours now.

Take it. Modify it. Break it. Fix it. Use it in your projects. Share it with your friends. I built this to be useful, not to be protected. Just don't sell it as your own—that's not cool.

Will these tools be maintained?

Yes, I use them myself—you can see them on this website and across many client projects.

These tools aren't abandoned. I use them in my own apps, so they stay updated, tested, and working. If something breaks, I'll fix it—because I need it too. You can visit this page to stay updated with new versions and improvements.