DEV Community: Joseba Mirena

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.

Perfect For

🖥️ Web applications (dashboards, admin panels)
📊 Data-heavy interfaces (quick navigation)
🎮 Game portals (context menus)
🛠️ Developer tools (power users expect right-click)

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 vanilla JavaScript

Installation

1. Include the Script

    <script src="https://opensource.josebamirena.com/brc/1.2.0/dist/brc.min.js" 
        integrity="sha384-r4ggKTIXd3DPzFbIYSuzBdCgP7MWtEL0UdsDfoFXh3TKfssRNVxgCpb6F6pxy9yH" 
        crossorigin="anonymous">
    </script>

2. Basic initialization

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

3. Initialization with custom options

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

4. 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 (can be any CSS width value)
`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 (supports CSS selectors)
`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 (CSS color value)
`activeColor`	string	`'var(--color-primary, var(--bs-primary))'`	Background color for active menu items

5. API Methods

    <script>
        // Initialize the menu
        BootstrapRightClickNav.init(options);

        // Enable the menu
        BootstrapRightClickNav.enable();

        // Disable the menu
        BootstrapRightClickNav.disable();

        // Hide the menu if visible
        BootstrapRightClickNav.hide();

        // Update menu content (useful after dynamic nav changes)
        BootstrapRightClickNav.update();

        // Check if menu is visible
        const isVisible = BootstrapRightClickNav.isVisible();

        // Update configuration
        BootstrapRightClickNav.setConfig({ minWidth: '300px' });

        // Completely destroy the menu (removes events and elements)
        BootstrapRightClickNav.destroy();
    </script>

6. CSS Customization

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

    /* Or customize via configuration */
    BootstrapRightClickNav.init({
        borderColor: '#00d4ff',
        activeColor: '#ff2c6e'
    });

7. Disable on Specific Elements

    <!-- Add this class to elements where you want to disable right-click -->
    <div class="no-context-menu">
        <!-- Right-click disabled here -->
    </div>

    // Or configure excluded elements
    BootstrapRightClickNav.init({
        excludeElements: ['input', 'textarea', '.no-menu', '#special-element']
    });

🎯 Live Demo

Try BRC JS live on my website:

👉 BRC JS Demo

Right-click anywhere on this website (except on the cookie modal) to see the menu in action.

Made with ❤️ by Joseba Mirena

"If you found this helpful, hit the ❤️ and share it with another developer who's tired of bloated cookie consent scripts!"

Joseba Mirena — Sun, 29 Mar 2026 07:18:41 +0000

Joseba Mirena

Mar 29

Cookie Guard JS: The GDPR/CCPA Consent Manager (No Dependencies, 12.8 kB, 22 Languages)

#showdev #javascript #opensource #privacy

Comments 5

3 min read

Cookie Guard JS: The GDPR/CCPA Consent Manager (No Dependencies, 12.8 kB, 22 Languages)

Joseba Mirena — Sun, 29 Mar 2026 05:30:53 +0000

Cookie Guard 🛡️

GDPR/CCPA compliance Cookies Consent Management.

Package: Cookie Guard JS
Version: v3.0.0
Copyright: 2026 JosebaMirena.com
License: MIT License
Author: Joseba Mirena (@joseba-mirena)

A GDPR/CCPA 2026 compliance, simple and customizable Cookies Management system.

MAIN FEATURES

Legal Compliance: Fully GDPR/CCPA compliant workflow (2026 standards).
Hybrid Modes: Supports both full third-party consent and "no-cookies" informational mode.
Smart Execution: Auto-activates Analytics/Marketing scripts (handles type="text/plain").
Zero Dependencies: Pure Vanilla JavaScript; no jQuery or external libraries required.
Privacy Focus: Optional persistent "Privacy" floating button to re-open settings.
Legal Terms: Optional acceptance and Legal URL smart handling.
Global Reach: Support for 22 languages (LTR & RTL) with automatic browser detection.
- Locales: en, es, ca, eu, gl, et, ar, pt, pl, vi, fr, de, it, ru, zh, ja, id, ko, tr, nl, hi, bn.
Performance: Ultra-lightweight architecture (~12.8 kB minified).
Accessibility: Implements ARIA standards for screen readers.
Encapsulation: Built within an IIFE to ensure no global namespace pollution.
UI/UX: Dynamic CSS/HTML injection with a fully responsive, mobile-first design.
Customization: Flexible configuration for expiration, link colors, and button border-radius.
Developer API: Public toggle, open, and reset methods for external control.

