Layout
Layout
Layout components wrap every page and provide consistent chrome. Use XMarkLayoutNavbar at the top of your app layout, XMarkLayoutFooter or XMarkLayoutFooterLegal at the bottom, and XMarkLayoutAnnouncementBar above the navbar when you need to surface a promotion or notice.
Components
<XMarkLayoutNavbar />
A fixed-position header that starts transparent over the hero and transitions to a frosted-glass surface after the user scrolls past scrollThreshold pixels. Navigation links and action buttons fall back to appConfig.xMarketing.header if props are not provided. Mobile navigation opens as a full-screen overlay.
<XMarkLayoutNavbar
:transparent="true"
:scroll-threshold="80"
:logo="{ src: '/logo-light.svg', srcDark: '/logo-dark.svg', alt: 'Acme' }"
:links="[
{ label: 'Features', to: '/features' },
{ label: 'Pricing', to: '/pricing' },
{ label: 'Blog', to: '/blog' },
]"
:buttons="[
{ label: 'Sign In', to: '/login', variant: 'outline' },
{ label: 'Get Started', to: '/signup', color: 'primary' },
]"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
transparent | Boolean | true | Start with a transparent gradient background over a hero |
links | Array | null | Nav links [{ label, to }]; falls back to appConfig |
logo | Object | null | Logo object { src, srcDark?, alt? }; falls back to appConfig |
scrollThreshold | Number | 100 | Pixels scrolled before switching to solid background |
buttons | Array | null | Action buttons [{ label, to, color?, variant?, icon?, target? }]; falls back to appConfig |
Slots
| Slot | Description |
|---|---|
logo | Custom logo element |
links | Custom desktop navigation links |
actions | Custom desktop action area |
mobile-actions | Custom mobile menu action area |
<XMarkLayoutFooter />
A full-featured dark footer. The left brand column shows the logo, description, and social links. Up to four additional link columns render in a responsive grid. An optional inline newsletter form can be toggled on. A bottom bar renders copyright text and legal links.
<XMarkLayoutFooter
:logo="{ src: '/logo-white.svg', alt: 'Acme' }"
description="The platform that helps teams ship faster."
:social="[
{ name: 'Twitter', icon: 'i-lucide-twitter', href: 'https://twitter.com/acme' },
{ name: 'GitHub', icon: 'i-lucide-github', href: 'https://github.com/acme' },
]"
:columns="[
{ title: 'Product', links: [{ label: 'Features', to: '/features' }, { label: 'Pricing', to: '/pricing' }] },
{ title: 'Company', links: [{ label: 'About', to: '/about' }, { label: 'Blog', to: '/blog' }] },
]"
:has-newsletter="true"
newsletter-title="Stay in the loop"
newsletter-description="Get product updates and news."
:legal-links="[
{ label: 'Privacy Policy', to: '/privacy' },
{ label: 'Terms', to: '/terms' },
]"
copyright="© 2025 Acme Inc."
@newsletter-submit="onNewsletterSubmit"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
logo | Object | null | Logo object { src, alt? } |
description | String | '' | Brand tagline below the logo |
social | Array | [] | Social links [{ name, icon, href }] |
columns | Array | [] | Link columns [{ title, links: [{ label, to }] }] |
legalLinks | Array | [] | Bottom-bar legal links [{ label, to }] |
copyright | String | Current year string | Copyright notice |
hasNewsletter | Boolean | false | Show inline newsletter form |
newsletterTitle | String | 'Subscribe to our newsletter' | Newsletter heading |
newsletterDescription | String | 'Get the latest updates and news.' | Newsletter subtext |
Events
| Event | Payload | Description |
|---|---|---|
newsletter-submit | email: string | Emitted when newsletter form is submitted |
<XMarkLayoutFooterLegal />
A minimal one-row legal strip suitable for pages that already have a full footer or need a standalone copyright bar.
<XMarkLayoutFooterLegal
copyright="© 2025 Acme Inc. All rights reserved."
:links="[
{ label: 'Privacy Policy', to: '/privacy' },
{ label: 'Terms of Service', to: '/terms' },
{ label: 'Cookie Policy', to: '/cookies' },
]"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
copyright | String | Current year string | Copyright text |
links | Array | Privacy & Terms defaults | Legal links [{ label, to }] |
<XMarkLayoutAnnouncementBar />
A slim dismissible bar rendered above the navbar. Dismissed state is persisted to localStorage using storageKey. Supports color variants and an optional CTA link.
<XMarkLayoutAnnouncementBar
message="We just launched v2.0 with major performance improvements."
badge="New"
icon="i-lucide-rocket"
link="/changelog"
link-text="Read the changelog"
variant="primary"
:dismissible="true"
storage-key="announcement-v2"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
message | String | Default announcement text | Main message |
badge | String | '' | Bold label shown before the message |
icon | String | '' | Lucide icon name |
link | String | '' | CTA link URL |
linkText | String | 'Learn more' | CTA link label |
variant | String | 'primary' | Color variant: 'primary', 'neutral', 'success', 'warning', 'error' |
dismissible | Boolean | true | Show close button |
storageKey | String | '' | localStorage key to persist dismissed state |
AI Context
category: Layout
package: "@xenterprises/nuxt-x-marketing"
components:
- XMarkLayoutNavbar
- XMarkLayoutFooter
- XMarkLayoutFooterLegal
- XMarkLayoutAnnouncementBar
use-when: >
Setting up the persistent chrome for a marketing site — navigation,
footer, and optional promotional banners that appear on every page.
typical-page-section: >
XMarkLayoutNavbar: fixed top. XMarkLayoutAnnouncementBar: above the navbar.
XMarkLayoutFooter / XMarkLayoutFooterLegal: bottom of every page.
Affiliate
Affiliate marketing components for product showcases — individual product cards in multiple layouts, a ranked product grid, a spec comparison table, a detailed product review page, and a compliance disclosure component.
Features
Flexible feature showcase component supporting grid, list, and alternating image/text layouts with staggered entrance animations.