Tabs Bar

A navigation bar that organises content into labelled tabs, allowing users to switch between related views.

Basic tabs bar

A simple three-tab layout with a linked content panel for the active destination.

Overview: A summary of the selected item and its key metrics.

<div>
  <diwa-tabs-bar id="bar" active-tab-index="0">
    <button>Overview</button>
    <button>Details</button>
    <button>Settings</button>
  </diwa-tabs-bar>
  <div id="panel" style="padding: 1rem; font-size: 0.875rem;">
    Overview: A summary of the selected item and its key metrics.
  </div>
</div>
<script>
  const panels = [
    'Overview: A summary of the selected item and its key metrics.',
    'Details: In-depth specifications and configuration options.',
    'Settings: Customise preferences and notifications.',
  ];
  const bar = document.querySelector('#bar');
  const panel = document.querySelector('#panel');
  bar.addEventListener('update', (e) => {
    panel.textContent = panels[e.detail.activeTabIndex];
  });
</script>

Four tabs

A wider set shows how the bar handles more peer destinations while still keeping related content directly below.

Overview: High-level status, owners, and KPIs for the current workspace.

<div>
  <diwa-tabs-bar id="bar" active-tab-index="0">
    <button>Overview</button>
    <button>Details</button>
    <button>Settings</button>
    <button>History</button>
  </diwa-tabs-bar>
  <div id="panel" style="padding: 1rem; font-size: 0.875rem;">
    Overview: High-level status, owners, and KPIs for the current workspace.
  </div>
</div>
<script>
  const panels = [
    'Overview: High-level status, owners, and KPIs for the current workspace.',
    'Details: Product specifications, dependencies, and implementation notes.',
    'Settings: Notification rules, access controls, and display preferences.',
    'History: A timeline of releases, edits, and important system events.',
  ];
  const bar = document.querySelector('#bar');
  const panel = document.querySelector('#panel');
  bar.addEventListener('update', (e) => {
    panel.textContent = panels[e.detail.activeTabIndex];
  });
</script>

With panel content

Listen to the update event to switch panel content when the active tab changes.

Overview: A summary of the selected item and its key metrics.

<div>
  <diwa-tabs-bar id="bar" active-tab-index="0">
    <button>Overview</button>
    <button>Details</button>
    <button>Settings</button>
  </diwa-tabs-bar>
  <div id="panel" style="padding: 1rem; font-size: 0.875rem;">
    Overview: A summary of the selected item and its key metrics.
  </div>
</div>
<script>
  const panels = [
    'Overview: A summary of the selected item and its key metrics.',
    'Details: In-depth specifications and configuration options.',
    'Settings: Customise preferences and notifications.',
  ];
  const bar = document.querySelector('#bar');
  const panel = document.querySelector('#panel');
  bar.addEventListener('update', (e) => {
    panel.textContent = panels[e.detail.activeTabIndex];
  });
</script>

Disabled destination

Disabled tabs remain visible in the information architecture but cannot be activated until the destination becomes available.

Overview: Core workspace information is available to all users.

<div>
  <diwa-tabs-bar id="bar" active-tab-index="0">
    <button>Overview</button>
    <button disabled>Reports</button>
    <button>Settings</button>
  </diwa-tabs-bar>
  <div id="panel" style="padding: 1rem; font-size: 0.875rem;">
    Overview: Core workspace information is available to all users.
  </div>
</div>
<script>
  const panels = [
    'Overview: Core workspace information is available to all users.',
    'Reports: This destination is currently unavailable because the user does not have reporting access.',
    'Settings: Administrators can review workspace rules, alerts, and defaults here.',
  ];
  const bar = document.querySelector('#bar');
  const panel = document.querySelector('#panel');
  bar.addEventListener('update', (e) => {
    panel.textContent = panels[e.detail.activeTabIndex];
  });
</script>