Tabbed Page Shell
A full-page shell with a sidebar, a named resource header, and a horizontal tab row delivering sub-view content below.
A full-page shell with a sidebar, a named resource header, and a horizontal tab row delivering sub-view content below.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Tabbed Page Shell is the detail-page frame, a standard sidebar (Acme, Team badge, five nav items with Projects active and a count of 12) leading into a content area whose header names the open record, Atlas Rebrand, prj_8h2k, updated Jun 12 14:02, with an Invite member button beside it. Directly below the header a three-tab row, Overview active, Activity, Settings, delivers the sub-view content.
Sidebar nav and tabs are separate typed arrays. The active tab content renders a project timeline dashed drop zone and a Details dl (Status, Owner, Due date, Priority, Label), giving the shell genuine weight on first view.
Reach for this block as the frame for any resource detail page where users switch between multiple sub-views without leaving the record. Wire tab selection to your router params and replace the content panel with the active tab component.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the project detail page. Other tabbed detail pages:
Tip: keep the tab count to three or four; more than four tabs on a detail page is a sign the record wants to be split into separate pages.