📦 Installation

Add the minified version before the closing </body> tag:

<script 
    src="https://opensource.josebamirena.com/cookie-guard/3.0.0/dist/cookie-guard.min.js" 
    integrity="sha384-4TomZ6aXKNjC0fGi+v+GQTBp9kmS006nQ3SriGo6U0a93lhADVwmw8toL8JQW4vB" 
    crossorigin="anonymous">
</script>

⚙️ Configuration

Cookie Guard default Initialization

<script>
    document.addEventListener('DOMContentLoaded', () => CookieGuard.init());
</script>

Initialization default variables and values

Property	Type	Default	Description
locale	string	auto	'auto' or 2-letter language ISO code.
consent	boolean	true	true for 3rd party scripts, false for info-only banner.
url	string	null	Relative URL to your legal/cookies policy page.
reopen	boolean	true	Renders the floating privacy button.
radius	integer	12	Buttons border-radius in pixels.
delay	integer	800	Modal entrance delay in milliseconds.
link	string	#3b82f6	Primary link color.
hover	string	#10b981	Link hover color.
separator	string	•	Modal footer links separator
expiration	integer	365	Consent cookie expiration in days.

<script>
    const defaults = {
        locale: 'auto', // @string 'auto' or 2-letter ISO code.
        consent: true, // @bool true for 3rd party scripts, false for info-only banner.
        url: null, // @null|string Relative URL to your legal/cookies policy page.
        reopen: true, // @bool Renders the floating privacy button.
        radius: 12, // @int Buttons border-radius in pixels.
        delay: 800, // @int Modal entrance delay in milliseconds.
        link: "#3b82f6", // @string Primary link color.
        hover: "#10b981", // @string Link hover color.
        separator: "•", // @string Modal footer links separator
        expiration: 365, // @int Consent cookie expiration in days.
    };
</script>

Cookie Guard Customized Example

<script>
    document.addEventListener('DOMContentLoaded', () => 
        CookieGuard.init({
            locale: 'en', // fixed language
            url: "/legal", // legal relative url
            link: "#ff0000", // red links
            radius: 8, // buttoms radius
        })
    );
</script>

Cookie Guard non third party cookies mode

<script>
    document.addEventListener('DOMContentLoaded', () => 
        CookieGuard.init({
            locale: 'auto', // auto detect language
            consent: false, // no third party cookies mode
        })
    );
</script>

🛠️ Script Implementation

To let Cookie Guard manage your scripts, add the type attribute text/plain and add the data-cg-category attribute (analytics|marketing):

Test script example

<script 
    type="text/plain" 
    data-cg-category="analytics">
    console.log('Analytics script executed');
</script>

Analytics script example

<script 
    type="text/plain" 
    data-cg-category="analytics" 
    src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXX-Y">
</script>

Marketing script example

<script type="text/plain" data-cg-category="marketing">
    console.log("Facebook pixel is legally enabled.");
    fbq('init', '123456789');
    fbq('track', 'PageView');
</script>

🕹️ Developer API

Toggle Modal

<a href="javascript:void(0)" onclick="CookieGuard.toggle()">Privacy</a>

Force Open

<a href="javascript:void(0)" onclick="CookieGuard.open()">Open Privacy</a>

Hard Reset:

Debug Shortcut: CTRL + SHIFT + X to reset state instantly.

<a href="javascript:void(0)" onclick="CookieGuard.reset()">Reset Privacy</a>

🎯 Live Demo

Try Cookie Guard live on my website:

👉 Cookie Guard Demo

See how it handles consent, 22 languages, and third-party script blocking in action.

Made with ❤️ by Joseba Mirena