Menu widget

Drops a complete account menu onto your site — the member's profile, settings, privacy, sign-out, and a sign-in prompt for visitors. It's the same account drawer members get inside the Cobuntu app, so the two stay consistent automatically.

Quick start

Two lines. Add the mount where you want the menu, and the script once at the end of your page:

<!-- where the menu button should appear -->
<div data-cobuntu-menu data-tag="your-community"></div>
 
<!-- once, just before </body> -->
<script src="https://app.cobuntu.com/widgets/v1/menu.js" async></script>

That's it — it auto-detects whether the visitor is signed in and matches your brand colours automatically. data-tag is your community tag (the one in your Cobuntu admin URL).

What members see

When signed in, the menu lists:

• Account — Edit profile · Preferences · Privacy · Security
• Activity — Library · My events · My orders
• About — Help & support · Terms & Conditions · Privacy Policy
• Sign out

The Account rows open as editable forms right inside the menu (with a Back button) — no page jumps. The Activity and About rows link to the matching pages.

Two ways to use it

Pick standalone if you want a ready-made hamburger button. Pick inline if your site already has its own mobile menu/drawer and you just want to slot the Cobuntu account rows in below your own nav links (so you don't end up with two hamburger buttons):

<!-- inside your own mobile menu, under your nav links -->
<div data-cobuntu-menu data-mode="inline" data-tag="your-community"></div>

Inline borrows the surrounding text colour and font, so it blends into your menu out of the box.

The edit forms

Tapping Edit profile, Preferences, Privacy, or Security opens a form in place. Everything saves straight to the member's Cobuntu account — you don't write any backend code.

Validation happens as they type; a taken username even suggests alternatives.

Translating / renaming labels

Every label is overridable with a data-label-* attribute on the mount — handy for non-English sites or custom wording:

<div data-cobuntu-menu
     data-tag="your-community"
     data-label-signin="Entrar"
     data-label-signout="Sair"
     data-label-profile="Editar perfil"></div>

Styling

The menu reads your brand from the shared --cobuntu-* CSS variables — see Theming. The most common ones:

:root {
  --cobuntu-drawer-bg:   #0a0a0a;  /* panel background */
  --cobuntu-drawer-text: #f0f0f0;  /* panel text       */
  --cobuntu-accent:      #d4af37;  /* avatar + buttons  */
  --cobuntu-font:        "Inter", sans-serif;
}

Set those and the whole menu reskins to your brand. The drawer closes on the backdrop or the Esc key.

Attributes reference