Components

Header

(external link)

ld-header #

The ld-header component contains a logo, a site name and slots for additional custom content, like a menu, buttons, search input or anything else. Slots can be used to place content left or right of the logo and site name, or on the very right side of the header. The ld-header component takes care of the following:

It adds a space between all its direct children.
It only allows small buttons as children and automatically applies props accordingly.

You can easily make the header sticky and make it hide when the user is scrolling down by using the sticky and hide-on-scroll props.

Examples #

Default #

<ld-header site-name="Liquid Oxygen"></ld-header>

<header class="ld-header">
  <div class="ld-header__container">
    <svg aria-label="Merck KGaA, Darmstadt, Germany" class="ld-header__logo ld-icon" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M20.5921 7.5H19.1a.2955.2955 0 0 0-.1926.0727l-2.9895 2.6378c-1.0241.9043-2.4024 1.412-3.9177 1.412-1.5796 0-3.0088-.5544-4.0444-1.5266 0 0-2.199-1.9406-2.2179-1.958-.422-.369-1.0028-.624-1.6714-.6379h-1.785C2.126 7.5 2 7.6184 2 7.7645v7.4118c0 .7316.6301 1.3237 1.4083 1.3237h.9133c.1564 0 .2831-.1194.2831-.2661l.0007-2.6375c0-.6893.5987-1.2579 1.3204-1.2579 1.3434 0 2.3067 1.0814 3.177 1.8037 1.0661.8849 1.8871 1.7374 2.8974 1.7374 1.0092 0 1.8306-.8525 2.8966-1.7374.8707-.7223 1.834-1.8037 3.1767-1.8037.718 0 1.3137.5629 1.3208 1.2468v1.591c0 .7316.6305 1.3224 1.4089 1.3224h.6079c.1588 0 .3061.0013.3061.0013.1561 0 .2828-.1194.2828-.2658V8.8237C22 8.0925 21.3692 7.5 20.5921 7.5Z" fill="currentcolor"/></svg>
    <div class="ld-header_site-name ld-typo--h5">Liquid Oxygen</div>
  </div>
</header>

<LdHeader siteName="Liquid Oxygen" />

Liquid Oxygen

With linked logo #

<ld-header site-name="Liquid Oxygen" logo-title="Home" logo-url="#"></ld-header>

<header class="ld-header">
  <div class="ld-header__container">
    <a aria-label="Home" class="ld-header__logo-wrapper" href="#">
      <svg class="ld-header__logo ld-icon" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M20.5921 7.5H19.1a.2955.2955 0 0 0-.1926.0727l-2.9895 2.6378c-1.0241.9043-2.4024 1.412-3.9177 1.412-1.5796 0-3.0088-.5544-4.0444-1.5266 0 0-2.199-1.9406-2.2179-1.958-.422-.369-1.0028-.624-1.6714-.6379h-1.785C2.126 7.5 2 7.6184 2 7.7645v7.4118c0 .7316.6301 1.3237 1.4083 1.3237h.9133c.1564 0 .2831-.1194.2831-.2661l.0007-2.6375c0-.6893.5987-1.2579 1.3204-1.2579 1.3434 0 2.3067 1.0814 3.177 1.8037 1.0661.8849 1.8871 1.7374 2.8974 1.7374 1.0092 0 1.8306-.8525 2.8966-1.7374.8707-.7223 1.834-1.8037 3.1767-1.8037.718 0 1.3137.5629 1.3208 1.2468v1.591c0 .7316.6305 1.3224 1.4089 1.3224h.6079c.1588 0 .3061.0013.3061.0013.1561 0 .2828-.1194.2828-.2658V8.8237C22 8.0925 21.3692 7.5 20.5921 7.5Z" fill="currentcolor"/></svg>
    </a>
    <div class="ld-header_site-name ld-typo--h5">Liquid Oxygen</div>
  </div>
</header>

<LdHeader siteName="Liquid Oxygen" logoTitle="Home" logoUrl="#" />

Liquid Oxygen

With custom logo #

<ld-header logo-title="Rocket Inc." site-name="Rocket Science">
  <ld-icon name="rocket" size="lg" slot="logo"></ld-icon>
