UxPageTitle
components/ux/PageTitle.vue
Underlined page-title bar with optional breadcrumb trail, back link, right-aligned actions, and "chin" slots below the rule.
Back to Agents
Agents
/
Agent Details
Linked breadcrumbs + right slot
Chin slots below the rule
Agents
128 total
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 = "24"
>
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 | 24 | Title font size in px — bump for hero detail-page titles |
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 |