Widget

Menu

Auto-emitted from DSKintsugiCatalog.menu. Tier molecule.

Live Preview
Surface

Dark

Default · tide-wave variant · gold accent on secondary hover
Σ Sigma Analytics

Hover any link or CTA to see the state transitions live. Click a nav link to flip its .active state — same scroll-spy contract that ships on obyw.one/c/sigma-analytics.

Surface

Light (light-nav)

Warm-pro variant · navy hover anchor on secondary · primary stays red
Σ Sigma Analytics

Same composition, the body modifier .light-nav flips the .ds-cta-secondary hover anchor from gold → navy. .ds-cta-secondary-red and .ds-cta-primary keep their red recipe.

Native · macOS
macOS SwiftUI render of Menu
DSL usage
// Cross-target (KatagamiCore ViewNode)
MenuDSL.body(
    brand: Brand(mark: "Σ", text: "Sigma Analytics"),
    links: [
        NavLink(href: "#", label: "Accueil", isActive: true),
        NavLink(href: "#modules", label: "Nos Modules"),
        NavLink(href: "#pricing", label: "Tarifs"),
    ],
    themeToggle: .secondaryRed(label: "Thème"),
    login: .secondary(href: "/app", label: "Connexion", icon: .login),
    primary: .primary(href: "#contact", label: "Demander une démo"),
    onLight: false
)

// Web emit (current sigma landing)
<header class="site-header">
  <div class="container">
    <a href="#" class="brand">Sigma Analytics</a>
    <nav class="nav">
      <a href="#" class="active">Accueil</a>
      ...
      <a class="ds-cta-btn ds-cta-secondary-red">Thème</a>
      <a class="ds-cta-btn ds-cta-secondary login-link">Connexion</a>
      <a class="ds-cta-btn ds-cta-primary">Demander une démo</a>
    </nav>
  </div>
</header>
Attributes
NameTypeDefaultDescription
brand Brand — Logo mark + text (e.g. "Σ" + "Sigma Analytics")
links [NavLink] [] Plain nav links. .active drives the underline / colour. scroll-spy auto-syncs via IntersectionObserver + hashchange.
themeToggle CTAButton? nil Optional secondary-red button that opens the theme picker panel.
login CTAButton? nil Optional secondary CTA (typically with leading icon). Gold halo on dark, navy on light.
primary CTAButton — Primary action CTA — "Demander une démo" / "Planifier une démo" / "Join Beta".
onLight Bool false When true, applies body.light-nav cascade. Secondary hover flips to navy anchor for legibility on cream.
mobileBreakpoint Int 720 Width (px) below which the nav collapses to a burger panel (button-driven, see nav-mobile.js).
Used in
sigma-analytics tide-wave sigma-analytics warm-pro shikki.io (W4 Pickup #6 follow-up) obyw-one