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 if props are not provided. Mobile navigation opens as a full-screen overlay.
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 |
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.
typical-page-section: Fixed top of every page, above all content.