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- IMP: Always wrap this in a condition that checks for super user access.

• 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.

• Scroll root: by default fun-header walks its ancestors to find the first scrollable element, then falls back to window. Pass scroll-root (web component) / scrollRoot (React) to pin an explicit scroll container — useful when the scroll container is outside the header’s ancestor chain, e.g. a shell layout or micro-frontend wrapper.

Examples

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

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

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)

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

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