modus-navbar-side-navigation-solidjs

Modus Navbar + Side Navigation Integration

Critical patterns for integrating ModusNavbar with ModusSideNavigation in SolidJS applications.

Key Rules

• Use the ModusNavbar/ModusSideNavigation wrapper components - Never use raw web components directly
• Complex props (userCard, visibility) are set as JS properties - Wrapper handles this via onMount/createEffect
• Sync navbar hamburger with side navigation - Use separate signal state per demo section
• Menu item icons use the start-icon slot - Pass <i class="modus-icons" slot="start-icon">name</i> as a child, NOT as a prop

---

DO: Sync Navbar Hamburger with Side Navigation

Use signals to keep the hamburger menu and side navigation in sync.

const [expanded, setExpanded] = createSignal(false);
const [menuOpen, setMenuOpen] = createSignal(false);

const handleMainMenuOpenChange = (open: boolean) => {
  setMenuOpen(open);
  setExpanded(open);
};

const handleExpandedChange = (exp: boolean) => {
  setExpanded(exp);
  setMenuOpen(exp);
};

<ModusNavbar
  userCard={userCard}
  visibility={{ mainMenu: true, user: true }}
  mainMenuOpen={menuOpen()}
  onMainMenuOpenChange={handleMainMenuOpenChange}
  mainMenuContent={
    <ModusSideNavigation
      items={navItems}
      expanded={expanded()}
      targetContent="#content-id"
      onExpandedChange={handleExpandedChange}
      onItemSelect={(item) => setSelectedItem(item.value)}
    />
  }
/>

DON'T: Share state between multiple demo sections

Each navbar+sidenav pair needs its own independent signals.

// DON'T: Two sections sharing the same signal
const [expanded, setExpanded] = createSignal(false);

<Section1> // Uses expanded()
<Section2> // Also uses expanded() - they interfere!

// DO: Separate components with their own state
function Section1() {
  const [expanded, setExpanded] = createSignal(false);
  // ...
}
function Section2() {
  const [expanded, setExpanded] = createSignal(false);
  // ...
}

---

DO: Use Slot-Based Icons in Menu Items