# Navigation - agent guide

> Normative extract of the EchoSistema template for the page
> `/componentes/navegacao`. 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`.

All of it over native elements: the keyboard comes for free.

```vue
<echo-collapse open><template #summary>Title</template>Body</echo-collapse>
<echo-collapse name="group">…</echo-collapse>   <!-- same `name` = accordion -->

<echo-tree :nodes="NODES" />
<echo-tabs :tabs="TABS"><template #overview>…</template></echo-tabs>
<echo-pagination v-model="page" :total="12" size="lg" intent="success" />
<echo-breadcrumb :items="CRUMBS" chevron />
<echo-divider align="center" line="dashed" intent="primary">or</echo-divider>
<echo-divider vertical />
<echo-timeline><li>…</li></echo-timeline>

<echo-drawer ref="drawer" title-id="d-title" start>
  <template #title>…</template>
  …
  <template #footer>…</template>
</echo-drawer>

<echo-dropdown :label="t('menu')" start>
  <template #trigger><span class="es-btn">…</span></template>
  <template #default="{ close }">
    <li><button type="button" class="es-menu-item" @click="close()">…</button></li>
    <li aria-hidden="true"><span class="es-menu-sep" /></li>
  </template>
</echo-dropdown>
```

The accordion is a shared `name` on the native `<details>`: opening one closes
the other without a line of script.

The tab strip scrolls but shows no scrollbar, and its labels are uppercase in
the rail variant (a tab there is a SECTION LABEL); the pills keep normal case,
because a pill is a button.

---

Source: `app/components/echo/{Collapse,Tree,Dropdown,Tabs,Pagination,Breadcrumb,Divider,Timeline,Drawer}.vue`