--- title: "Global Site Config — Navbar, Footer, and Homepage" description: "A complete, beginner-friendly guide to editing the global site configuration in Nuxas. Learn how to update your navbar, footer, homepage hero, social proof, features, steps, pricing, testimonials, and call-to-action sections through Decap CMS or by editing site.yml directly." canonical_url: "https://nuxas.pages.dev/docs/08-global-site" --- > Index of every page on this site: [llms.txt](https://nuxas.pages.dev/llms.txt) ## Global Site Config — Navbar, Footer, and Homepage In the previous chapter, we started Nuxas with Decap CMS running in the local mode. Now it is time to edit content for the first time. This chapter focuses on the **Global Site Config** — the single file that controls the navbar, the footer, and almost every section on your homepage. Once you understand how this file works, you will understand how the rest of the content system is organized. Before we dive in, let us clarify what "Global Site Config" actually means. ### What Is the Global Site Config? The Global Site Config is a file called `site.yml`, located at `content/data/site.yml`. It is a YAML file, which is a human-readable format for structured data. It contains every piece of content that appears across multiple pages: the brand name, the navigation links, the footer columns, the homepage hero, the pricing tiers, and so on. Every page in Nuxas reads from this file. The header reads the navigation links. The footer reads the footer columns and social links. The homepage reads the hero section, the features section, the pricing section, and so on. If you change a value in `site.yml`, that change appears everywhere the value is used. This is the power of the global config: one edit, many places. ### How to Edit the Global Site Config The way you edit `site.yml` depends on which edition of Nuxas you purchased. #### If You Purchased the Code + Decap CMS Edition Open your browser and go to `http://localhost:3000/admin`. In the left sidebar, click **Site Settings**. Then click **Global Site Config**. The CMS will show a form with every field in `site.yml`, organized into groups. Scroll through the form and you will see sections for Brand, Navigation, Hero, Social Proof, Features, Steps, Pricing, Testimonials, Call to Action, Contact, Footer, and UI Labels. Edit any field, then click **Save** in the top right corner. The change is written to `site.yml`, and the Nuxt development server reloads the page automatically. Refresh your browser and you will see the change on the site. #### If You Purchased the Code Only Edition Open `content/data/site.yml` in VS Code. You will see a YAML file with the same structure as the CMS form, but written in plain text. Edit any value, then save the file with **Ctrl + S**. The Nuxt development server reloads the page automatically. Refresh your browser and you will see the change on the site. The rest of this chapter explains what each section of `site.yml` does. You can follow along in either the CMS or VS Code — the fields are identical. ### Section 1 — Brand The `brand` section controls your project's identity. It appears in the header, the footer, and the browser tab. ```yaml brand: name: NuxtSass badge: Starter tagline: Production-ready Nuxt 4 SaaS template kit ``` - **name** — the name of your project. It appears next to the logo in the header. - **badge** — a small label that appears after the name. In the default config, it is "Starter". Change it to something like "Pro", "SaaS", or remove it entirely. - **tagline** — a short description that appears in the footer, under the brand name. If you change `name` to "My SaaS", the header will show "My SaaS" instead of "NuxtSass". Simple as that. ### Section 2 — Navigation The `nav` section controls the primary navigation links in the header. ```yaml nav: - label: Home to: / - label: Products to: /products - label: Blog to: /blog - label: About to: /about - label: Contact to: /contact ``` - **label** — the text shown in the navigation. - **to** — the URL the link points to. For internal pages, use a path like `/products`. For external pages, use a full URL like `https://example.com`. To add a new link, add a new item to the list. To remove a link, delete its item. The order in the list is the order in the navigation. The `mobileNav` section works the same way, but it controls the mobile drawer instead of the desktop navigation. You can use different labels for mobile if you want. ### Section 3 — Hero The `hero` section controls the large section at the top of your homepage. It is the first thing visitors see. ```yaml hero: badge: Nuxt 4.14+ & Nitro Engine Ready title: The Production-Grade SaaS Template Built For titleHighlight: Nuxt Developers subtitle: Stop re-inventing authentication... primaryCta: label: Get the Template to: /products secondaryCta: label: View Live Demo to: "#demo-preview" metrics: - 100% Strict TypeScript - Lighthouse 99+ Performance preview: file: server/api/subscription/checkout.post.ts tabs: - Nitro Composable - Nuxt 4 image: https://images.unsplash.com/... alt: Nitro server route with Stripe checkout session width: 1600 height: 900 ``` - **badge** — a small label above the title. - **title** — the main headline. It is split into two parts: `title` and `titleHighlight`. The highlighted part is rendered in a different color. - **subtitle** — a paragraph below the headline. - **primaryCta** and **secondaryCta** — the two buttons below the subtitle. - **metrics** — a list of short bullet points below the buttons. - **preview** — the image below the metrics. It uses an image URL, an alt text, and width/height for performance. To customize the hero, change the text values. To change the image, replace the `image` URL with your own. ### Section 4 — Social Proof The `socialProof` section controls the row of statistics below the hero. ```yaml socialProof: tag: Trusted By Developers title: Built with Nuxt Idiomatic Principles desc: Over 1,200+ indie hackers... cards: - title: 14ms text: Average serverless TTFB response... - title: 45+ text: Battle-tested composables... ``` Each card has a `title` (a short number or phrase) and a `text` (a sentence explaining the number). Add or remove cards to change the row. ### Section 5 — Features The `features` section controls the grid of feature cards on the homepage. ```yaml features: tag: Engineered for Velocity title: Everything You Need To Launch in One Kit desc: We skipped the unnecessary dependencies... items: - icon: zap title: Nitro Engine Architecture desc: Leverage Nitro's file-based API routing... ``` Each item has an `icon` (a name like `zap`, `shield`, or `globe`), a `title`, and a `desc`. The icon names are mapped to SVG icons in the code. The available icons are: - `zap` - `credit-card` - `shield` - `globe` - `package` - `activity` To add a new feature, add a new item. To remove a feature, delete its item. ### Section 6 — Steps The `steps` section controls the three-step process section on the homepage. ```yaml steps: tag: 3 Simple Steps title: From Download To Production Deployment desc: Launch your SaaS without getting stuck... items: - number: "01" title: Clone & Configure desc: Download the repository, run npm install... ``` Each item has a `number` (a string like "01"), a `title`, and a `desc`. You can add more steps if you want. ### Section 7 — Pricing The `pricing` section controls the pricing section on the homepage. This is different from the product collection — pricing here is independent of the products you sell. It is meant for the marketing pricing cards on the homepage. ```yaml pricing: tag: Transparent Pricing title: Invest Once. Ship Unlimited Projects. desc: Lifetime updates, complete source code access... popularLabel: Most Popular tiers: - title: Nuxas Code Only badge: Code Only Edition price: 59 priceLabel: one-time excerpt: Launch your SaaS in days... popular: false features: - Full Nuxt 4 + Nitro source repository - 100% strict TypeScript ctaLabel: Buy Nuxas Code Only ctaType: gumroad ctaUrl: https://creativitaz.gumroad.com/l/nuxas ``` Each tier has: - **title** — the tier name. - **badge** — a small label above the title. - **price** — a number. - **priceLabel** — a string like "one-time" or "starting from". - **excerpt** — a short description. - **popular** — a boolean. If true, the tier is highlighted with a "Most Popular" badge. - **features** — a list of bullet points. - **ctaLabel** — the button text. - **ctaType** — the platform type (used for styling, not for the URL). - **ctaUrl** — the URL the button points to. To add a new tier, add a new item. To remove a tier, delete its item. The order in the list is the order on the page. ### Section 8 — Testimonials The `testimonials` section controls the row of quotes below the pricing section. ```yaml testimonials: tag: Developer Reviews title: Loved by Builders Across the Globe desc: Here is what developers say... items: - quote: We deployed our AI micro-SaaS in 4 days... initials: MS name: Marcus Sterling role: Founder, ShipVibe.io ``` Each item has a `quote` (the testimonial text), `initials` (two letters for the avatar), `name`, and `role`. ### Section 9 — Call to Action The `cta` section controls the final call-to-action band at the bottom of the homepage. ```yaml cta: title: Ready To Launch Your Nuxt SaaS? desc: Download NuxtSass Starter today... primaryCta: label: Get NuxtSass Starter to: /products secondaryCta: label: Browse All Packages to: /products ``` It has a `title`, a `desc`, and two buttons. ### Section 10 — Footer The `footer` section controls the footer that appears on every page. ```yaml footer: description: The premium open-standard template kit... columns: - title: Products links: - label: Nuxas Code Only to: /products/nuxas-code socials: - label: GitHub href: https://github.com/mesinkasir icon: github copyright: © 2026 NuxtSass Starter... ``` - **description** — a paragraph below the brand name. - **columns** — a list of columns, each with a title and a list of links. - **socials** — a list of social links, each with a label, an href, and an icon (github, twitter, or discord). - **copyright** — the copyright text at the bottom. To add a new column, add a new item to `columns`. To add a new social link, add a new item to `socials`. ### Section 11 — UI Labels The `ui` section controls the small text labels used throughout the site, such as button labels. ```yaml ui: readMore: Read Article viewDetails: View Details viewKit: View Kit buyNow: Buy Now previous: Previous next: Next showing: Showing of: of items: items prevArticle: Previous Article nextArticle: Next Article ``` These labels are used in components like `ProductCard`, `BlogCard`, and `AppPagination`. If you want to translate your site to another language, this is where you start. ### Saving Your Changes If you are editing through the CMS, click **Save** in the top right corner. The change is written to `site.yml` immediately. If you are editing through VS Code, press **Ctrl + S**. The change is written to `site.yml` immediately. Either way, the Nuxt development server reloads the page automatically. Refresh your browser to see the change. ### What to Expect in the Next Chapter In the next chapter, we will edit the **Page Configs** — the files that control the blog list and product list pages. These are smaller than the global site config, but just as important. See you in the next chapter. ## Sitemap See the full [sitemap](https://nuxas.pages.dev/sitemap.md) for all pages.