Tabs

Switch between panels containing related content.

<sy-tab-group>Installation guide Basic usage

Live preview

Interact with the component to see results here.

StylesPositionSizeTab alignmentTab padding

Allow dismissalDrag to reorderDisable all

View code

HTML

<sy-tab-group
  active="0"
  type="line"
  position="top"
  size="medium"
  align="left"
  padding="none"
  id="sample"
  style="width:100%;height:250px"
>
  <sy-tab tabkey="tab-0">Overview</sy-tab>
  <sy-tab tabkey="tab-1">Activity</sy-tab>
  <sy-tab tabkey="tab-2">Settings</sy-tab>
  <sy-tab-content name="tab-0">
    <p style="margin:20px 0">View project status at a glance.</p>
  </sy-tab-content>
  <sy-tab-content name="tab-1">
    <p style="margin:20px 0">Review recent changes and team activity.</p>
  </sy-tab-content>
  <sy-tab-content name="tab-2">
    <p style="margin:20px 0">Manage the project's basic settings.</p>
  </sy-tab-content>
</sy-tab-group>

Usage guide

Separate and switch related content within one context. Use Navigation across the app and Steps for sequential tasks.

Pair tabs with content
Match sy-tab's tabkey to sy-tab-content's name.
Set the active tab
active starts at 0. Use setActiveTab() to switch in code.
Many tabs or closable tabs
Use the overflow menu to navigate many tabs. Set closable only on tabs that need a close action.

Examples

Basic tabs

Match tabkey to the content's name to switch panels.

View code

HTML

<sy-tab-group
  active="0"
  id="sample"
  style="width:100%;height:250px"
>
  <sy-tab tabkey="tab-0">Overview</sy-tab>
  <sy-tab tabkey="tab-1">Activity</sy-tab>
  <sy-tab tabkey="tab-2">Settings</sy-tab>
  <sy-tab-content name="tab-0">
    <p style="margin:20px 0">View project status at a glance.</p>
  </sy-tab-content>
  <sy-tab-content name="tab-1">
    <p style="margin:20px 0">Review recent changes and team activity.</p>
  </sy-tab-content>
  <sy-tab-content name="tab-2">
    <p style="margin:20px 0">Manage the project's basic settings.</p>
  </sy-tab-content>
</sy-tab-group>

Card style

Apply card styling to work areas that need a visible boundary.

View code

HTML

<sy-tab-group
  active="0"
  type="card"
  id="sample"
  style="width:100%;height:250px"
>
  <sy-tab tabkey="tab-0">Overview</sy-tab>
  <sy-tab tabkey="tab-1">Activity</sy-tab>
  <sy-tab tabkey="tab-2">Settings</sy-tab>
  <sy-tab-content name="tab-0">
    <p style="margin:20px 0">View project status at a glance.</p>
  </sy-tab-content>
  <sy-tab-content name="tab-1">
    <p style="margin:20px 0">Review recent changes and team activity.</p>
  </sy-tab-content>
  <sy-tab-content name="tab-2">
    <p style="margin:20px 0">Manage the project's basic settings.</p>
  </sy-tab-content>
</sy-tab-group>

Vertical tabs

Set position to left or right to place tabs beside the content.

View code

HTML

<sy-tab-group
  active="0"
  position="left"
  id="sample"
  style="width:100%;height:250px"
>
  <sy-tab tabkey="tab-0">Overview</sy-tab>
  <sy-tab tabkey="tab-1">Activity</sy-tab>
  <sy-tab tabkey="tab-2">Settings</sy-tab>
  <sy-tab-content name="tab-0">
    <p style="margin:20px 0">View project status at a glance.</p>
  </sy-tab-content>
  <sy-tab-content name="tab-1">
    <p style="margin:20px 0">Review recent changes and team activity.</p>
  </sy-tab-content>
  <sy-tab-content name="tab-2">
    <p style="margin:20px 0">Manage the project's basic settings.</p>
  </sy-tab-content>
