nuxt-x-marketing
LayoutNavbar
Fixed sticky navbar with transparent-on-hero support, logo, nav links, action buttons, and a mobile full-screen overlay menu.
LayoutNavbar
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.nav if props are not provided. Logo and alt text fall back to appConfig.xMarketing.header.logo. Mobile navigation opens as a full-screen overlay.
Components
<XMarkLayoutNavbar />
<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' },
]"
>
<template #actions>
<UButton variant="ghost">Sign In</UButton>
<UButton color="primary">Get Started</UButton>
</template>
</XMarkLayoutNavbar>
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.xMarketing.header.nav.links. |
logo | object | null | Logo object { src, srcDark?, alt? }. Falls back to appConfig.xMarketing.header.logo. |
scrollThreshold | number | 100 | Pixels scrolled before switching to solid background. |
buttons | array | null | Action buttons [{ label, to, color?, variant?, icon?, target?, square? }]. Falls back to appConfig.xMarketing.header.nav.buttons. |
Slots
| Slot | Description |
|---|---|
logo | Custom logo element. |
links | Custom desktop navigation links. |
actions | Custom desktop action area. |
mobile-actions | Custom mobile menu action area. |
AI Context
category: Layout
package: "@xenterprises/nuxt-x-marketing"
components:
- XMarkLayoutNavbar
use-when: >
Adding a sticky top navigation bar to a marketing site layout. Pairs with
XMarkHero for transparent-on-hero behavior and transitions to a solid surface
on scroll. Logo, links, and buttons can be set per-instance or globally
via appConfig.xMarketing.header.
typical-page-section: Fixed top of every page, above all content.