Header

fun-header is a sticky, slot-driven page header.

Built-in Behavior

  • Scroll-driven mode: switches to scrolled mode once scroll offset exceeds breakpoint + breakpointHysteresis; returns to default below breakpoint - breakpointHysteresis.
  • Title: accepts either a pageTitle string prop or a slot="title" element (e.g. fun-field-label). Both are single-line with end-truncated ellipsis. The title shrinks from h1 to h2 in scrolled mode.
  • Subtitle: collapses with a CSS grid animation when scrolled. Always single-line with ellipsis.
  • Auto slot assignment: direct unslotted fun-button children are automatically assigned slot="primary" (variant primary) or slot="secondary" (all other variants).
  • Action button sizing: fun-button elements in slot="primary", slot="secondary", and inside fun-button-group[slot="primary"] are kept at size="md" via a MutationObserver.
  • Actions layout (left to right): slot="super" → slot="tertiary" → slot="secondary" → slot="primary". Each action slot only renders if content is present.
  • slot="super": optional superuser dropdown — quiet button trigger with eye + caret-down icons in warning colour. Hidden from regular users.
  • slot="tertiary": optional overflow dropdown — secondary button trigger with an ellipsis icon. Items receive full-width layout inside the dropdown.
  • slot="secondary": inline secondary actions. Button text is hidden on mobile via CSS.
  • slot="primary": inline primary action, rightmost. Supports a single fun-button or a fun-button-group. Button text is hidden on mobile via CSS.
  • Extra row (slot="extra" + slot="extra-right"): collapses with a CSS grid animation when scrolled, unless showExtraOnScroll is true.
  • Breadcrumbs: rendered above the header when breadcrumbsLinks has at least one link and a title is present. Hidden when total crumb count (links + current) is one or fewer.

Examples

React code
Web Components code

Index pages

Here is an example of typical index page. Full page demo here

  • Does not have breadcrumb
  • Has description
  • Actions:
    • One primary action : either Button group or regular button
    • Max. 1 secondary action with icon
    • No tertiary actions
    • Optional super user actions
React code
Web components code

Details pages

Here is an example of typical details page. Full page demo here

  • Required breadcrumb starting fron index page (moving away from home as root)
  • Text or FunFieldLabel (fun-field-label) as title
  • Optional badge for
    • Status (fill with color, no icons)
    • Type (Outline neutral with icon/brandlogo)
  • Actions:
    • Max one primary button based on the context.
    • Max. 2 secondary action with icon. Edit is always secondary.
    • Tertiary actions in dropdown triggered by ellipsis (awalwys in the order of below with divider between each section)
      • Data exploration : Open in data explorer, Open in data chat
      • Entity speicific actions : Edit name, Reconnect etc.
      • Duplicate, Copy to workspace(s)
      • Disable & delete (always in text-fun-danger)
    • Optional super actions
React code
Web components code

Edit pages

Here is an example of typical Edit page. Full page demo here

  • Breadcrumb: Starts from index page (not home)> entity > Edit
  • Title: always the name of the enitity either as text or FunFieldLabel (fun-field-label)
  • Actions
    • Primary: Save (with icon: check)
    • Secondary: Cancel (with icon: times)
React code
Web components code

Create page: Default

Here is an example of typical Edit page. Full page demo here

  • Breadcrumb:
    • Rule: Always ends with create
    • Entity > Listing [optiona] > Create (ex: Expors > Destinations > Create, Metrics > Create)
  • Header:
    • Title should always be similar to the CTA that triggers it (ex: Connect data source, Crate export etc)
    • When the create is a step after slecting from list - it should be in a badge - outlined, neutral with brand logo.
  • Actions:
    • Save & Cancel
React code
Web components code

Create page: with wizerd

Here is an example of typical Edit page. Full page demo here

  • Breadcrumb:
    • Rule: Always ends with create
    • Entity > Listing [optiona] > Create (ex: Expors > Destinations > Create, Metrics > Create)
  • Header:
    • Title should always be similar to the CTA that triggers it (ex: Connect data source, Crate export etc)
    • When the create is a step after slecting from list - it should be in a badge - outlined, neutral with brand logo.
  • Actions:
    • Save & Cancel
React code
Web components code

Specifications

Properties

Property Type Default Description
pageTitle string undefined Title text shown in the header.
subtitle string undefined Subtitle text shown next to the title.
breadcrumbsLinks BreadcrumbLink[] [] Breadcrumb links shown in fallback fun-breadcrumbs.
breakpoint number 33 Base scroll threshold for switching mode.
breakpointHysteresis number 30 Extra threshold offset used to avoid rapid toggling.
showExtraOnScroll boolean false Keeps the extra slot visible when scrolled. Subtitle still collapses.

Slots

Slot Description
badge Optional badge shown to the right of the title.
super Items rendered inside the super actions dropdown.
secondary Secondary actions. Collapses behind the mobile more menu.
primary Primary actions shown as the main right-side action(s).
extra Optional content row rendered below the main title/actions row.
extra-right Optional right-aligned content area rendered next to extra.

Search Gunnel

Powered byAlgolia