Header Builder


This is optional since Header is created by default with id: 'header'


type create = (headerId: string) => IHeaderRegistry;

Usage Example

scheme.configureHeader(builder => {
  builder.create('appHeader'); // this will return a registry

You can call create with any id you like but only string is allowed. After you calling this function, you can register a config by chaining this method.


this function accept 2 parameters, a breakpoint and configuration


type registerConfig = (
  breakpoint: 'xs' | 'sm' | 'md' | 'lg' | 'xl',
  config: {
    position: 'relative' | 'sticky' | 'absolute' | 'fixed';
    clipped?: boolean | Dictionary<boolean>;
    initialHeight?: number | string;
    layer?: number
) => IHeaderRegistry;

Usage Example

Because registerConfig return the same registry, you can also chain another registerConfig to configure other breakpoints as many as you like. However, if there are duplicate breakpoint, the latest call will override because builder store it as object under the hood.

scheme.configureHeader(builder => {
    .registerConfig('xs', {
      position: 'sticky',
      clipped: true,
      initialHeight: 56,
    .registerConfig('md', {
      position: 'fixed',
    // you can register more breakpoint, if needed.


  • position
    • type : 'relative' | 'sticky' | 'absolute' | 'fixed'
    • required : yes
    • description : css position of the header
  • clipped
    • type : boolean | { [edgeSidebarId]: boolean }
    • default : false
    • description : has effect on EdgeSidebar, if true the header will stay on top of EdgeSidebar and will not be affected from persistentBehavior
    • example : you can control this behavior for specific EdgeSidebar (in case you have more than 1 EdgeSidebars, primarySidebar and secondarySidebar is an example id that you specify in EdgeSidebarBuilder)
    clipped: { primaryEdgeSidebar: true, secondaryEdgeSidebar: false }
  • initialHeight
    • type : number(px) | 'px' | 'rem' | 'em'
    • default : 56 (>=xs), 64 (>=md)
    • description : initial height of header for clipped EdgeSidebar, fixed InsetSidebar and Content to calculate offset. You don’t need to think about the condition, just use the same height when you inspect with devtool or from design. !important note, from v4.5.0+ this parameter will become css height of the Header
  • layer (v4.5.0+)