</ld-header>

<header class="ld-header">
  <div class="ld-header__container">
    <svg aria-label="Rocket Inc." class="ld-icon ld-icon--lg" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="m16.9524 14.422.0379.0948c.6824 1.4596.3791 3.2036-.7773 4.36l-1.6492 1.6492c-.3602.3792-.9857.2654-1.2132-.2085l-1.2322-2.6729-1.4407.9099c-.3602.2086-.8152.1517-1.0995-.1327l-3.981-3.9809a.8934.8934 0 0 1-.1326-1.0995l.9099-1.4407-2.673-1.2322c-.4738-.2085-.5876-.834-.2084-1.2132L5.1423 7.806c1.1564-1.1374 2.8814-1.4597 4.36-.7773l.0759.019c4.4927-4.2463 8.7039-3.882 10.2773-3.6924A.726.726 0 0 1 20.5 4c.1896 1.5734.6987 5.9292-3.5476 10.422zm-3.7345-6.4833c-.7962.7962-.7962 2.0663 0 2.8625.7962.7773 2.0852.7773 2.8624 0 .7773-.7962.7962-2.0663 0-2.8624-.7961-.7962-2.0662-.7962-2.8624 0zm-7.6587 10.161c0 .2085.1706.3601.3602.3601.0415-.0023.0866-.0046.135-.0071.3502-.0178.8746-.0446 1.4573-.1445l1.3468.626c.0661.0308.0778.1198.0206.1651-1.5787 1.253-3.6632 1.2568-4.7117 1.2587a17.4489 17.4489 0 0 0-.3072.0022c-.2085 0-.3602-.1706-.3602-.3602l.0021-.1117c.0174-.9543.0564-3.0902 1.399-4.7683a.098.098 0 0 1 .1651.0204l.6447 1.3669c-.1138.6635-.1517 1.2511-.1517 1.5924z" fill="currentcolor"/></svg>
    <div class="ld-header_site-name ld-typo--h5">Rocket Science</div>
  </div>
</header>

<LdHeader siteName="Liquid Oxygen" logoTitle="Home" logoUrl="#">
  <LdIcon name="rocket" size="lg" slot="logo" />
</LdHeader>

Rocket Science

With buttons #

<ld-header class="header-container">
  <ld-typo tag="div" variant="h5">
    Liquid<span class="hide-on-sm"> Oxygen</span>
  </ld-typo>
  <ld-button slot="end" type="button">
    <ld-icon name="pen" size="sm"></ld-icon>
    Register
  </ld-button>
  <ld-button
    class="hide-on-lg"
    mode="ghost"
    slot="end"
    title="Login"
    type="button"
  >
    <ld-icon aria-label="Login" name="user" size="lg"></ld-icon>
  </ld-button>
  <ld-button
    class="hide-on-sm"
    mode="secondary"
    slot="end"
    type="button"
  >
    <ld-icon name="user" size="sm"></ld-icon>
    Login
  </ld-button>
</ld-header>

<style>
  .header-container {
    container-type: inline-size;
    container-name: header;
  }
  @container header (min-width: 32rem) {
    .hide-on-lg {
      display: none;
    }
  }
  @container header (max-width: calc(32rem - 1px)) {
    .hide-on-sm {
      display: none;
    }
  }
</style>

