Headers — StyloftCSS

Left logo, right menu

A familiar horizontal header with the brand at the start and navigation aligned to the end.

Live preview

View HTML / PlaygroundHTML source

example.htmlHTML

<header class="sl-header">
  <div class="sl-header__row">
    <a class="sl-header__brand" href="/light/" aria-label="StyloftCSS home"
      ><img
        src="/_astro/brand-mark.wnBYXhuR_ZzqzRW.webp"
        alt=""
        width="32"
        height="32"
      /><span>Styloft<span>CSS</span></span></a
    >
    <nav class="sl-header__menu" aria-label="Left-logo example navigation">
      <a href="/light/components/">Components</a><a href="/light/layouts/">Layouts</a
      ><a href="/light/themes/">Themes</a>
    </nav>
    <details class="sl-header__mobile">
      <summary>Menu <span aria-hidden="true">☰</span></summary>
      <nav
        class="sl-header__mobile-nav"
        aria-label="Left-logo example navigation mobile navigation"
      >
        <a href="/light/components/">Components</a><a href="/light/layouts/">Layouts</a
        ><a href="/light/themes/">Themes</a>
      </nav>
    </details>
  </div>
</header>

HTML source · enable JavaScript for the playground26 lines · UTF-8

Right logo, left menu

The navigation comes first, with the logo aligned to the right on wide layouts.

Live preview

StyloftCSS

View HTML / PlaygroundHTML source

example.htmlHTML

<header class="sl-header sl-header--reverse">
  <div class="sl-header__row">
    <nav class="sl-header__menu" aria-label="Right-logo example navigation">
      <a href="/light/components/">Components</a><a href="/light/layouts/">Layouts</a
      ><a href="/light/themes/">Themes</a>
    </nav>
    <a class="sl-header__brand" href="/light/" aria-label="StyloftCSS home"
      ><img
        src="/_astro/brand-mark.wnBYXhuR_ZzqzRW.webp"
        alt=""
        width="32"
        height="32"
      /><span>Styloft<span>CSS</span></span></a
    >
    <details class="sl-header__mobile">
      <summary>Menu <span aria-hidden="true">☰</span></summary>
      <nav
        class="sl-header__mobile-nav"
        aria-label="Right-logo example navigation mobile navigation"
      >
        <a href="/light/components/">Components</a><a href="/light/layouts/">Layouts</a
        ><a href="/light/themes/">Themes</a>
      </nav>
    </details>
  </div>
</header>

HTML source · enable JavaScript for the playground26 lines · UTF-8

Center logo, menus on both sides

Equal-width side columns keep the logo truly centered. Narrow containers combine both menus into a native Menu disclosure.

Live preview

StyloftCSS

View HTML / PlaygroundHTML source

example.htmlHTML

<header class="sl-header sl-header--center">
  <div class="sl-header__row">
    <a class="sl-header__brand" href="/light/" aria-label="StyloftCSS home"
      ><img
        src="/_astro/brand-mark.wnBYXhuR_ZzqzRW.webp"
        alt=""
        width="32"
        height="32"
      /><span>Styloft<span>CSS</span></span></a
    >
    <nav
      class="sl-header__menu sl-header__menu--start"
      aria-label="Centered example primary navigation"
    >
      <a href="/light/components/">Components</a><a href="/light/layouts/">Layouts</a>
    </nav>
    <nav
      class="sl-header__menu sl-header__menu--end"
      aria-label="Centered example secondary navigation"
    >
      <a href="/light/themes/">Themes</a
      ><a href="/light/getting-started/">Documentation</a>
    </nav>
    <details class="sl-header__mobile">
      <summary>Menu <span aria-hidden="true">☰</span></summary>
      <nav
        class="sl-header__mobile-nav"
        aria-label="Centered example primary navigation mobile navigation"
      >
        <a href="/light/components/">Components</a><a href="/light/layouts/">Layouts</a
        ><a href="/light/themes/">Themes</a
        ><a href="/light/getting-started/">Documentation</a>
      </nav>
    </details>
  </div>
