---
title: tab-bar
description: The bottom (or top) tab bar: items with icon, label, and optional active-when expression and action.
status: shipped
url: https://getairframe.com/framewerk/reference/nodes/tab-bar
---

> Part of the Framewerk docs. Index of every page: /framewerk/llms.txt

# `tab-bar`

The bottom (or top) tab bar: items with icon, label, and optional active-when expression and action.

## Example

**tab-bar**

```json
{
  "id": "home",
  "layout": {
    "_id": "root",
    "type": "column",
    "children": [
      {
        "_id": "body",
        "type": "text",
        "content": "Home body",
        "padding": 16
      },
      {
        "_id": "tabs",
        "type": "tab-bar",
        "items": [
          {
            "icon": "home",
            "label": "Home",
            "active": true
          },
          {
            "icon": "search",
            "label": "Search",
            "action": "setState(tab, search)"
          },
          {
            "icon": "settings",
            "label": "Settings",
            "action": "setState(tab, settings)"
          }
        ]
      }
    ]
  }
}
```

## States

`activeWhen` expression, per-item `action`. Common to every node: `hover` / `press` / `focus` CSS bags, `showWhen` / `hideWhen`, `animate`.

## Stability

This node type is part of the format contract: adding an optional prop is additive; removing the node or narrowing an existing prop is breaking. Prop tables are generated from the schema; this page carries the prose.