<header class="ld-header header-container">
  <div class="ld-header__container">
    <svg aria-label="Merck KGaA, Darmstadt, Germany" class="ld-header__logo ld-icon" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M20.5921 7.5H19.1a.2955.2955 0 0 0-.1926.0727l-2.9895 2.6378c-1.0241.9043-2.4024 1.412-3.9177 1.412-1.5796 0-3.0088-.5544-4.0444-1.5266 0 0-2.199-1.9406-2.2179-1.958-.422-.369-1.0028-.624-1.6714-.6379h-1.785C2.126 7.5 2 7.6184 2 7.7645v7.4118c0 .7316.6301 1.3237 1.4083 1.3237h.9133c.1564 0 .2831-.1194.2831-.2661l.0007-2.6375c0-.6893.5987-1.2579 1.3204-1.2579 1.3434 0 2.3067 1.0814 3.177 1.8037 1.0661.8849 1.8871 1.7374 2.8974 1.7374 1.0092 0 1.8306-.8525 2.8966-1.7374.8707-.7223 1.834-1.8037 3.1767-1.8037.718 0 1.3137.5629 1.3208 1.2468v1.591c0 .7316.6305 1.3224 1.4089 1.3224h.6079c.1588 0 .3061.0013.3061.0013.1561 0 .2828-.1194.2828-.2658V8.8237C22 8.0925 21.3692 7.5 20.5921 7.5Z" fill="currentcolor"/></svg>
    <div class="ld-header_site-name ld-header__grow ld-typo--h5">
      Liquid<span class="hide-on-sm"> Oxygen</span>
    </div>
    <button class="ld-button ld-button--brand-color ld-button--sm" type="button">
      <svg class="ld-icon ld-icon--sm" role="none" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.6192 15.1453a3.806 3.806 0 0 1 1.5674.3358c.4564.2056 1.0133.1824 1.3673-.1716L19.4353 4.4282c.4358-.4358.3698-1.1738-.227-1.3275A3.1966 3.1966 0 0 0 18.4098 3c-.5539 0-1.074.2154-1.4654.6068L5.5567 14.9944c-.0557.0557-.0163.1509.0625.1509zm.3803 1.3126H5.154a.5.5 0 0 0-.485.3787l-.639 2.5557c-.0894.3571.0277.6916.2536.9168.2252.2259.5597.3428.916.2536l2.5565-.639a.5.5 0 0 0 .3787-.4851v-.8455c0-1.1772-.958-2.1352-2.1354-2.1352zM21.5923 6.1824c0 .5542-.2154 1.0744-.6068 1.4658L9.5979 19.036c-.0557.0556-.1508.0162-.1508-.0625a3.806 3.806 0 0 0-.3358-1.5673c-.2057-.4565-.1826-1.0135.1715-1.3675L20.1635 5.1582c.4362-.4362 1.1748-.3697 1.3285.2276a3.194 3.194 0 0 1 .1003.7966z" fill="currentcolor"/></svg>
      Register
    </button>
    <button class="hide-on-lg ld-button ld-button--brand-color ld-button--ghost ld-button--sm ld-button--icon-only" title="Login" type="button">
      <svg aria-label="Login" class="ld-icon ld-icon--lg" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.9315 2C9.4767 2 7.455 3.6606 7.455 6.8376c0 2.0938.9386 4.1877 2.2383 5.4873.4332 1.1552-.4332 1.8051-.5776 1.8773-2.5993.9386-5.6318 2.6714-5.6318 4.3321v.6498c0 2.2383 4.4043 2.7437 8.4476 2.8159 4.1156-.0722 8.5199-.5776 8.5199-2.8159v-.6498c0-1.6607-3.0325-3.3935-5.6318-4.3321-.2166-.0722-1.083-.7221-.5776-1.8773 1.2996-1.2996 2.2383-3.3935 2.2383-5.4873C16.4803 3.6606 14.3864 2 11.9315 2z" fill="currentcolor"/></svg>
    </button>
    <button class="hide-on-sm ld-button ld-button--brand-color ld-button--secondary ld-button--sm" id="login-lg" type="button">
      <svg class="ld-icon ld-icon--sm" role="none" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.9315 2C9.4767 2 7.455 3.6606 7.455 6.8376c0 2.0938.9386 4.1877 2.2383 5.4873.4332 1.1552-.4332 1.8051-.5776 1.8773-2.5993.9386-5.6318 2.6714-5.6318 4.3321v.6498c0 2.2383 4.4043 2.7437 8.4476 2.8159 4.1156-.0722 8.5199-.5776 8.5199-2.8159v-.6498c0-1.6607-3.0325-3.3935-5.6318-4.3321-.2166-.0722-1.083-.7221-.5776-1.8773 1.2996-1.2996 2.2383-3.3935 2.2383-5.4873C16.4803 3.6606 14.3864 2 11.9315 2z" fill="currentcolor"/></svg>
      Login
    </button>
  </div>
</header>

