About this block

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.

When to use

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

• Breadcrumbs with actions
• Topbar with command hint

After

• Kpi cards row
• Data table

What you can display

One strong use is the project detail tab row. Other configurations:

• Team member tabs. Activity, Access, and Audit log with a count on Activity.
• API key tabs. Overview, Usage, and Logs with the request count on Logs.
• Three tab minimum. Two tabs are usually just two links; counts justify the tab pattern.

Tip: put a count only where the number helps the user decide whether to visit the tab, not on every tab by default.