Prometheus Design System

Dropdown Menu

Mantine Menu that opens from the Status nav button. Two section-labeled groups: 'Monitoring status' and 'Server status', each with icon+label menu items.

DO

Group related items under a labeled section when a menu exceeds 4 items.

DON'T

Nest dropdowns — flatten the route tree instead.

Design

default

Monitoring status
Target health
Rule health
Server status
Runtime & Build
TSDB status

Floating panel with two <menu> groups separated by a section label.

Component reference (screenshots)
/query
/query light
/alerts
/alerts light
/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

<Menu>
  <Menu.Label>Monitoring status</Menu.Label>
  <Menu.Item icon={IconTarget}>Target health</Menu.Item>
  …
</Menu>

Layout

PropertyValue
border-radius4px sm
padding8px 0
box-shadowcard elevation card

Accessibility

ARIAMenu items use role='menuitem'. Section label uses role='presentation'.
KeyboardArrow keys navigate items, Escape closes, Enter activates.