</sy-tab-group>

Close a tab

The close icon removes both the tab and its associated content.

View code

HTML

<sy-tab-group
  active="0"
  type="card"
  id="sample"
  style="width:100%;height:250px"
>
  <sy-tab tabkey="tab-0" closable>Overview</sy-tab>
  <sy-tab tabkey="tab-1" closable>Activity</sy-tab>
  <sy-tab tabkey="tab-2" closable>Settings</sy-tab>
  <sy-tab-content name="tab-0">
    <p style="margin:20px 0">View project status at a glance.</p>
  </sy-tab-content>
  <sy-tab-content name="tab-1">
    <p style="margin:20px 0">Review recent changes and team activity.</p>
  </sy-tab-content>
  <sy-tab-content name="tab-2">
    <p style="margin:20px 0">Manage the project's basic settings.</p>
  </sy-tab-content>
</sy-tab-group>

Confirm before closing

After receiving a close request, use the confirmation button to remove the tab. Cancel keeps it open.

View code

HTML

<sy-tab-group
  active="0"
  id="sample"
  style="height:190px"
>
  <sy-tab
    tabkey="draft"
    closable
    manual-close
  >Drafting</sy-tab>
  <sy-tab-content name="draft">
    <p>This draft has not been saved.</p>
  </sy-tab-content>
</sy-tab-group>
<div id="close-prompt" hidden>
  <p>Close the tab you are editing?</p>
  <sy-button id="confirm-close" variant="primary">Confirm close</sy-button>
  <sy-button id="cancel-close">Keep editing</sy-button>
</div>

<script type="module">
  await (root => {
    const group = root.querySelector('#sample');
    const prompt = root.querySelector('#close-prompt');
    let pending;
    group.addEventListener('closed', event => {
      if (!event.detail.isManualClose) return;
      pending = event.detail.tabkey;
      prompt.hidden = false;
    });
    root.querySelector('#confirm-close').addEventListener('click', async () => {
      await group.closeTab(pending);
      prompt.hidden = true;
    });
    root.querySelector('#cancel-close').addEventListener('click', () => {
      pending = undefined;
      prompt.hidden = true;
    });
  })(document);
</script>

Disable individual tabs

Only the Settings tab is disabled. Other tabs remain selectable.

View code

HTML

<sy-tab-group
  active="0"
  id="sample"
  style="width:100%;height:250px"
>
  <sy-tab tabkey="tab-0">Overview</sy-tab>
  <sy-tab tabkey="tab-1">Activity</sy-tab>
  <sy-tab tabkey="tab-2" disabled>Settings</sy-tab>
  <sy-tab-content name="tab-0">
    <p style="margin:20px 0">View project status at a glance.</p>
  </sy-tab-content>
  <sy-tab-content name="tab-1">
    <p style="margin:20px 0">Review recent changes and team activity.</p>
  </sy-tab-content>
  <sy-tab-content name="tab-2">
    <p style="margin:20px 0">Manage the project's basic settings.</p>
  </sy-tab-content>
</sy-tab-group>

Control tabs in code

Switch by tab index, read the selected index, or close by key.

View code

HTML

<sy-tab-group
  active="0"
  id="sample"
  style="width:100%;height:250px"
>
  <sy-tab tabkey="tab-0" closable>Overview</sy-tab>
  <sy-tab tabkey="tab-1" closable>Activity</sy-tab>
  <sy-tab tabkey="tab-2" closable>Settings</sy-tab>
  <sy-tab-content name="tab-0">
    <p style="margin:20px 0">View project status at a glance.</p>
  </sy-tab-content>
  <sy-tab-content name="tab-1">
    <p style="margin:20px 0">Review recent changes and team activity.</p>
  </sy-tab-content>
  <sy-tab-content name="tab-2">
    <p style="margin:20px 0">Manage the project's basic settings.</p>
  </sy-tab-content>
