Shared
Navbar
Site header with logo, navigation links, and mobile drawer driven by app config.
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.
Components
<XRdNavbar />
Site-wide header built on UHeader. Logo image and text, nav links, and mobile drawer are all driven by useAppConfig().xRestaurants. Nav link active state is derived from the current route.
<!-- app.vue or layout file -->
<XRdNavbar />
Props
This component accepts no props. Configuration is read entirely from appConfig.xRestaurants:
| Config key | Description |
|---|---|
xRestaurants.logo | Logo image URL |
xRestaurants.logo.icon | Fallback icon name (default: i-lucide-map-pin) |
xRestaurants.logo.text | Logo text |
xRestaurants.name | Fallback site name |
xRestaurants.navbar.signInLabel | Sign in button label |
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.xRestaurants.
typical-page-section: Site header in app.vue or layouts/default.vue.