PageHeader

Page title with optional breadcrumbs, subtitle and action slot. Size prop: xs, sm, md, lg, xl.

Import

Vue

import { UiPageHeader } from '@ziyarago/ui/vue'

Sizes

Bookings

All upcoming trips

Bookings

All upcoming trips

Bookings

All upcoming trips

Bookings

All upcoming trips

Bookings

All upcoming trips

Vue

<UiPageHeader size="xs" title="Bookings" subtitle="All upcoming trips" />

<UiPageHeader size="sm" title="Bookings" subtitle="All upcoming trips" />

<UiPageHeader size="md" title="Bookings" subtitle="All upcoming trips" />

<UiPageHeader size="lg" title="Bookings" subtitle="All upcoming trips" />

<UiPageHeader size="xl" title="Bookings" subtitle="All upcoming trips" />

Title and subtitle

Bookings

Manage upcoming Umrah group departures.

Vue

<UiPageHeader
  title="Bookings"
  subtitle="Manage upcoming Umrah group departures."
 />

With breadcrumbs and actions

Ramadan Umrah

14 nights, Makkah and Madinah

Edit tour

Vue

<UiPageHeader
  title="Ramadan Umrah"
  subtitle="14 nights, Makkah and Madinah"
  :crumbs="[{ label: 'Tours', href: '#' }, { label: 'Umrah', href: '#' }, { label: 'Ramadan Umrah' }]"
>
  <template #actions>Edit tour</template>
</UiPageHeader>

API reference

Page title block with optional breadcrumbs, subtitle and an actions area.

Props

PropType and valuesDefaultDescription

titlerequiredstring—Page title (rendered as h1).

subtitlestring—Secondary text below the title.

crumbs{ label: string; href?: string }[]—Breadcrumb items shown above the title.

sizexssmmdlgxl'md'Title and subtitle size.

Slots

Vue: named slots. React: a prop with the same name; default is children.

actionsRight side of the header, usually buttons.