Frappe UIFrappe UI

PageHeader ​

App-shell headers: a desktop PageHeader, a mobile PageHeaderMobile, and the PageHeaderBase primitive they share. A page declares its header; it renders into the layout's <PageHeaderTarget />.

SpacesEngineering
vue
<script setup lang="ts">
import { Breadcrumbs, Button, PageHeader } from 'frappe-ui'
</script>

<template>
  <div
    class="w-full overflow-hidden border-t border-l border-r bg-surface-base"
  >
    <PageHeader>
      <Breadcrumbs
        :items="[
          { label: 'Spaces', route: '#' },
          { label: 'Engineering', route: '#' },
        ]"
      />
      <Button label="New discussion" variant="solid" />
    </PageHeader>
  </div>
</template>

Clicking the header's empty area scrolls the page to the top. Interactive elements are ignored; opt others out with data-no-scroll-top.

PageHeaderMobile ​

Keeps its title centered regardless of the #left / #right control widths, on a single line with a trailing ellipsis.

PageHeaderBackButton goes back through history, the way the browser's own back button does. It only navigates to to when there is no in-app history to go back to, so give it a to that makes the page recoverable on a cold load.

A discussion title that is long enough to need centering

vue
<script setup lang="ts">
import { Button, PageHeaderMobile, PageHeaderMobileTitle } from 'frappe-ui'
</script>

<template>
  <div class="w-80 overflow-hidden border border-b-0 bg-surface-base">
    <PageHeaderMobile>
      <template #prefix>
        <Button
          variant="ghost"
          size="md"
          icon="lucide-chevron-left"
          label="Back"
        />
      </template>
      <PageHeaderMobileTitle
        title="A discussion title that is long enough to need centering"
      />
      <template #suffix>
        <Button variant="ghost" icon="lucide-more-horizontal" label="Options" />
      </template>
    </PageHeaderMobile>
  </div>
</template>

PageHeaderBase ​

The unstyled <header> primitive behind both. Use it directly for a custom strip — a toolbar or a second row — that shares the same target.

API Reference ​

PageHeader ​

default
—

The header's contents — title, breadcrumbs, actions.

PageHeaderBase ​

default
—

The header's contents.

PageHeaderTitle ​

Show types
typescript
import type { RouteLocationRaw } from 'vue-router'

export interface PageHeaderMobileProps {
  /** Title shown centered in the header. Overridden by the default slot. */
  title?: string
}

export interface PageHeaderMobileTitleProps {
  /** Title text. Overridden by the default slot. */
  title?: string
}

export interface PageHeaderBackButtonProps {
  /**
   * Fallback destination, used only when there is no in-app history to go back to
   * (a cold load onto a deep link). Taps otherwise go back through history.
   */
  to?: RouteLocationRaw

  /** Accessible label for the button. */
  label?: string
}
title
string

Title text. Overridden by the default slot.

default
—

Overrides `title` with custom markup.

PageHeaderMobile ​

Show types
typescript
import type { RouteLocationRaw } from 'vue-router'

export interface PageHeaderMobileProps {
  /** Title shown centered in the header. Overridden by the default slot. */
  title?: string
}

export interface PageHeaderMobileTitleProps {
  /** Title text. Overridden by the default slot. */
  title?: string
}

export interface PageHeaderBackButtonProps {
  /**
   * Fallback destination, used only when there is no in-app history to go back to
   * (a cold load onto a deep link). Taps otherwise go back through history.
   */
  to?: RouteLocationRaw

  /** Accessible label for the button. */
  label?: string
}
title
string

Title shown centered in the header. Overridden by the default slot.

prefix
—

A control leading the centered title — usually a `PageHeaderBackButton`.

default
—

The centered title. Overrides `title`; usually a `PageHeaderMobileTitle`.

suffix
—

A control trailing the centered title — usually an action button.

PageHeaderMobileTitle ​

Show types
typescript
import type { RouteLocationRaw } from 'vue-router'

export interface PageHeaderMobileProps {
  /** Title shown centered in the header. Overridden by the default slot. */
  title?: string
}

export interface PageHeaderMobileTitleProps {
  /** Title text. Overridden by the default slot. */
  title?: string
}

export interface PageHeaderBackButtonProps {
  /**
   * Fallback destination, used only when there is no in-app history to go back to
   * (a cold load onto a deep link). Taps otherwise go back through history.
   */
  to?: RouteLocationRaw

  /** Accessible label for the button. */
  label?: string
}
title
string

Title text. Overridden by the default slot.

prefix
—

A leading glyph next to the title text — keeps its natural size while the text truncates.

default
—

Overrides `title` with custom markup.

PageHeaderBackButton ​

Show types
typescript
import type { RouteLocationRaw } from 'vue-router'

export interface PageHeaderMobileProps {
  /** Title shown centered in the header. Overridden by the default slot. */
  title?: string
}

export interface PageHeaderMobileTitleProps {
  /** Title text. Overridden by the default slot. */
  title?: string
}

export interface PageHeaderBackButtonProps {
  /**
   * Fallback destination, used only when there is no in-app history to go back to
   * (a cold load onto a deep link). Taps otherwise go back through history.
   */
  to?: RouteLocationRaw

  /** Accessible label for the button. */
  label?: string
}
to
string | kt | Tt

Fallback destination, used only when there is no in-app history to go back to (a cold load onto a deep link). Taps otherwise go back through history.

label
= "Back"
string

Accessible label for the button.

MultiSelectPassword