</sy-tab-group>
<div class="demo-actions"
  style="display:flex;flex-wrap:wrap;gap:8px;margin-top:16px"
>
  <sy-button id="action-0" size="small">Go to Activity tab</sy-button>
  <sy-button id="action-1" size="small">Read current tab</sy-button>
  <sy-button id="action-2" size="small">Close Settings tab</sy-button>
</div>
<output id="demo-result" aria-live="polite"></output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? 'Done';
  const actionTarget0 = document.querySelector("#sample");
  document.querySelector('#action-0').addEventListener('click', async () => {
    const result = await actionTarget0.setActiveTab(1);
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
  const actionTarget1 = document.querySelector("#sample");
  document.querySelector('#action-1').addEventListener('click', async () => {
    const result = await actionTarget1.getActiveTab();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
  const actionTarget2 = document.querySelector("#sample");
  document.querySelector('#action-2').addEventListener('click', async () => {
    const result = await actionTarget2.closeTab("tab-2");
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
</script>

Many tabs

When space runs out, select hidden tabs from the overflow menu.

View code

HTML

<sy-tab-group active="0" style="width:100%;height:240px">
  <sy-tab tabkey="report-0">Report 1</sy-tab>
  <sy-tab-content name="report-0">
    <p>Content for report 1.</p>
  </sy-tab-content>
  <sy-tab tabkey="report-1">Report 2</sy-tab>
  <sy-tab-content name="report-1">
    <p>Content for report 2.</p>
  </sy-tab-content>
  <sy-tab tabkey="report-2">Report 3</sy-tab>
  <sy-tab-content name="report-2">
    <p>Content for report 3.</p>
  </sy-tab-content>
  <sy-tab tabkey="report-3">Report 4</sy-tab>
  <sy-tab-content name="report-3">
    <p>Content for report 4.</p>
  </sy-tab-content>
  <sy-tab tabkey="report-4">Report 5</sy-tab>
  <sy-tab-content name="report-4">
    <p>Content for report 5.</p>
  </sy-tab-content>
  <sy-tab tabkey="report-5">Report 6</sy-tab>
  <sy-tab-content name="report-5">
    <p>Content for report 6.</p>
  </sy-tab-content>
  <sy-tab tabkey="report-6">Report 7</sy-tab>
  <sy-tab-content name="report-6">
    <p>Content for report 7.</p>
  </sy-tab-content>
  <sy-tab tabkey="report-7">Report 8</sy-tab>
  <sy-tab-content name="report-7">
    <p>Content for report 8.</p>
  </sy-tab-content>
</sy-tab-group>

Events and payloads

Interact with the component and inspect the latest event name and detail. The code includes subscriptions to events emitted by this component and its children.

View code

HTML

<sy-tab-group
  active="0"
  type="line"
  position="top"
  size="medium"
  align="left"
  padding="none"
  id="sample"
  style="width:100%;height:250px"
>
  <sy-tab tabkey="tab-0">Overview</sy-tab>
  <sy-tab tabkey="tab-1">Activity</sy-tab>
  <sy-tab tabkey="tab-2">Settings</sy-tab>
  <sy-tab-content name="tab-0">
    <p style="margin:20px 0">View project status at a glance.</p>
  </sy-tab-content>
  <sy-tab-content name="tab-1">
    <p style="margin:20px 0">Review recent changes and team activity.</p>
  </sy-tab-content>
  <sy-tab-content name="tab-2">
    <p style="margin:20px 0">Manage the project's basic settings.</p>
  </sy-tab-content>
</sy-tab-group>
<output id="demo-events" aria-live="polite">Interact with the component to see
  its latest event and payload.</output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? 'Done';
  for (const name of ["selected", "closed", "ordered", "tabSelected", "tabClosed", "tabAdded"]) {
    document.addEventListener(name, event => {
      document.querySelector('#demo-events').textContent =
        `${event.target.localName} · ${name}: ${describeResult(event.detail)}`;
    });
  }
</script>

Handle requests to add tabs

The add button emits tabAdded to request a new tab. This example displays the request in the result. In an app, add both a new sy-tab and sy-tab-content.

View code

HTML

<sy-tab-group
  active="0"
  type="line"
  position="top"
  size="medium"
  align="left"
  padding="none"
  add-new-tab
  id="sample"
  style="width:100%;height:250px"
>
  <sy-tab tabkey="tab-0">Overview</sy-tab>
  <sy-tab tabkey="tab-1">Activity</sy-tab>
  <sy-tab tabkey="tab-2">Settings</sy-tab>
  <sy-tab-content name="tab-0">
    <p style="margin:20px 0">View project status at a glance.</p>
  </sy-tab-content>
  <sy-tab-content name="tab-1">
    <p style="margin:20px 0">Review recent changes and team activity.</p>
  </sy-tab-content>
  <sy-tab-content name="tab-2">
    <p style="margin:20px 0">Manage the project's basic settings.</p>
  </sy-tab-content>
</sy-tab-group>
<output id="demo-events" aria-live="polite">Interact with the component to see
  its latest event and payload.</output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? 'Done';
  const component1 = document.querySelector("#sample");
  Object.assign(component1, {
    "addNewTab": true
  });
  for (const name of ["tabAdded"]) {
    document.addEventListener(name, event => {
      document.querySelector('#demo-events').textContent =
        `${event.target.localName} · ${name}: ${describeResult(event.detail)}`;
    });
  }
</script>

Tab, content, and extra-action slots

Put tabs in tabs and their associated panels in contents. Use extra for supplementary content next to the tab list.

View code

HTML

<sy-tab-group active="0" style="height:220px">
  <sy-tab tabkey="overview" slot="tabs">Overview</sy-tab>
  <sy-tab tabkey="activity" slot="tabs">Activity</sy-tab>
  <sy-tab-content name="overview" slot="contents">Project overview
  </sy-tab-content>
  <sy-tab-content name="activity" slot="contents">Recent activity
  </sy-tab-content><span slot="extra">Team project</span>
</sy-tab-group>

Bottom tab navigation

Place centered tabs below their content panel.

View code

HTML

<sy-tab-group
  active="0"
  type="line"
  position="bottom"
  size="medium"
  align="center"
  padding="none"
  id="sample"
  style="width:100%;height:250px"
>
  <sy-tab tabkey="tab-0">Overview</sy-tab>
  <sy-tab tabkey="tab-1">Activity</sy-tab>
  <sy-tab tabkey="tab-2">Settings</sy-tab>
  <sy-tab-content name="tab-0">
    <p style="margin:20px 0">View project status at a glance.</p>
  </sy-tab-content>
  <sy-tab-content name="tab-1">
    <p style="margin:20px 0">Review recent changes and team activity.</p>
  </sy-tab-content>
  <sy-tab-content name="tab-2">
    <p style="margin:20px 0">Manage the project's basic settings.</p>
  </sy-tab-content>
</sy-tab-group>

<script type="module">
  const component1 = document.querySelector("#sample");
  Object.assign(component1, {
    "position": "bottom",
    "align": "center"
  });
</script>

Feature examples

Choose a feature from 24 topics. Explore property settings, method calls, event results, and slot layouts through live examples and code.

Find a feature

Usage examples · Content Overview

Try the selected example. Topics with multiple configurations let you switch between detailed examples.

View code

HTML

Loading the example.

Usage examples · Overview

Try the selected example. Topics with multiple configurations let you switch between detailed examples.

View code

HTML

Loading the example.

Usage examples · Item Overview

Try the selected example. Topics with multiple configurations let you switch between detailed examples.

View code

HTML

Loading the example.