## Overview

Organize a type's alternative layouts as tabs.

The Alternative Layouts as Tabs widget displays a type's alternative layouts as tabs on a cplace page, so widgets and information on the page can be structured and arranged in a meaningful manner. Alternative layouts are **type-scoped**: every tab is a layout defined on the page's type and shared by all pages of that type. The widget cannot scope a tab set to a single page on a shared type — in script mode it filters which of the type's layouts show per page, but it cannot create a per-page-unique tab set. A surface that needs its own view switcher needs its own type.

## Use Cases

### Hub-and-Spoke Navigation
When an entity page needs to expose many functional areas from a single location. Users land on a summary view and can drill into specialized layouts (board view, checklist, attachments, permissions) through tabs. This pattern works well for complex entities like schedules or projects where users need quick access to various operational aspects.

### Dashboard View Switching
Dashboards often benefit from offering multiple visualization modes. A resource management dashboard might provide tabs for planning view, Gantt timeline, and manager overview. Users can switch perspectives while maintaining the same data context.

### Role-Based Interface Organization
Pages used by multiple user roles can organize tabs by workflow. Operational tabs appear first for daily users, while administrative or configuration tabs appear later for managers or administrators.

### Focused Subset Exposure
Not all alternative layouts need to appear as tabs. A page might have 13 alternative layouts but only expose 2 as tabs, with other layouts accessible through navigation tiles or direct URLs. This keeps the tab bar manageable while preserving full functionality.

## Behavior and Capabilities

### How It Works

The Layout Tabs Widget acts as a container that renders alternative type layouts as tabs. Each tab displays a completely different layout with its own widgets and configuration. The page context (current page UID) is preserved across tab switches.

```
+-------------------------------------------------------------------------+
|  Layout Tabs Widget                                                      |
|  +---------+-------------+----------+----------+----------+             |
|  | Board   | Checklist   | Gantt    | Settings | Files    |  <- Tab Bar |
|  +---------+-------------+----------+----------+----------+             |
+-------------------------------------------------------------------------+
|                                                                          |
|              (Selected alternative layout renders here)                  |
|                                                                          |
|              Each tab loads a completely different layout                |
|              with its own widgets and configuration                      |
|                                                                          |
+-------------------------------------------------------------------------+
```

### Prerequisite: Alternative Layouts

The widget does not create layouts. It only provides navigation between existing alternative layouts that must be defined at the type level first. If a type has no alternative layouts, this widget has nothing to display.

### Tab Content Loading

Tab content is lazy loaded on first activation. This means the initial page load is fast, and each tab's widgets only load when the user clicks that tab for the first time. Subsequent switches to a previously loaded tab are instantaneous.

### URL and History Integration

Tab selection updates the URL with a layout parameter, enabling bookmarking and sharing of specific tab views. Browser back/forward navigation works with tab history, providing a natural browsing experience.

### Localization

Tab labels come from the alternative layout's localized names. No additional localization configuration is needed within the widget itself.

### Configuration Modes

The widget supports two approaches for determining which tabs to display:

**Static Selection**: A predefined list of alternative layout names. Tab order matches the list order. This approach is simpler and covers most use cases.

**Dynamic Script Selection**: A script that determines tabs at runtime. Useful for permission-based tab visibility, conditional tabs based on page attributes, or dynamic tab ordering. This adds complexity but enables sophisticated scenarios.

## Design Considerations

### Tab Count and Cognitive Load

Too many tabs overwhelm users. Aim for 2-7 tabs that represent meaningfully distinct views. If more views are needed, consider using navigation tiles for overflow or organizing into fewer, broader categories.

### Tab Ordering Strategy

Place the most frequently used tabs first to minimize clicks for common tasks. Administrative or rarely-used tabs belong at the end. Consider the typical user journey when ordering.

### Consistent Tab Heights

When layouts within tabs have wildly different heights, the page can feel jarring as users switch between tabs. Strive for consistent widget heights across alternative layouts to create smooth visual transitions.

### Placement in Page Layout

The widget works best at the bottom of a page layout, after summary content. A common pattern uses progressive disclosure:

1. Navigation or context information at the top (Where am I?)
2. Summary visualizations in the middle (How are we doing?)
3. Layout tabs at the bottom for detailed views (Let me explore)

Full-width placement (spanning all columns) provides the most space for tab content.

### When Not to Use Layout Tabs

Avoid this widget when the views represent fundamentally different entities rather than perspectives on the same entity. If switching tabs feels like navigating to a different page conceptually, separate pages with their own URLs might be more appropriate.

Consider navigation tiles instead when the visual presentation of cards with icons and descriptions would better communicate the available options, or when you want a more prominent, intentional navigation choice rather than quick tab switching.

## Related Widgets

### Navigation Tiles
Provides card-based navigation with visual tiles. Use Navigation Tiles for more prominent, intentional navigation choices. Use Layout Tabs for quick perspective switching within the same context.

### Breadcrumb Widget
Helps orient users within the page hierarchy. Often paired with layout tabs on complex pages where users need both hierarchical context and horizontal perspective switching.

### Search Widgets in Tabs
Alternative layouts displayed in tabs commonly contain search-based widgets (embedded search as table, board widget). The tab becomes a container for these operational views while the default layout provides the summary.

## Evidence

Layouts where this widget was analyzed:
- `01-schedule-default`: 7 tabs, hub-and-spoke pattern
- `02-dashboardScheduleTm-default`: 2 tabs, selective exposure
- `03-dashboardProjectRM-default`: 6 tabs, full exposure with default selection

See: `specs/2026-01-04-widget-analyzer/analyses-layout-tabs-widget/`