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" />;
}Menu on the left
import { HeaderWithLogoAndMenu } from "@/components/email/header-with-logo-and-menu";
export function HeaderWithLogoAndMenuLeftDemo() {
return <HeaderWithLogoAndMenu variant="menu-left" />;
}Menu around the logo
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
| Prop | Type | Default | Description |
|---|---|---|---|
theme | EmailTheme | defaultTheme | Renderer theme configuration. |
logoSrc | string | "https://placehold.co/320x96/0F766E/FFFFFF.png?text=Maizzle%20Insignia" | Configures the component's logosrc. |
logoAlt | string | "Maizzle" | Configures the component's logoalt. |
logoHref | string | "https://example.com" | Configures the component's logohref. |
links | Array<{ href: string; label: string }> | Built-in links | Configures the component's links. |
pageBackgroundColor | string | "#f1f5f9" | Configures the component's pagebackgroundcolor. |
backgroundColor | string | "#fffffe" | Configures the component's backgroundcolor. |
textColor | string | "#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. |