# Signal Navigation

> Signal navigation components: sg-tabs and sg-accordion, with examples and tables of attributes, methods and events.

Source: https://sendbroadcast.net/docs/signal-navigation

> Coming in Broadcast 3.0. Until then, this page applies only to the Upcoming (edge) build.

These components split a page into parts.

![Two tabs named Results and Settings above a panel, and an accordion with one open and one closed item](https://sendbroadcast.net/assets/docs/plugins/signal/navigation-75e1068d.png)

## sg-tabs

Panels with a tab for each one. The arrow keys move between tabs.

```html
<sg-tabs id="tabs">
  <div label="Results" value="results">The results panel.</div>
  <div label="Settings" value="settings" selected>The settings panel.</div>
</sg-tabs>
```

```javascript
document.getElementById("tabs").addEventListener("sg-tab", (event) => {
  console.log(event.detail.index, event.detail.value);
});
```

Each child is one panel:

| Child attribute | Meaning |
|---|---|
| `label` | The tab text |
| `value` | Your own name for the tab, sent in the event |
| `selected` | Open at the start. The default is the first panel |

| Method | Meaning |
|---|---|
| `select(index)` | Opens a panel. Add `false` as a second value to send no event |

| Event | `detail` | When |
|---|---|---|
| `sg-tab` | `{ index, value }` | The tab changed |

**Common mistakes.** Adding a panel after the tabs draw: it gets no tab. Using tabs for steps that must go in order. Using more than five tabs.

## sg-accordion

Sections that open and close. Good for help text and for details that most people skip.

```html
<sg-accordion>
  <div label="How do votes work?" open>The last click counts.</div>
  <div label="Who can see results?">People with access to this plugin.</div>
</sg-accordion>
```

| Child attribute | Meaning |
|---|---|
| `label` | The heading |
| `open` | Open at the start |

It has no events and no methods. Several sections can be open at once.

**Common mistake.** Hiding the main content in an accordion. If most people need it, show it.