1 Header component guideline config

namds29 edited this page 2026-01-12 02:44:03 +00:00

Table of Contents

• Header — JSON Configuration Guide
• Location
• Minimal Structure
• Config Keys
• Banner (Top Bar)
• Nav (Main Navigation)
• Common Edits
• Adding or Reordering Children
• Tips

Header — JSON Configuration Guide

This guide explains how to configure the Header block in config/nam.vibentec.design.json. It covers structure, keys, and typical edits without file line references.

Location

• Defined under layout in config/nam.vibentec.design.json as a top-level Header object.
• Contains a config block (e.g., sticky) and a children array with header components.

Minimal Structure

{
  "Header": {
    "config": {
      "sticky": true
    },
    "children": [
      { "Banner": { "config": { } } },
      { "Nav": { "config": { } } }
    ]
  }
}

Config Keys

• sticky: Boolean. When true, the header stays fixed at the top.
• children: Array of components rendered in the header. Common entries are Banner and Nav.

Banner (Top Bar)

Key fields:

• variant: e.g., "nav".
• className: styling of the bar.
• left / center / right: arrays to place child controls.
  • Left links: Link items with label, href, className.
  • Center links: Link items for promos or CTAs.
  • Right controls: Dropdown for currency and VtCountryCodeSelect for region selector.

Example (add a left link):

{
  "Link": {
    "config": {
      "label": "Neu",
      "href": "/new",
      "className": "text-[13px] flex items-center gap-1"
    }
  }
}

Place this inside Banner.config.left.

Nav (Main Navigation)

Key fields:

• Container className: overall styling of the nav bar.
• Left area:
  • Logo: src, alt, className, and objectFit under Logo.config.
  • Primary links: Link.config.label/href.
  • Mega menus: VtMegaMenu.config.navLabel.text and styling.
• Right area:
  • SearchInput.config.placeholder.
  • AccountButton, Button (wishlist), and VtCartButton icons and classes.

Example (change the logo):

{
  "Logo": {
    "config": {
      "src": "/your-logo.svg",
      "alt": "YourBrand",
      "className": "h-full w-[180px] mr-4",
      "objectFit": "contain"
    }
  }
}

Edit values under Logo.config.

Common Edits

• Toggle sticky header: set "sticky" in Header.config.
• Change banner copy/links: edit Link.config.label/href in Banner.
• Update currency label or options: change Dropdown.config.trigger.text and items.
• Adjust styles: modify className strings in Banner and Nav.
• Edit navigation links or mega menu labels: update Link and VtMegaMenu configs.
• Replace header icons: update icon fields in AccountButton, Button, VtCartButton.

Adding or Reordering Children

• Header.children is an ordered array; earlier items render above/before later ones.
• To add a new component, append an object with the component name and its config:

{ "AnnouncementBar": { "config": { "text": "Free shipping over €50" } } }

• Move items within the array to change render order.

Tips

• Keep JSON valid (commas, braces, quotes). Use a formatter if needed.
• Follow existing class name patterns for consistent styling.
• Use left/center/right arrays to position child items within Banner and similar components.
• Icons referenced by name (e.g., "User", "Heart", "ShoppingCart") must exist in the icon set.

This guide explains the Header configuration so you can make precise edits quickly.