Skip to main content

Universal Nav

The MLH Universal Navigation is a shared navigation bar that MLH properties embed so every site has a consistent top nav, sign-in state, and analytics. It's a web component (<mlh-universal-navigation>) you load from a CDN with a single script.

Install​

  1. Add the Universal Nav script to your page's <head> (served from static.mlh.io).
  2. Drop the component into your page where the nav should render: 
    <mlh-universal-navigation></mlh-universal-navigation>

Use it in a framework​

  • Plain HTML — add the script tag and the element as above.
  • React — render the <mlh-universal-navigation> custom element like any other element. (If you use TypeScript, add the provided global types so the element is recognized.)
  • Framer — embed it via a code/embed component.

Theming​

The nav can be styled to match your property through the accompanying theme package.

Analytics​

The nav includes a built-in Segment analytics integration, so page/nav events are tracked consistently across MLH properties.

:::info Maintainer note Add the exact CDN script URL, the component's configurable props/attributes, the TypeScript global-types import, and a minimal working snippet per framework from the ui repo's current README. :::