import { NavigationFooter } from "@/components/email/navigation-footer";
import { defaultTheme } from "@/components/email/theme-default";
export function NavigationFooterDemo() {
return (
<NavigationFooter
columns={2}
alignment="left"
logoPosition="left"
theme={{ ...defaultTheme, containerWidth: "640px" }}
/>
);
}Installation
$ pnpm dlx shadcn@latest add @emailcn/react-email/navigation-footer
Usage
import { NavigationFooter } from "@/components/email/navigation-footer";<NavigationFooter
columns={2}
alignment="left"
logoPosition="left"
divider={false}
/>Examples
Footer centered with menu and socials
default
import { NavigationFooter } from "@/components/email/navigation-footer";
export function NavigationFooterColumns1AlignmentCenterExampleDemo() {
return <NavigationFooter columns={1} alignment="center" />;
}Footer with 2-column menu
left logo
import { NavigationFooter } from "@/components/email/navigation-footer";
export function NavigationFooterColumns2AlignmentLeftLogoPositionLeftDividerFalseExampleDemo() {
return (
<NavigationFooter
columns={2}
alignment="left"
logoPosition="left"
divider={false}
/>
);
}right logo
import { NavigationFooter } from "@/components/email/navigation-footer";
export function NavigationFooterColumns2LogoPositionRightExampleDemo() {
return <NavigationFooter columns={2} logoPosition="right" />;
}Footer with 2-column menu and divider
left logo
import { NavigationFooter } from "@/components/email/navigation-footer";
export function NavigationFooterColumns2LogoPositionLeftDividerExampleDemo() {
return <NavigationFooter columns={2} logoPosition="left" divider />;
}right logo
import { NavigationFooter } from "@/components/email/navigation-footer";
export function NavigationFooterColumns2LogoPositionRightDividerExampleDemo() {
return <NavigationFooter columns={2} logoPosition="right" divider />;
}Footer with 3-column menu
left logo
import { NavigationFooter } from "@/components/email/navigation-footer";
export function NavigationFooterColumns3LogoPositionLeftExampleDemo() {
return <NavigationFooter columns={3} logoPosition="left" />;
}right logo
import { NavigationFooter } from "@/components/email/navigation-footer";
export function NavigationFooterColumns3LogoPositionRightExampleDemo() {
return <NavigationFooter columns={3} logoPosition="right" />;
}Footer with full menu
oversized logo
import { NavigationFooter } from "@/components/email/navigation-footer";
export function NavigationFooterOversizedLogoVariantOversizedLogoExampleDemo() {
return <NavigationFooter oversizedLogo variant="oversized-logo" />;
}bordered
import { NavigationFooter } from "@/components/email/navigation-footer";
export function NavigationFooterOversizedLogoVariantBorderedExampleDemo() {
return <NavigationFooter oversizedLogo variant="bordered" />;
}Footer with text menu and socials
left logo
import { NavigationFooter } from "@/components/email/navigation-footer";
export function NavigationFooterDescriptionLogoPositionLeftExampleDemo() {
return (
<NavigationFooter
description="Product updates and useful resources."
logoPosition="left"
/>
);
}right logo
import { NavigationFooter } from "@/components/email/navigation-footer";
export function NavigationFooterDescriptionLogoPositionRightExampleDemo() {
return (
<NavigationFooter
description="Product updates and useful resources."
logoPosition="right"
/>
);
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
theme | EmailTheme | defaultTheme | Renderer theme configuration. |
brand | { logo: { src: string; alt?: string }; href?: string } | - | Configures the component's brand. |
description | string | "Lorem ipsum dolor sit amet consectetur. Eget aenean sed sit sed in sapien. Vel auctor arcu nulla consectetur sed." | Configures the component's description. |
menus | Array<{ heading?: string; links: Array<{ label: string; href: string }> }> | - | Configures the component's menus. |
socials | Array<{ iconSrc: string; label: string; href: string }> | - | Configures the component's socials. |
legal | { copyright?: string; text?: string; unsubscribeHref?: string; preferencesHref?: string } | - | Configures the component's legal. |
columns | 1 | 2 | 3 | 2 | Configures the component's columns. |
alignment | "left" | "center" | "right" | "left" | Configures the component's alignment. |
logoPosition | "left" | "right" | "top" | "bottom" | "left" | Configures the component's logoposition. |
divider | boolean | false | Configures the component's divider. |
oversizedLogo | boolean | false | Configures the component's oversizedlogo. |
variant | "left-logo" | "right-logo" | "oversized-logo" | "bordered" | Derived from the other props | Selects an exact legacy composition when needed. |
On This Page
InstallationUsageExamplesFooter centered with menu and socialsdefaultFooter with 2-column menuleft logoright logoFooter with 2-column menu and dividerleft logoright logoFooter with 3-column menuleft logoright logoFooter with full menuoversized logoborderedFooter with text menu and socialsleft logoright logoAPI Reference