</header>

HTML source · enable JavaScript for the playground36 lines · UTF-8

Left logo, right menu and CTA

Navigation and a prominent action share the right side. The action is a normal link to the getting-started guide.

Live preview

StyloftCSS

View HTML / PlaygroundHTML source

example.htmlHTML

<header class="sl-header">
  <div class="sl-header__row">
    <a class="sl-header__brand" href="/light/" aria-label="StyloftCSS home"
      ><img
        src="/_astro/brand-mark.wnBYXhuR_ZzqzRW.webp"
        alt=""
        width="32"
        height="32"
      /><span>Styloft<span>CSS</span></span></a
    >
    <nav class="sl-header__menu" aria-label="CTA example navigation">
      <a href="/light/components/">Components</a><a href="/light/layouts/">Layouts</a
      ><a href="/light/themes/">Themes</a
      ><a class="sl-btn sl-hover-sheen" href="/light/getting-started/"
        >Start building ↗</a
      >
    </nav>
    <details class="sl-header__mobile">
      <summary>Menu <span aria-hidden="true">☰</span></summary>
      <nav
        class="sl-header__mobile-nav"
        aria-label="CTA example navigation mobile navigation"
      >
        <a href="/light/components/">Components</a><a href="/light/layouts/">Layouts</a
        ><a href="/light/themes/">Themes</a
        ><a class="sl-btn sl-hover-sheen" href="/light/getting-started/"
          >Start building ↗</a
        >
      </nav>
    </details>
  </div>
</header>

HTML source · enable JavaScript for the playground32 lines · UTF-8

Top information bar with navigation header

A utility bar adds release information and useful links above the logo, main menu, and CTA.

Live preview

StyloftCSS · CSS only, made for your next idea.

StyloftCSS

View HTML / PlaygroundHTML source

example.htmlHTML

<header class="sl-header">
  <div class="sl-header__top">
    <p>StyloftCSS · CSS only, made for your next idea.</p>
    <nav aria-label="Information bar links">
      <a href="/light/getting-started/">Quick start</a
      ><a href="/light/components/">Browse examples</a>
    </nav>
  </div>
  <div class="sl-header__row">
    <a class="sl-header__brand" href="/light/" aria-label="StyloftCSS home"
      ><img
        src="/_astro/brand-mark.wnBYXhuR_ZzqzRW.webp"
        alt=""
        width="32"
        height="32"
      /><span>Styloft<span>CSS</span></span></a
    >
    <nav class="sl-header__menu" aria-label="Information-bar example main navigation">
      <a href="/light/components/">Components</a><a href="/light/layouts/">Layouts</a
      ><a href="/light/themes/">Themes</a
      ><a class="sl-btn sl-hover-sheen" href="/light/getting-started/">Get started ↗</a>
    </nav>
    <details class="sl-header__mobile">
      <summary>Menu <span aria-hidden="true">☰</span></summary>
      <nav
        class="sl-header__mobile-nav"
        aria-label="Mobile info navigation mobile navigation"
      >
        <a href="/light/components/">Components</a><a href="/light/layouts/">Layouts</a
        ><a href="/light/themes/">Themes</a
        ><a class="sl-btn" href="/light/getting-started/">Get started ↗</a>
      </nav>
    </details>
  </div>
</header>

HTML source · enable JavaScript for the playground35 lines · UTF-8

A simple site header

Live preview

Studio®

View HTML / PlaygroundHTML source

example.htmlHTML

<header class="demo-header sl-cluster sl-justify-between sl-gap-6">
  <a class="demo-wordmark" href="/light/">Studio<span>®</span></a>
  <nav class="sl-cluster sl-gap-6" aria-label="Studio example navigation">
    <a href="/light/components/cards/">Work</a
    ><a href="/light/getting-started/">About</a>
    <a class="sl-btn" href="/light/getting-started/">Let's build ↗</a>
  </nav>
