Navbar
Shared
These components are used across the full layer. XRDNavbar and XRDFooter are typically placed in the layout file. XRDStarRating is a utility display component usable anywhere a rating needs to be shown. XRDMenuCard is the richest shared component, supporting three layout variants and integrating with the useMenuCard() composable for config and dietary tag resolution. XRDComingSoon is the full-screen landing fallback shown when the homepage detects an unknown domain or xRestaurants.comingSoon.enabled is true.
Components
<XRDNavbar />
Site-wide header built on UHeader. The logo image falls back from xMarketing.header.logo.src → xRestaurants.logo; the brand text is xRestaurants.name. Nav links come from xRestaurants.navbar.links and active state is derived from the current route (the root / is active only on exact match, everything else uses startsWith).
<!-- app.vue or layout file -->
<XRDNavbar />
Props
This component accepts no props. Configuration is read entirely from app config:
| Config key | Description |
|---|---|
xRestaurants.name | Brand text shown next to (or instead of) the logo. |
xRestaurants.logo | Logo image path (used as fallback). |
xMarketing.header.logo.src | Preferred logo image path (from the marketing layer). |
xRestaurants.navbar.links | Array of { label, to } nav link objects. |
AI Context
category: Shared
package: "@xenterprises/nuxt-x-restaurants"
components:
- XRDNavbar
use-when: >
Adding the site-wide header to the Nuxt layout file. Logo, nav links,
and mobile drawer are all configured via appConfig.
typical-page-section: Site header in app.vue or layouts/default.vue.