DEV Community

Cover image for BRC JS: Bootstrap Right-Click Navigation Menu (8.4 kB)
Joseba Mirena
Joseba Mirena

Posted on

BRC JS: Bootstrap Right-Click Navigation Menu (8.4 kB)

#showdev #opensource #frontend #javascript

BRC JS

Bootstrap Right-Click Navigation Menu

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>
Enter fullscreen mode Exit fullscreen mode

2. Basic initialization 

    <script>
        BootstrapRightClickNav.init();
    </script>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

6. CSS Customization 

    /* Override default colors */
    :root {
        --color-primary: #ff2c6e;    /* Active item background */
        --color-tertiary: #3498db;    /* Menu border */
    }
Enter fullscreen mode Exit fullscreen mode 
    /* Or customize via configuration */
    BootstrapRightClickNav.init({
        borderColor: '#00d4ff',
        activeColor: '#ff2c6e'
    });
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 
    // Or configure excluded elements
    BootstrapRightClickNav.init({
        excludeElements: ['input', 'textarea', '.no-menu', '#special-element']
    });
Enter fullscreen mode Exit fullscreen mode

🎯 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

Top comments (1)

Collapse
 
joseba-mirena profile image
Joseba Mirena • • Edited

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! 👽

Joseba Mirena - BRC JS

Joseba Mirena - BRC JS

BRC JS: Open Source Bootstrap Right-Click Navigati Menu

Check it out on Product Hunt →