/
132
Sponsor

Menu

Header With Logo And Menu rendered with email-safe, renderer-native components.

import { HeaderWithLogoAndMenu } from "@/components/email/header-with-logo-and-menu";
import { defaultTheme } from "@/components/email/theme-default";

export function HeaderWithLogoAndMenuDemo() {
  return <HeaderWithLogoAndMenu variant="menu-right" theme={defaultTheme} />;
}

Installation

$ pnpm dlx shadcn@latest add @emailcn/mjml-react/header-with-logo-and-menu

Usage

import { HeaderWithLogoAndMenu } from "@/components/email/header-with-logo-and-menu";
<HeaderWithLogoAndMenu variant="menu-right" />

Examples

Stacked

import { HeaderWithLogoAndMenu } from "@/components/email/header-with-logo-and-menu";

export function HeaderWithLogoAndMenuStackedDemo() {
  return <HeaderWithLogoAndMenu variant="stacked-center" />;
}
import { HeaderWithLogoAndMenu } from "@/components/email/header-with-logo-and-menu";

export function HeaderWithLogoAndMenuLeftDemo() {
  return <HeaderWithLogoAndMenu variant="menu-left" />;
}
import { HeaderWithLogoAndMenu } from "@/components/email/header-with-logo-and-menu";

export function HeaderWithLogoAndMenuAroundDemo() {
  return <HeaderWithLogoAndMenu variant="menu-around" />;
}

Stacked left

import { HeaderWithLogoAndMenu } from "@/components/email/header-with-logo-and-menu";

export function HeaderWithLogoAndMenuStackedLeftDemo() {
  return <HeaderWithLogoAndMenu variant="stacked-left" />;
}

Stacked right

import { HeaderWithLogoAndMenu } from "@/components/email/header-with-logo-and-menu";

export function HeaderWithLogoAndMenuStackedRightDemo() {
  return <HeaderWithLogoAndMenu variant="stacked-right" />;
}

API Reference

PropTypeDefaultDescription
themeEmailThemedefaultThemeRenderer theme configuration.
logoSrcstring"https://placehold.co/320x96/0F766E/FFFFFF.png?text=Maizzle%20Insignia"Configures the component's logosrc.
logoAltstring"Maizzle"Configures the component's logoalt.
logoHrefstring"https://example.com"Configures the component's logohref.
linksArray<{ href: string; label: string }>Built-in linksConfigures the component's links.
pageBackgroundColorstring"#f1f5f9"Configures the component's pagebackgroundcolor.
backgroundColorstring"#fffffe"Configures the component's backgroundcolor.
textColorstring"#6b7280"Configures the component's textcolor.
variant"menu-right" | "menu-left" | "menu-around" | "stacked-left" | "stacked-center" | "stacked-right""menu-right"Configures the component's variant.