</header>

HTML source · enable JavaScript for the playground8 lines · UTF-8

Native disclosure navigation

A disclosure menu that opens with pointer or keyboard, without a script.

Live preview

Notebook.

View HTML / PlaygroundHTML source

example.htmlHTML

<header class="demo-header sl-cluster sl-justify-between">
  <a class="demo-wordmark" href="/light/">Notebook.</a>
  <details class="demo-menu">
    <summary>Explore the site</summary>
    <nav class="sl-stack" aria-label="Notebook example navigation">
      <a href="/light/components/">Components</a>
      <a href="/light/layouts/">Layout patterns</a>
      <a href="/light/themes/">Theme gallery</a>
    </nav>
  </details>
</header>

HTML source · enable JavaScript for the playground11 lines · UTF-8

Navigation with a primary action

Live preview

Orbit.

View HTML / PlaygroundHTML source

example.htmlHTML

<header class="sl-nav">
  <a href="/light/" class="demo-wordmark">Orbit.</a>
  <nav class="sl-cluster" aria-label="Orbit example">
    <a href="/light/components/">Components</a><a href="/light/themes/">Themes</a
    ><a class="sl-btn sl-btn--sm sl-hover-sheen" href="/light/getting-started/"
      >Get started
      <svg
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        aria-hidden="true"
      >
        <path d="M5 12h14m-6-6 6 6-6 6" /></svg
    ></a>
  </nav>
</header>

HTML source · enable JavaScript for the playground17 lines · UTF-8

Two-level announcement header

Live preview

A new foundation for your next idea. Read the guide →

Fieldnotes.

View HTML / PlaygroundHTML source

example.htmlHTML

<div class="sl-stack sl-gap-0">
  <p class="sl-alert sl-text-center">
    A new foundation for your next idea.
    <a href="/light/getting-started/">Read the guide →</a>
  </p>
  <header class="sl-nav">
    <a href="/light/" class="demo-wordmark">Fieldnotes.</a>
    <nav class="sl-cluster" aria-label="Fieldnotes example">
      <a href="/light/components/cards/">Stories</a
      ><a href="/light/layouts/">Collections</a>
    </nav>
  </header>
</div>

HTML source · enable JavaScript for the playground13 lines · UTF-8

Centered brand navigation

Live preview

The Notebook

View HTML / PlaygroundHTML source

example.htmlHTML

<header class="sl-nav sl-column sl-gap-6">
  <a href="/light/" class="demo-wordmark">The Notebook</a>
  <nav class="sl-cluster sl-justify-center" aria-label="Centered example">
    <a class="sl-link sl-link--underline" href="/light/components/">Library</a
    ><a class="sl-link sl-link--underline" href="/light/layouts/">Layouts</a
    ><a class="sl-link sl-link--underline" href="/light/themes/">Themes</a>
  </nav>
</header>

HTML source · enable JavaScript for the playground8 lines · UTF-8

Compact documentation header

Live preview

Docs0.1

Browse documentation

View HTML / PlaygroundHTML source

example.htmlHTML

<header class="sl-nav">
  <a href="/light/getting-started/" class="demo-wordmark"
    >Docs<span class="sl-badge">0.1</span></a
  >
  <details class="sl-details">
    <summary>Browse documentation</summary>
    <nav class="sl-stack" aria-label="Compact docs example">
      <a href="/light/getting-started/">Getting started</a
      ><a href="/light/components/">All components</a
      ><a href="/light/themes/">Tokens & themes</a>
    </nav>
  </details>
</header>

HTML source · enable JavaScript for the playground13 lines · UTF-8

Classes beginning with sl- come from StyloftCSS. Examples with demo- classes also use our optional demo extension CSS ↓. Load it after the core to reproduce those details.