BwTabs | bw-tabs

Overview

A tab is a way to seperate groups of content into different sections. It has many different modes for appearance.

This component implements the tabs pattern.

Usage

Modes

Box

Tab 1Tab 2Tab 3

Mobile

Tab 1Tab 2Tab 3

Segmented

Tab 1Tab 2Tab 3

Side Nav

Tab 1Tab 2Tab 3

Top Nav

Tab 1Tab 2Tab 3

Underline

Tab 1Tab 2Tab 3

Wizard

Tab 1Tab 2Tab 3

<h5>Box</h5>
<bw-tabs value="1" mode="box">
  <bw-tab-button value="1">Tab 1</bw-tab-button>
  <bw-tab-button value="2">Tab 2</bw-tab-button>
  <bw-tab-button value="3">Tab 3</bw-tab-button>
</bw-tabs>

<h5>Mobile</h5>
<bw-tabs value="1" mode="mobile">
  <bw-tab-button value="1">Tab 1</bw-tab-button>
  <bw-tab-button value="2">Tab 2</bw-tab-button>
  <bw-tab-button value="3">Tab 3</bw-tab-button>
</bw-tabs>

<h5>Segmented</h5>
<bw-tabs value="1" mode="segmented">
  <bw-tab-button value="1">Tab 1</bw-tab-button>
  <bw-tab-button value="2">Tab 2</bw-tab-button>
  <bw-tab-button value="3">Tab 3</bw-tab-button>
</bw-tabs>

<h5>Side Nav</h5>
<bw-tabs value="1" mode="sidenav">
  <bw-tab-button value="1">Tab 1</bw-tab-button>
  <bw-tab-button value="2">Tab 2</bw-tab-button>
  <bw-tab-button value="3">Tab 3</bw-tab-button>
</bw-tabs>

<h5>Top Nav</h5>
<bw-tabs value="1" mode="topnav">
  <bw-tab-button value="1">Tab 1</bw-tab-button>
  <bw-tab-button value="2">Tab 2</bw-tab-button>
  <bw-tab-button value="3">Tab 3</bw-tab-button>
</bw-tabs>

<h5>Underline</h5>
<bw-tabs class="" value="1" mode="underline">
  <bw-tab-button value="1">Tab 1</bw-tab-button>
  <bw-tab-button value="2">Tab 2</bw-tab-button>
  <bw-tab-button value="3">Tab 3</bw-tab-button>
</bw-tabs>

<h5>Wizard</h5>
<bw-tabs value="1" mode="wizard">
  <bw-tab-button value="1">Tab 1</bw-tab-button>
  <bw-tab-button value="2">Tab 2</bw-tab-button>
  <bw-tab-button value="3">Tab 3</bw-tab-button>
</bw-tabs>

Properties

Property	Attribute	Description	Type	Default
contentContainer	content-container	The content container of the tabs.	string	undefined
mode	mode	The mode of the tabs. Different modes have different appearances.	"box" | "mobile" | "segmented" | "sidenav" | "topnav" | "underline" | "wizard"	'box'
value	value	The value of the tabs.	string	undefined

Events

Event	Description	Type
valueChange	Emitted when the value of the tabs changes.	CustomEvent<string>

Shadow Parts

Part	Description
"indicator"	The indicator element

---

© 2025 United Systems & Software - All Rights Reserved.