Porsche Design System

Tabs

The p-tabs component makes it easy to explore and switch between different views. You can organize and allow navigation between groups of content that are related and at the same level of hierarchy. The component handles the display of content according to the active tab and all accessibility attributes on your tab and tab content.

This variant does not support a tags and should not be used for navigation. If you need to update your window location have a look at Tabs Bar component.

Basic implementation shows a tab list with buttons to switch between the content. For every p-tabs-item inside of the p-tabs component, a tab will be created. The assigned label property defines also the name of the button.

Every p-tabs-item holds a slot to display content which can be individually assigned.

Tab Content One

Open in Stackblitz

<!doctype html>
<html lang="en" class="auto">
<head>
  <title></title>
</head>
<body class="bg-base">

<p-tabs>
  <p-tabs-item label="Tab One">
    <p-text>
      Tab Content One
    </p-text>
  </p-tabs-item>
  <p-tabs-item label="Tab Two">
    <p-text>
      Tab Content Two
    </p-text>
  </p-tabs-item>
  <p-tabs-item label="Tab Three">
    <p-text>
      Tab Content Three
    </p-text>
  </p-tabs-item>
</p-tabs>
<script>

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