UxPageTitle
components/ux/PageTitle.vue
Underlined page-title bar with optional breadcrumb trail, back link, right-aligned actions, and "chin" slots below the rule. In a sticky band run with `title` (c106) it joins on its own: it pins beside the filter as a sticky box frozen at its rest height and restyles inside it — 15px with its hairline faded out, back link / #right / #far-right / #chin stepping aside — then settles back in place on unpin. It drives the band's scroll mode.
Back to Agents
Agents
/
Agent Details
Linked breadcrumbs + right slot
Chin slots below the rule
Agents
128 total
In a sticky band (c106)
When the layout's
UxStickyBand runs with title, this title joins it on its own: once it scrolls to the pin line it pins beside the filter as a sticky box frozen at its rest height, and restyles inside it — 15px with its hairline faded out, the back link, #right, #far-right and #chin stepping aside — so the page never moves. Scrolling back to the top, it settles to its rest size in place. It must be a direct child of the page (a sticky box can't leave its parent): set the row's height with rowMinHeight, not a wrapper. :sticky="false" opts a title out. Live: UxStickyBand · /pages/sticky-title. Scenarios
Simple Title
Back to a rather long index page name
Organization
/
Infrastructure
/
Kubernetes
/
An Unusually Long Detail Page Title That Tests Wrapping
components/ux/PageTitle.vue
Usage
<UxPageTitle
backText = "undefined"
:breadcrumb = "breadcrumb"
:titleSize = "28"
:rowMinHeight = "rowMinHeight"
:sticky = "true"
>
Content here
</UxPageTitle>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| backText | String | undefined | When set, shows a "← text" back link above the title; clicking emits back |
| breadcrumb | String | Object | Array | undefined | Crumbs before the title. String → plain crumb; { title, to } → linked crumb; array combines several |
| titleSize | Number | 28 | Title font size in px — bump for hero detail-page titles. Pinned in a band, the title shows at STICKY_BAND.titleSize instead. |
| rowMinHeight | Number | undefined | Minimum height (px) of the title row, which bottom-aligns the title and its rule in it — e.g. qdash PageHeader's 44px, without a wrapping box (which would trap the sticky title). |
| sticky | Boolean | true | Join the page's sticky band when it runs with `title` (UxStickyBand). false opts out. Only the first joined title on a page drives the band. |
Events
| Event | Description |
|---|---|
| back | When the back link is clicked |
Slots
| Slot | Description |
|---|---|
| default | The page title text |
| right | Right-aligned content inside the underlined row (actions, metrics) |
| far-right | Content outside the underline on the far right |
| chin | Row below the title bar (filters, tabs) |
| chin-right | Right-aligned content in the chin row |