Documentation

RightClickLogo is a hosted async script plus a small inline config. No build step, no account.

Install

Add the two scripts to your site’s global layout, then add data-rcl-logo to your logo element.

<script>
  window.RightClickLogo = {
    brand: { name: 'Acme', url: 'https://acme.com' },
    logo: { selector: '[data-rcl-logo]' },
    items: [
      { type: 'copy-svg', label: 'Copy logo SVG', svg: '<svg …>…</svg>' },
      { type: 'download', label: 'Download PNG', src: '/logo@2x.png' },
      { type: 'link', label: 'Brand guidelines', href: '/brand' },
    ],
  };
</script>
<script async src="https://cdn.rightclicklogo.com/v1/rcl.js"></script>

The easiest path is the generator — it writes this for you and previews it live.

Configure

The config is one object: brand, logo, and an ordered list of items. Item types: copy-svg, download, copy-text, link, label, and separator. See the full schema in the repo’s docs/data-model.md.

The logo selector

Add data-rcl-logo to your logo and the menu attaches regardless of class-name changes. If you omit the selector, RightClickLogo tries a sensible list of common logo patterns. Use scope: 'all' to attach to every match (e.g. header and footer), or the default 'first' for the header only.

Self-host

Prefer not to depend on our CDN? The widget is a single zero-dependency file. Host rcl.js on your own domain and point the script src at it. Everything else is identical.

Accessibility

The menu uses proper ARIA menu semantics with full keyboard support: open with the Menu key or Shift+F10 while the logo is focused, arrow keys and Home/End to move, Enter to activate, Escape to close (focus returns to the logo). It respects prefers-reduced-motion. On touch, press and hold the logo.

Strict CSP

If your Content-Security-Policy disallows inline scripts, use the JSON config form (no inline JS execution required) and allow the script host in script-src.

<script type="application/json" id="rcl-config">
  { "version": 1, "brand": { "name": "Acme" }, "logo": {}, "items": [] }
</script>
<script async src="https://cdn.rightclicklogo.com/v1/rcl.js"></script>