Porsche Design System

Tabs Bar

Table of Contents

Links
Gradient color
Labelling

Links#

If the p-tabs-bar is used as a link list (navigation context), the semantics of that UI component changes completely - from a tabbed interface where content changes happen on-site to a list of links where content changes are route-based.

Page One Page Two Page Three

Open in Stackblitz

<!doctype html>
<html lang="en" class="scheme-light-dark">
<head>
  <title></title>
</head>
<body class="bg-canvas">

<p-tabs-bar>
  <a href="https://porsche.com/page-1">
    Page One
  </a>
  <a href="https://porsche.com/page-2">
    Page Two
  </a>
  <a href="https://porsche.com/page-3">
    Page Three
  </a>
</p-tabs-bar>
<script>

</script>
</body>
</html>

Gradient color#

If the amount of tabs exceeds the viewport, the component renders arrow-buttons to help with horizontal scrolling. The background and gradient has to align to your chosen background.

Open in Stackblitz

<!doctype html>
<html lang="en" class="scheme-light-dark">
<head>
  <title></title>
</head>
<body class="bg-canvas">

<p-tabs-bar aria="{'aria-label': 'Some label for the tablist', 'aria-description': 'Some description for the tablist'}">
  <button type="button">
    Tab 0
  </button>
  <button type="button">
    Tab 1
  </button>
  <button type="button">
    Tab 2
  </button>
  <button type="button">
    Tab 3
  </button>
  <button type="button">
    Tab 4
  </button>
  <button type="button">
    Tab 5
  </button>
  <button type="button">
    Tab 6
  </button>
  <button type="button">
    Tab 7
  </button>
  <button type="button">
    Tab 8
  </button>
  <button type="button">
    Tab 9
  </button>
  <button type="button">
    Tab 10
  </button>
  <button type="button">
    Tab 11
  </button>
  <button type="button">
    Tab 12
  </button>
  <button type="button">
    Tab 13
  </button>
  <button type="button">
    Tab 14
  </button>
  <button type="button">
    Tab 15
  </button>
  <button type="button">
    Tab 16
  </button>
  <button type="button">
    Tab 17
  </button>
  <button type="button">
    Tab 18
  </button>
  <button type="button">
    Tab 19
  </button>
</p-tabs-bar>
<script>
  const pTabsBar = document.querySelector("p-tabs-bar");
  pTabsBar.addEventListener('update', (e) => e.target.activeTabIndex = e.detail.activeTabIndex);
</script>
</body>
</html>

Labelling#

Use the aria property to provide an accessible name and optional description for the tablist when the component is used as a tabbed interface with <button> children. The property is not applied when using <a> tags as a link list.

Open in Stackblitz

<!doctype html>
<html lang="en" class="scheme-light-dark">
<head>
  <title></title>
</head>
<body class="bg-canvas">

<p-tabs-bar aria="{'aria-label': 'Some label for the tablist', 'aria-description': 'Some description for the tablist'}">
  <button type="button">
    Tab One
  </button>
  <button type="button">
    Tab Two
  </button>
  <button type="button">
    Tab Three
  </button>
</p-tabs-bar>
<script>
  const pTabsBar = document.querySelector("p-tabs-bar");
  pTabsBar.addEventListener('update', (e) => e.target.activeTabIndex = e.detail.activeTabIndex);
</script>
</body>
</html>