• Introduction
    • Why Liquid Oxygen
    • Getting started
      • React
      • Vue
  • Guides
    • CSS vs. Web Components
    • Component assets
    • Type checking and intellisense
    • Server-side rendering
    • Event handling
    • Form validation
    • Tailwind CSS integration
    • Design tokens
    • Sandbox applications
    • Troubleshooting
      • Popped-out element is rendered in wrong container
    • FAQ
  • Globals
    • Animations
    • Border-radius
    • Colors
    • Focus
    • Fonts
    • Shadows
    • Spacings
    • Theming
    • Typography
  • Components
    • Accordion
      • Accordion Panel
      • Accordion Section
      • Accordion Toggle
    • Background Cells
    • Badge
    • Breadcrumbs
      • Crumb
    • Button
    • Card
      • Card Stack
    • Checkbox
    • Circular Progress
    • Context Menu
      • Menu
      • Menuitem
      • Menuitem Group
    • Cookie Consent
    • Header
    • Icon
    • Input
    • Input Message
    • Label
    • Link
    • Loading Indicator
    • Modal
    • Notice
    • Notification
    • Pagination
    • Progress
    • Radio Button
    • Screen Reader Live
    • Screen Reader Only
    • Select
      • Option
    • Sidenav
      • Sidenav Accordion
      • Sidenav Back
      • Sidenav Header
      • Sidenav Heading
      • Sidenav Navitem
      • Sidenav Separator
      • Sidenav Slider
      • Sidenav Subnav
      • Sidenav Toggle Outside
    • Slider
    • Stepper
      • Step
    • Switch
      • Switch Item
    • Table
      • Table Body
      • Table Caption
      • Table Cell
      • Table Colgroup
      • Table Column
      • Table Footer
      • Table Head
      • Table Header
      • Table Row
      • Table Toolbar
    • Tabs
      • Tab
      • Tab List
      • Tab Panel
      • Tab Panel List
    • Toggle
    • Tooltip
    • Typography
  • Data Visualization
    • Getting Started
  1. Examples
    1. Default
    2. With linked logo
    3. With custom logo
    4. With buttons
    5. With burger menu button
    6. Sticky
    7. Hide on scroll
  2. CSS Variables
  3. Properties
  4. Slots
  5. Shadow Parts
  6. Dependencies
    1. Depends on
    2. Graph
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 Register Login
Liquid Oxygen

With burger menu button #

<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 #

  • ld-icon
  • ld-typo

Graph #

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

Built with StencilJS