modus-navbar-side-navigation-react

Modus Navbar + Side Navigation Integration

Critical patterns for integrating ModusWcNavbar with ModusWcSideNavigation in React applications.

Key Rules

• Use the ModusNavbar wrapper component - Never use ModusWcNavbar directly
• Pass props as native React objects - Wrapper handles serialization
• Sync navbar hamburger menu with side navigation - Use onMainMenuOpenChange callback
• Position side navigation absolutely - Required for proper layering
• Set explicit z-index - Ensure side navigation renders above content

---

DO: Use ModusNavbar Wrapper Component

The ModusNavbar wrapper component handles prop serialization and event binding correctly.

// DO: Use the wrapper component
import ModusNavbar from "../../components/ModusNavbar";

<ModusNavbar
  userCard={userCard}
  visibility={{ mainMenu: true, user: true }}
  onMainMenuOpenChange={handleNavbarMenuOpenChange}
/>;

DON'T: Use ModusWcNavbar Directly

Direct usage causes prop serialization issues.

// DON'T: Direct usage won't work properly
import { ModusWcNavbar } from "@trimble-oss/moduswebcomponents-react";

<ModusWcNavbar
  user-card={JSON.stringify(userCard)} // Won't work!
  visibility={JSON.stringify({ mainMenu: true })} // Won't work!
/>;

---

DO: Sync Navbar with Side Navigation via Ref

Use a ref to directly set the expanded property on the side navigation.

const [navbarMenuExpanded, setNavbarMenuExpanded] = useState(false);
const sideNavRef = useRef<any>(null);

const handleNavbarMenuOpenChange = useCallback((isOpen: boolean) => {
  setNavbarMenuExpanded(isOpen);

  // Directly set expanded property on the web component
  const sideNav = sideNavRef.current;
  if (sideNav) {
    sideNav.expanded = isOpen;
  }
}, []);

<ModusNavbar
  onMainMenuOpenChange={handleNavbarMenuOpenChange}
/>

<ModusWcSideNavigation
  ref={sideNavRef}
  expanded={navbarMenuExpanded}
/>

DON'T: Rely Only on React State

React state alone won't trigger the web component to expand.