<style>
  .header-container {
    container-type: inline-size;
    container-name: header;
  }
  @container header (min-width: 32rem) {
    .hide-on-lg {
      display: none;
    }
  }
  @container header (max-width: calc(32rem - 1px)) {
    .hide-on-sm {
      display: none;
    }
  }
</style>

<LdHeader className="header-container">
  <LdTypo tag="div" variant="h5">
    Liquid<span className="hide-on-sm"> Oxygen</span>
  </LdTypo>
  <LdButton slot="end" type="button">
    <LdIcon name="pen" size="sm"></LdIcon>
    Register
  </LdButton>
  <LdButton
    className="hide-on-lg"
    mode="ghost"
    slot="end"
    title="Login"
    type="button"
  >
    <LdIcon aria-label="Login" name="user" size="lg"></LdIcon>
  </LdButton>
  <LdButton
    className="hide-on-sm"
    mode="secondary"
    slot="end"
    type="button"
  >
    <LdIcon name="user" size="sm"></LdIcon>
    Login
  </LdButton>
</LdHeader>

<style>{`
  .header-container {
    container-type: inline-size;
    container-name: header;
  }
  @container header (min-width: 32rem) {
    .hide-on-lg {
      display: none;
    }
  }
  @container header (max-width: calc(32rem - 1px)) {
    .hide-on-sm {
      display: none;
    }
  }
`}</style>

Liquid Oxygen

<ld-header site-name="Liquid Oxygen">
  <ld-button mode="ghost" slot="start" title="Open menu" type="button">
    <ld-icon aria-label="Open menu" name="burger-menu" size="lg"></ld-icon>
  </ld-button>
</ld-header>

<header class="ld-header">
  <div class="ld-header__container">
    <button class="ld-button ld-button--brand-color ld-button--ghost ld-button--sm ld-button--icon-only" title="Open menu" type="button">
      <svg aria-label="Open menu" class="ld-icon ld-icon--lg" viewBox="0 0 24 24" fill="none"><rect x="5" y="6" width="14" height="2" rx="1" fill="currentcolor"/><rect x="5" y="11" width="14" height="2" rx="1" fill="currentcolor"/><rect x="5" y="16" width="14" height="2" rx="1" fill="currentcolor"/></svg>
    </button>
    <svg aria-label="Merck KGaA, Darmstadt, Germany" class="ld-header__logo ld-icon" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M20.5921 7.5H19.1a.2955.2955 0 0 0-.1926.0727l-2.9895 2.6378c-1.0241.9043-2.4024 1.412-3.9177 1.412-1.5796 0-3.0088-.5544-4.0444-1.5266 0 0-2.199-1.9406-2.2179-1.958-.422-.369-1.0028-.624-1.6714-.6379h-1.785C2.126 7.5 2 7.6184 2 7.7645v7.4118c0 .7316.6301 1.3237 1.4083 1.3237h.9133c.1564 0 .2831-.1194.2831-.2661l.0007-2.6375c0-.6893.5987-1.2579 1.3204-1.2579 1.3434 0 2.3067 1.0814 3.177 1.8037 1.0661.8849 1.8871 1.7374 2.8974 1.7374 1.0092 0 1.8306-.8525 2.8966-1.7374.8707-.7223 1.834-1.8037 3.1767-1.8037.718 0 1.3137.5629 1.3208 1.2468v1.591c0 .7316.6305 1.3224 1.4089 1.3224h.6079c.1588 0 .3061.0013.3061.0013.1561 0 .2828-.1194.2828-.2658V8.8237C22 8.0925 21.3692 7.5 20.5921 7.5Z" fill="currentcolor"/></svg>
    <div class="ld-header_site-name ld-typo--h5">Liquid Oxygen</div>
  </div>
</header>

<LdHeader siteName="Liquid Oxygen">
  <LdButton mode="ghost" slot="start" title="Open menu" type="button">
    <LdIcon aria-label="Open menu" name="burger-menu" size="lg" />
  </LdButton>
</LdHeader>

Liquid Oxygen

Sticky #

You can add the sticky property to the ld-header web component, to make the component stick to the top of the page.

<ld-header site-name="Liquid Oxygen" sticky></ld-header>

