---
alias: "fc.tabs"
aliases:
  - fc.tabs
  - shared.components.material.MaterialTabsSet
category: layout
module: Core
---

# fc.tabs

Page-level tab bar that creates URL-driven tab navigation with scrollable Material-UI tabs.

## When to Use
- Create top-level tab navigation on a page where each tab has its own URL segment
- Switch between different content views using browser-navigable tabs
- Build tabbed layouts where tab state persists in the URL

## Key Props
| Prop | Type | Required | What it controls |
|------|------|----------|------------------|
| `layouts` | TabInfo[] | Yes | Array of tab definitions: `{ label: string, urlValue?: string }` |
| `urlKey` | string | No | URL query parameter key used to track the active tab in the browser URL |

### TabInfo Structure
| Field | Type | Required | Description |
|-------|------|----------|-------------|
| `label` | string | Yes | Display text for the tab |
| `urlValue` | string | No | Value written to the URL when this tab is active |

## Descendants
Yes -- each descendant corresponds to a tab panel. The active tab index determines which descendant is rendered via `<Children index={value} />`.

## Composition Patterns
- `fc.page` > `fc.tabs` > `fc.tab.content` (one per tab)
- `fc.tabs` > any component (rendered as indexed tab panels)

## Gotchas
- This is DIFFERENT from `fc.tabs.card` -- `fc.tabs` creates URL segments for navigation, while `fc.tabs.card` is a visual-only card-level tab set.
- The `layouts` prop defines the tab labels and URL values; descendants define the tab content. The count of `layouts` must match the count of descendants.
- Tab state is managed via `useTabs` hook which syncs with the URL. Changing tabs updates the browser URL.
- The tab bar is scrollable (`variant="scrollable"`) to handle many tabs without overflow.
- Registered with category `layout`.

## Manifest Example
```json
{
  "component": "fc.tabs",
  "props": {
    "layouts": [
      { "label": "Details", "urlValue": "details" },
      { "label": "Items", "urlValue": "items" },
      { "label": "History", "urlValue": "history" }
    ],
    "urlKey": "tab"
  },
  "descendants": [
    { "component": "fc.tab.content", "descendants": [...] },
    { "component": "fc.tab.content", "descendants": [...] },
    { "component": "fc.tab.content", "descendants": [...] }
  ]
}
```

## AI Parse Notes
- **Primary intent:** Declarative Mystique component definition for manifests.
- **Selection signals:** Match by `alias`, category, and required `Key Props`.
- **Assembly hints:** Combine with compatible parent/child components listed in `Composition Patterns`.
- **Safety checks:** Validate required props and data bindings before manifest generation.
