TopBar

Purpose

The TopBar component renders the thin announcement bar at the top of the site header.

It:

renders announcement text (settings.text)

optionally renders up to 2 links (contact/blog etc.) on desktop

optionally renders a language switcher dropdown (desktop) when enabled and more than one language exists

renders a dark mode toggle button (desktop)

hides/shows itself on scroll (client-side)

Inputs (model contract)

Model shape (storefront example)

{
  "name": "TopBar",
  "view": "Default",
  "section": "SectionHeader",
  "settings": {
    "text": "Sample text",
    "link1Title": "Sample text",
    "link1Path": "/sample",
    "link2Title": "Sample text",
    "link2Path": "/sample",
    "showLanguage": true,
    "id": "Component Id",
    "section": "SectionHeader",
    "type": "NoirTopBar",
    "name": "TopBar",
    "configuredInContentApi": true,
    "view": "Default",
    "displayName": "",
    "cssClass": "",
    "header": "",
    "alignment": "Left"
  },
  "translations": {
    "enableDarkMode": "Sample text",
    "disableDarkMode": "Sample text",
    "selectLanguage": "Sample text",
    "...": "..."
  }
}

Required fields

settings.id

settings.text

Optional fields

settings.cssClass

Link 1:

settings.link1Title

settings.link1Path

Link 2:

settings.link2Title

settings.link2Path

Language dropdown:

settings.showLanguage

GlobalData.Company.Languages[] (must contain more than one language)

GlobalData.CurrentLanguage / GlobalData.Company.DefaultLanguage

translations.*

JavaScript

Global object

Components/TopBar/Default.js exposes:

Liquid binds it via x-init:

<div x-init="topbardefault.init($el)">

`init(el)`

What it does

Calculates a scroll threshold based on the header height.

Adds a scroll listener that toggles the hide class on the TopBar element.

Key behaviors / edge cases

Threshold is header.offsetHeight / 2 and is updated on resize.

Uses a simple debounce/lock (canToggle + toggleDelay = 300ms) to prevent flicker.

Advice

The hide CSS class must exist in theme styles, otherwise the bar won’t visually hide.

Global Alpine stores (used by TopBar)

`$store.darkMode` (theme mode)

The dark mode toggle uses a shared Alpine store:

$store.darkMode.toggle()

$store.darkMode.on (for aria-checked and styling)

Dependencies

Alpine.js

Alpine stores:

darkMode

Liquid globals:

GlobalData.Company.Languages

GlobalData.CurrentLanguage

GlobalData.Company.DefaultLanguage

Notes

TopBar links and controls render only on desktop (hidden lg:flex).

Language dropdown is rendered only when settings.showLanguage is true and there are multiple languages.

Announcement text uses | raw, so the backend is expected to provide safe HTML.

Extras

Template behavior (Liquid + Alpine)

Computes booleans link1Exists / link2Exists based on title+path.

Language dropdown uses local Alpine state (open) and supports Escape + click-away.

The current language label is derived from the first two characters of the language code.

TopBar

Purpose#

Inputs (model contract)#

Model shape (storefront example)#

Required fields#

Optional fields#

JavaScript#

Global object#

init(el)#

Global Alpine stores (used by TopBar)#

$store.darkMode (theme mode)#

Dependencies#

Notes#

Extras#

Template behavior (Liquid + Alpine)#