Widgets
Nav

Nav widget

Injects auth-gated nav items into your landing's existing <nav>. Reads your community's storefrontConfig.nav.items (the same config the Cobuntu community-app header uses), filters by the visitor's auth + membership state, and renders matching <a> tags.

Solves the common gap where a customer's landing has a static nav (e.g. Home / About / Pricing) but Cobuntu surfaces (Feed / Members / Atlas) need to appear only for ACCEPTED members.

Install

<!-- inside your existing nav, where the gated items should appear -->
<div data-cobuntu-nav
     data-tag="<community-tag>"
     data-cobuntu-nav-mode="gated"
     data-cobuntu-nav-link-class="my-nav-link"></div>
 
<!-- bottom of <body>, alongside the other widget scripts -->
<script src="/widgets/v1/nav.js" async></script>

The widget appends anchor children after the div hydrates. Your existing hardcoded links stay where they are; the widget fills in the auth-gated ones around them.

Two modes (data-cobuntu-nav-mode)

  • gated (default) — renders ONLY items whose visibleWhen is set ("authenticated" or "approvedMember"). Best when your landing already hardcodes the always-visible items (Home, About, etc.) and you want the widget to fill in the member-only links.
  • all — renders every item in storefrontConfig.nav.items. Pick this if you want Cobuntu to own the whole nav (then remove your hardcoded links to avoid duplicates).

Auth gates (matches the community-app's header exactly)

visibleWhen valueVisible to
"always" (or unset)Everyone
"authenticated"Any logged-in visitor (JWT present, not expired)
"approvedMember"Logged in and has status: "ACCEPTED" membership for this community

PENDING / REJECTED members do not see "approvedMember" items.

CSS variables

The injected anchors carry the same variable set the other widgets use, so theming you've already set on :root for cart/auth picks them up automatically:

  • --cobuntu-color — link text color
  • --cobuntu-hover-color — hover state
  • --cobuntu-padding — spacing per item
  • --cobuntu-font-weight — typography
  • --cobuntu-font-size
  • --cobuntu-letter-spacing
  • --cobuntu-text-transform

For absolute pixel parity with your existing nav links, pass your nav-link class string via data-cobuntu-nav-link-class="<cls>" — the widget applies it to every generated anchor.

Data attributes

AttributeValuesDefault
data-tagcommunity tag stringrequired
data-cobuntu-nav-modegated | allgated
data-cobuntu-nav-link-classCSS class stringnone

Refresh

The widget polls every 60s (paused while the tab is hidden) so a freshly-approved membership shows up without a page reload. Call window.CobuntuNav.refresh() manually if you've just changed something and want the nav to update immediately:

window.CobuntuNav = {
  refresh(): Promise<void>,
};

Versioning

v1 ships only flat NavLink items. NavGroup (dropdown) entries are skipped — customers keep those hardcoded. A future v2 may support dropdowns; will ship under /widgets/v2/nav.js.

SearchOverview