Prometheus Design System

Breadcrumb

On Status sub-pages, the active Navbar button expands to 'Status › Target health' style trail. Rendered inside the same header slot as the Status button, not as a dedicated breadcrumb region.

DO

Use only on level-2 routes under Status. Level-1 routes render the plain Navbar active state.

DON'T

Exceed two trail segments — Prometheus routes are not deep.

Design

default

Status›Target health

Two-segment trail. Parent segment is the Status nav button; child segment is the current page name.

Component reference (screenshots)
/targets
/targets light
/rules
/rules light
/service-discovery
/service-discovery light
/status
/status light
/tsdb-status
/tsdb-status light
/flags
/flags light
/config
/config light
/alertmanager-discovery
/alertmanager-discovery light

Placeholder screenshots — the audited app is live at prometheus-e83j.onrender.com.

Implementation

<nav aria-label="breadcrumb">
  <a href="/status">Status</a> › <span aria-current="page">Target health</span>
</nav>

Layout

PropertyValue
border-radius4px sm
separator›

Accessibility

ARIAWrap trail in <nav aria-label='breadcrumb'>; separators are aria-hidden.