<!-- Add the class `ld-header--hidden` to hide the sticky header. -->
<header class="ld-header ld-header--sticky">
  <div class="ld-header__container">
    <svg aria-label="Merck KGaA, Darmstadt, Germany" class="ld-header__logo ld-icon" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M20.5921 7.5H19.1a.2955.2955 0 0 0-.1926.0727l-2.9895 2.6378c-1.0241.9043-2.4024 1.412-3.9177 1.412-1.5796 0-3.0088-.5544-4.0444-1.5266 0 0-2.199-1.9406-2.2179-1.958-.422-.369-1.0028-.624-1.6714-.6379h-1.785C2.126 7.5 2 7.6184 2 7.7645v7.4118c0 .7316.6301 1.3237 1.4083 1.3237h.9133c.1564 0 .2831-.1194.2831-.2661l.0007-2.6375c0-.6893.5987-1.2579 1.3204-1.2579 1.3434 0 2.3067 1.0814 3.177 1.8037 1.0661.8849 1.8871 1.7374 2.8974 1.7374 1.0092 0 1.8306-.8525 2.8966-1.7374.8707-.7223 1.834-1.8037 3.1767-1.8037.718 0 1.3137.5629 1.3208 1.2468v1.591c0 .7316.6305 1.3224 1.4089 1.3224h.6079c.1588 0 .3061.0013.3061.0013.1561 0 .2828-.1194.2828-.2658V8.8237C22 8.0925 21.3692 7.5 20.5921 7.5Z" fill="currentcolor"/></svg>
    <div class="ld-header_site-name ld-typo--h5">Liquid Oxygen</div>
  </div>
</header>

<LdHeader siteName="Liquid Oxygen" sticky />

Liquid Oxygen

As the CSS property position: sticky; is used here to achieve this behavior, the ld-header "sticks" to its nearest ancestor that has a "scrolling mechanism" (created when overflow is set to hidden, scroll, auto or overlay), even if that ancestor isn't the nearest actually scrolling ancestor. So you need to be aware of where you place the ld-header in the DOM.

Hide on scroll #

If you want the header to hide (slide up behind the top of the window) when the user is scrolling down, you can add the hide-on-scroll prop to the ld-header web component. With this prop set, the header will hide when scrolling down and show again, when scrolling up.

This prop only works in combination with the sticky prop.

CSS Variables #

Variable	Description	Default
`--ld-header-height`	Height of the `ld-header` component.	3.125rem
`--ld-header-max-width`	Max width that the header content expands to.	90rem

Properties #

Property	Attribute	Description	Type	Default
`hidden`	`hidden`	Hides header.	`boolean`	`false`
`hideOnScroll`	`hide-on-scroll`	Hide the header when the user scrolls down and show it again, when the user scrolls up.	`boolean`	`false`
`key`	`key`	for tracking the node's identity when working with lists	`string \| number`	`undefined`
`logoTitle`	`logo-title`	Title attribute of the logo link.	`string`	`undefined`
`logoUrl`	`logo-url`	URL that the logo links to.	`string`	`undefined`
`ref`	`ref`	reference to component	`any`	`undefined`
`siteName`	`site-name`	Name shown on the right side of the logo.	`string`	`undefined`
`sticky`	`sticky`	Make the header sticky.	`boolean`	`false`

Slots #

Slot	Description
`"end"`	Items on the right side of the header.
`"logo"`	Custom logo.
`"start"`	Items on the left side of the header.

Shadow Parts #

Part	Description
`"container"`	Actual header element that limits the width of the header content
`"logo"`	The default logo
`"logo-wrapper"`	The element wrapping the logo slot (div or anchor, if linked)
`"site-name"`	`ld-typo` element containing the site name
`"spacer"`	Element adding the space between the default slot and the end slot

Dependencies #

Depends on #

Graph #

graph TD;
  ld-header --> ld-icon
  ld-header --> ld-typo
  style ld-header fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS

ld-header #

Examples #

Default #

With linked logo #

With custom logo #

With buttons #

With burger menu button #

Sticky #

Hide on scroll #

CSS Variables #

Properties #

Slots #

Shadow Parts #

Dependencies #

Depends on #

Graph #