# Tri-Sidebar

> A tri-sidebar app-frame layout — a full-width header and footer wrap a left nav rail, a central main surface, a status strip, and a right widgets aside. Regions reflow from a single mobile column to the full three-column frame, mobile-first and design-system agnostic.

- Category: Layout
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Sienna
- Dark mode: no
- Access: premium (Atheros AI Pass)
- Tags: grid, skeleton
- Page: https://builder.atheros.ai/components/tri-sidebar
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_tri_sidebar/preview-d80e379c2239.webp

## Features

- Six app-frame regions — full-width header and footer wrap a nav rail, main surface, status strip, and widgets aside
- `grid-template-areas` drive the layout, so regions reorder by area name rather than DOM position
- Left nav rail with an active row, section divider, and a profile block pinned to the bottom via a flex spacer
- Central main surface stacks a hero figure, spark chart, tick axis, paragraph bars, and a legend
- Right aside stacks a calendar dot grid, activity feed rows, and a card pinned to the bottom
- Responsive reflow — single mobile column, a two-column nav split, then the full three-column frame at 768px
- Skeleton wireframe placeholders with color-mixed accents derived from design tokens
- Per-region accent colors computed via oklch color-mix from semantic palette tokens

## Accessibility

- **ARIA label** — `.bento` grid has `aria-label="Tri-sidebar layout"`
- **Busy state** — `.bento` starts `aria-busy="true"` and is cleared to `false` by `markReady()` once rendered
- **Reduced motion** — `prefers-reduced-motion: reduce` kills all animations and transitions
- **Focus-visible** — Interactive focus styling relies on `:focus-visible` from the design tokens
- **Dynamic viewport** — Uses `100dvh` for proper mobile viewport height

## Common questions

**Which frameworks is Tri-Sidebar available in?**

Tri-Sidebar ships as Vanilla, React + CSS and React + Tailwind — HTML, CSS, JS and React source you can copy, download or clone into Atheros AI Builder.

**Is the Tri-Sidebar layout component free?**

Tri-Sidebar is a premium component. Anyone can preview it; the source, downloads and AI customisation are included with Atheros AI Pass.

**Does Tri-Sidebar support dark mode?**

Tri-Sidebar ships a single light theme, drawn from the Sienna design system's tokens.

## Get the code

Preview Tri-Sidebar live, then sign in to copy or download the source, apply another design system, or ask the AI assistant to change it: https://builder.atheros.ai/components/tri-sidebar

Every component on https://builder.atheros.ai is also reachable from Claude Code, Cursor and Codex through the Atheros MCP server (paid plans). Component index: https://builder.atheros.ai/llms-components.txt