Porsche Design System

Tabs Bar

The p-tabs-bar component is a styled button/link list for multiple purposes. You can use it with your framework router to ensure your window location updates on tab click, use it for hash routing and displaying content accordingly to the hash, as skip navigation to move on a longer page or to change the state of another element and therefore change the appearance of your content .

The component does not handle the display of your content. If you use the component you have to manually care for the content to be rendered beneath. To help with this task the component triggers an event called update with the index of the active tab.

If you intend to only change content on tab-click without location changes and you are fine that the content needs to be pre-rendered then we prepared a component which also handles the correct display of content according to the active tab. Have a look at the Tabs component.

It is a controlled component. This means it does not contain any internal state, and you are in full control over its behavior.

For documentation purpose we use <button> tags in the examples below to make them clickable without changing the route. For route changes it is mandatory to use <a> tags with href in your application. And be aware of that it's not allowed to mix and match <button> with <a> tags as direct children in the component!

Basic implementation is a tab bar with tabs to switch between the content. Just put <button> tags if you need to change e.g. the state on tab-click or <a> tags, if you also have to manipulate the window location, inside the <p-tabs-bar> component and it will handle all styling behaviors.

In order to get notified when the active tabs change, you need to register an event listener for the update event which is emitted by p-tabs-bar.

Open in Stackblitz

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

<p-tabs-bar>
  <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>

Important note