> ## Documentation Index
> Fetch the complete documentation index at: https://neo.tvk.company/llms.txt
> Use this file to discover all available pages before exploring further.
# Tab Bar
> A navigation component that allows users to switch between different views or content sections.
## Examples
```dart Basic Tab Bar lines theme={null}
NeoTabBar(
tabs: [
NeoTab(id: "dashboard", label: "Dashboard"),
NeoTab(id: "products", label: "Products"),
NeoTab(id: "settings", label: "Settings"),
],
activeTabId: "dashboard",
onChange: (value) {
// Handle state change
},
),
```
```dart With Icons lines theme={null}
NeoTabBar(
tabs: [
NeoTab(id: "dashboard", label: "Dashboard", icon: PhosphorIconsRegular.house),
NeoTab(id: "products", label: "Products", icon: PhosphorIconsRegular.package),
NeoTab(id: "settings", label: "Settings", icon: PhosphorIconsRegular.gear),
],
activeTabId: "dashboard",
onChange: (value) {
// Handle state change
},
),
```
```dart Expanded Layout lines theme={null}
NeoTabBar(
tabs: [
NeoTab(id: "dashboard", label: "Dashboard"),
NeoTab(id: "products", label: "Products"),
NeoTab(id: "settings", label: "Settings"),
],
isExpanded: true,
activeTabId: "dashboard",
onChange: (value) {
// Handle state change
},
),
```
## Properties
### Required
A list of tabs to display in the tab bar. Each tab must have a unique `id`.
The ID of the currently active tab. Must match one of the tab IDs in the `tabs` list.
Callback function called when a tab is selected. Receives the ID of the selected tab.
### Content
Custom spacing between tabs. If not provided, uses theme default spacing.
### Layout
Whether the tab bar should expand to fill the available width. When true, tabs are distributed evenly. When false, tabs wrap naturally.
## Tab Properties
The `NeoTab` class represents individual tabs within the tab bar:
### Required
A unique identifier for the tab. This is used to track the active tab and is passed to the `onChange` callback.
The text label displayed on the tab.
### Content
An optional icon to display alongside the label.
## Best Practices
* **Width Constraints**: When using `isExpanded: true`, always provide width constraints to prevent layout issues by wrapping in `Expanded`, `ConstrainedBox`, `SizedBox`, etc.
* Combine with [`NeoHaptics`](/utilities/haptics) in the `onChanged` callback for enhanced user experience on supported devices.
* Always ensure tab IDs are unique within a single `NeoTabBar` to prevent errors.
## Integration Notes
* `NeoTabBar` uses [`NeoButton`](/widgets/buttons/button) widgets internally, which means it inherits all the theming and interaction behaviors of buttons.
* The active tab uses the [`filled`](/widgets/buttons/button#neobuttonvariant) variant while inactive tabs use the [`ghost`](/widgets/buttons/button#neobuttonvariant) variant.