Tab Navigation Panel
Underline tab row for within-page navigation with counts on two tabs and an active panel content area.
Underline tab row for within-page navigation with counts on two tabs and an active panel content area.
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
Tab Navigation Panel is the within-page section nav for a project or resource: four underline tabs, Overview active, Deployments with a count of 24, Logs with a count of 1,204, and Settings with no count. Below the tab row the active panel header appears, Overview, Health, traffic, and the latest deploys for Apollo, with an Updated Jun 12, 14:02 timestamp at the right and a dashed drop zone for the panel body.
Tabs are one array with label, active, and optional count fields. Counts carry context that the tab label alone cannot; 1,204 log entries tells the operator whether the system is silent or noisy before clicking.
Reach for this block below a page header on any resource detail page, wired to your router so each tab drives a route segment and aria-current tracks the active path.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the project detail tab row. Other configurations:
Tip: put a count only where the number helps the user decide whether to visit the tab, not on every tab by default.