# Navbars - agent guide

> Normative extract of the EchoSistema template for the page
> `/componentes/navbars`. Copy it verbatim: tag names, props, events and classes
> are contract.
>
> Full guide (rules, tokens and every family): `/agents/echosistema-ui.md`

## Rules that apply before any line of code

- Colour only through tokens (`text-fg1`, `bg-panel`, `border-line`, `.es-i--*`); never a hex, never a Tailwind colour.
- Two axes: the intent gives the colour, the variant consumes it. Never combine them by hand.
- Visible text through `t()`; tag names, props and classes stay literal.
- A component does not fetch: it takes props and emits events.
- An icon alone inside a button needs an `aria-label`.

Five bars for five kinds of site. Labels NEVER live inside them: they come in as
props, already translated.

```vue
<masthead-ecommerce :links="LINKS" :departments="DEPTS" :cart-count="3" :wishlist-count="7"
                    name="Ada" :avatar="AVATAR" lens wide embedded @search="goToListing" />
<masthead-real-estate v-model:scope="scope" :links="LINKS" :departments="TYPES" :scopes="SCOPES"
                      :placeholder="hint" :account-links="ACCOUNT" :wishlist-count="4" wishlist-menu
                      name="Ada" :avatar="AVATAR" @search="goToListing" @wishlist="…" @sign-out="…">
  <template #wishlist="{ close }"><li>…</li></template>
</masthead-real-estate>
<masthead-learn :links="LINKS" :course="course" :done="17" :total="24" name="Ada" :avatar="AVATAR" @search="…" />
<masthead-help-desk :links="LINKS" :status="status" status-tone="success"
                    :ticket-label="label" ticket-to="/support" name="Ada" :avatar="AVATAR" @search="…" />
<masthead-landing :links="SECTIONS" :cta-label="cta" cta-to="/crear-cuenta"
                  :sign-in-label="signIn" :name="user?.name" floating />
```

| Prop / event | What it does |
| --- | --- |
| `links` | `ChromeLink[]` - `{ label, to, placeholder? }` |
| `wide` | releases the content box's ceiling |
| `embedded` | drops the `sticky`, for a bar mounted INSIDE a page |
| `lens` | the icon controls WITH the round capsule; the default is flat (see `useBarSkin`) |
| `name` / `avatar` | the signed-in person: the account control shows the portrait instead of the generic figure |
| `@search` | the term (and the department, on the shop; `{ term, department, scope }` on the portal); the page owns the navigation |

Variant-specific: `departments`, `cart-count`, `wishlist-count` (shop);
`scopes` + `v-model:scope`, `placeholder`, `account-links` (one short list,
wins over `account-menu`), `wishlist-count` / `cart-count` (UNSET hides the
control, `0` shows it), `wishlist-menu` + `#wishlist` slot (the heart opens the
list; without it the heart emits `wishlist`), `cart-to`, `nav-in-bar` (the
sections in the search field's place, for a page with its own search),
`@sign-out` (portal - below `lg` the menu and the account live in an
`<echo-drawer>`);
`course`, `done`, `total` (course); `status`, `status-tone`, `ticket-label`,
`ticket-to` (help desk); `cta-label`, `cta-to`, `sign-in-label`, `floating`
(landing).

`status-tone` speaks the alert's vocabulary: `success` up, `warn` degraded,
`danger` down.

The phone layout comes from media queries, and those measure the WINDOW: to show
it, mount the bar in an `<iframe>` at 390px (`/componentes/chrome-preview`), not
in a narrow box.

---

Source: `app/components/masthead/*.vue`