Header

The Header component provides a reusable pattern for header in the interface.

Basic

<!-- header.blade.php -->
<header class="c-header o-container o-container" data-uid="69f0d0429c7e6" data-component="header">

      <!-- nav.blade.php -->
 
          <ul class="c-nav c-nav--depth-1 unlist c-nav--horizontal" aria-orientation="horizontal" role="menu" data-js-keep-in-viewport-after-resize="1" id="id_69f0d0429c1c9" data-uid="69f0d0429c1c9" data-component="nav">
          <li id="69f0d0429c1c9-1-0__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Arbete">
        
        <div class="c-nav__item-wrapper">
          
                      <a class="c-link c-nav__link" href="#" target="_top" id="id_69f0d0429c1c9-1-0__label" data-uid="69f0d0429c49e" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Arbete
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69f0d0429c1c9-1-1__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Bo, bygga och miljö">
        
        <div class="c-nav__item-wrapper">
          
                      <a class="c-link c-nav__link" href="#" target="_top" id="id_69f0d0429c1c9-1-1__label" data-uid="69f0d0429c570" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Bo, bygga och miljö
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69f0d0429c1c9-1-2__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Förskola och utbildning">
        
        <div class="c-nav__item-wrapper">
          
                      <a class="c-link c-nav__link" href="#" target="_top" id="id_69f0d0429c1c9-1-2__label" data-uid="69f0d0429c62f" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Förskola och utbildning
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69f0d0429c1c9-1-3__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Kommun och politik">
        
        <div class="c-nav__item-wrapper">
          
                      <a class="c-link c-nav__link" href="#" target="_top" id="id_69f0d0429c1c9-1-3__label" data-uid="69f0d0429c6db" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Kommun och politik
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69f0d0429c1c9-1-4__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Omsorg och stöd">
        
        <div class="c-nav__item-wrapper">
          
                      <a class="c-link c-nav__link" href="#" target="_top" id="id_69f0d0429c1c9-1-4__label" data-uid="69f0d0429c771" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Omsorg och stöd
    </span>
    </a>
          
          
                  </div>

        
                          </li>

    </ul>
    
</header>

@header([
    'classList' => [
        'o-container', 
        'o-container',
    ]
])
    @nav([
        'items' => \MunicipioStyleGuide\Navigation::getMockedTopLevel(),
        'direction' => 'horizontal',
    ])
    @endnav
@endheader

Primary color

<!-- header.blade.php -->
<header class="c-header o-container o-container c-header--primary" data-uid="69f0d0429cebc" data-component="header">

      <!-- nav.blade.php -->
 
          <ul class="c-nav c-nav--depth-1 unlist c-nav--horizontal" aria-orientation="horizontal" role="menu" data-js-keep-in-viewport-after-resize="1" id="id_69f0d0429cb0b" data-uid="69f0d0429cb0b" data-component="nav">
          <li id="69f0d0429cb0b-1-0__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Arbete">
        
        <div class="c-nav__item-wrapper">
          
                      <a class="c-link c-nav__link" href="#" target="_top" id="id_69f0d0429cb0b-1-0__label" data-uid="69f0d0429cbe8" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Arbete
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69f0d0429cb0b-1-1__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Bo, bygga och miljö">
        
        <div class="c-nav__item-wrapper">
          
                      <a class="c-link c-nav__link" href="#" target="_top" id="id_69f0d0429cb0b-1-1__label" data-uid="69f0d0429cc8d" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Bo, bygga och miljö
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69f0d0429cb0b-1-2__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Förskola och utbildning">
        
        <div class="c-nav__item-wrapper">
          
                      <a class="c-link c-nav__link" href="#" target="_top" id="id_69f0d0429cb0b-1-2__label" data-uid="69f0d0429cd27" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Förskola och utbildning
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69f0d0429cb0b-1-3__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Kommun och politik">
        
        <div class="c-nav__item-wrapper">
          
                      <a class="c-link c-nav__link" href="#" target="_top" id="id_69f0d0429cb0b-1-3__label" data-uid="69f0d0429cdc6" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Kommun och politik
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69f0d0429cb0b-1-4__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Omsorg och stöd">
        
        <div class="c-nav__item-wrapper">
          
                      <a class="c-link c-nav__link" href="#" target="_top" id="id_69f0d0429cb0b-1-4__label" data-uid="69f0d0429ce6d" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Omsorg och stöd
    </span>
    </a>
          
          
                  </div>

        
                          </li>

    </ul>
    
</header>

@header([
    'backgroundColor' => 'primary',
    'classList' => [
        'o-container', 
        'o-container',
    ]
])
    @nav([
        'items' => \MunicipioStyleGuide\Navigation::getMockedTopLevel(),
        'direction' => 'horizontal',
    ])
    @endnav
@endheader

Secondary color

<!-- header.blade.php -->
<header class="c-header o-container o-container c-header--secondary" data-uid="69f0d0429d5d6" data-component="header">

      <!-- nav.blade.php -->
 
          <ul class="c-nav c-nav--depth-1 unlist c-nav--horizontal" aria-orientation="horizontal" role="menu" data-js-keep-in-viewport-after-resize="1" id="id_69f0d0429d1d8" data-uid="69f0d0429d1d8" data-component="nav">
          <li id="69f0d0429d1d8-1-0__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Arbete">
        
        <div class="c-nav__item-wrapper">
          
                      <a class="c-link c-nav__link" href="#" target="_top" id="id_69f0d0429d1d8-1-0__label" data-uid="69f0d0429d2b2" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Arbete
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69f0d0429d1d8-1-1__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Bo, bygga och miljö">
        
        <div class="c-nav__item-wrapper">
          
                      <a class="c-link c-nav__link" href="#" target="_top" id="id_69f0d0429d1d8-1-1__label" data-uid="69f0d0429d376" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Bo, bygga och miljö
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69f0d0429d1d8-1-2__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Förskola och utbildning">
        
        <div class="c-nav__item-wrapper">
          
                      <a class="c-link c-nav__link" href="#" target="_top" id="id_69f0d0429d1d8-1-2__label" data-uid="69f0d0429d424" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Förskola och utbildning
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69f0d0429d1d8-1-3__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Kommun och politik">
        
        <div class="c-nav__item-wrapper">
          
                      <a class="c-link c-nav__link" href="#" target="_top" id="id_69f0d0429d1d8-1-3__label" data-uid="69f0d0429d4d0" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Kommun och politik
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69f0d0429d1d8-1-4__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Omsorg och stöd">
        
        <div class="c-nav__item-wrapper">
          
                      <a class="c-link c-nav__link" href="#" target="_top" id="id_69f0d0429d1d8-1-4__label" data-uid="69f0d0429d583" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Omsorg och stöd
    </span>
    </a>
          
          
                  </div>

        
                          </li>

    </ul>
    
</header>

@header([
    'backgroundColor' => 'secondary',
    'classList' => [
        'o-container', 
        'o-container',
    ]
])
    @nav([
        'items' => \MunicipioStyleGuide\Navigation::getMockedTopLevel(),
        'direction' => 'horizontal',
    ])
    @endnav
@endheader

Accented

<!-- header.blade.php -->
<header class="c-header o-container o-container c-header--accented" data-uid="69f0d0429dcf2" data-component="header">

      <!-- nav.blade.php -->
 
          <ul class="c-nav c-nav--depth-1 unlist c-nav--horizontal" aria-orientation="horizontal" role="menu" data-js-keep-in-viewport-after-resize="1" id="id_69f0d0429d8d5" data-uid="69f0d0429d8d5" data-component="nav">
          <li id="69f0d0429d8d5-1-0__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Arbete">
        
        <div class="c-nav__item-wrapper">
          
                      <a class="c-link c-nav__link" href="#" target="_top" id="id_69f0d0429d8d5-1-0__label" data-uid="69f0d0429da11" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Arbete
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69f0d0429d8d5-1-1__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Bo, bygga och miljö">
        
        <div class="c-nav__item-wrapper">
          
                      <a class="c-link c-nav__link" href="#" target="_top" id="id_69f0d0429d8d5-1-1__label" data-uid="69f0d0429dac2" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Bo, bygga och miljö
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69f0d0429d8d5-1-2__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Förskola och utbildning">
        
        <div class="c-nav__item-wrapper">
          
                      <a class="c-link c-nav__link" href="#" target="_top" id="id_69f0d0429d8d5-1-2__label" data-uid="69f0d0429db67" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Förskola och utbildning
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69f0d0429d8d5-1-3__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Kommun och politik">
        
        <div class="c-nav__item-wrapper">
          
                      <a class="c-link c-nav__link" href="#" target="_top" id="id_69f0d0429d8d5-1-3__label" data-uid="69f0d0429dc08" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Kommun och politik
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69f0d0429d8d5-1-4__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Omsorg och stöd">
        
        <div class="c-nav__item-wrapper">
          
                      <a class="c-link c-nav__link" href="#" target="_top" id="id_69f0d0429d8d5-1-4__label" data-uid="69f0d0429dca6" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Omsorg och stöd
    </span>
    </a>
          
          
                  </div>

        
                          </li>

    </ul>
    
</header>

@header([
    'classList' => [
        'o-container', 
        'o-container',
        'c-header--accented'
    ]
])
    @nav([
        'items' => \MunicipioStyleGuide\Navigation::getMockedTopLevel(),
        'direction' => 'horizontal',
    ])
    @endnav
@endheader

Primary color accented

<!-- header.blade.php -->
<header class="c-header o-container o-container c-header--accented c-header--primary" data-uid="69f0d0429e384" data-component="header">

      <!-- nav.blade.php -->
 
          <ul class="c-nav c-nav--depth-1 unlist c-nav--horizontal" aria-orientation="horizontal" role="menu" data-js-keep-in-viewport-after-resize="1" id="id_69f0d0429dfb9" data-uid="69f0d0429dfb9" data-component="nav">
          <li id="69f0d0429dfb9-1-0__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Arbete">
        
        <div class="c-nav__item-wrapper">
          
                      <a class="c-link c-nav__link" href="#" target="_top" id="id_69f0d0429dfb9-1-0__label" data-uid="69f0d0429e095" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Arbete
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69f0d0429dfb9-1-1__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Bo, bygga och miljö">
        
        <div class="c-nav__item-wrapper">
          
                      <a class="c-link c-nav__link" href="#" target="_top" id="id_69f0d0429dfb9-1-1__label" data-uid="69f0d0429e150" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Bo, bygga och miljö
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69f0d0429dfb9-1-2__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Förskola och utbildning">
        
        <div class="c-nav__item-wrapper">
          
                      <a class="c-link c-nav__link" href="#" target="_top" id="id_69f0d0429dfb9-1-2__label" data-uid="69f0d0429e1f7" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Förskola och utbildning
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69f0d0429dfb9-1-3__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Kommun och politik">
        
        <div class="c-nav__item-wrapper">
          
                      <a class="c-link c-nav__link" href="#" target="_top" id="id_69f0d0429dfb9-1-3__label" data-uid="69f0d0429e296" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Kommun och politik
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69f0d0429dfb9-1-4__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Omsorg och stöd">
        
        <div class="c-nav__item-wrapper">
          
                      <a class="c-link c-nav__link" href="#" target="_top" id="id_69f0d0429dfb9-1-4__label" data-uid="69f0d0429e33c" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Omsorg och stöd
    </span>
    </a>
          
          
                  </div>

        
                          </li>

    </ul>
    
</header>

@header([
    'backgroundColor' => 'primary',
    'classList' => [
        'o-container', 
        'o-container',
        'c-header--accented'
    ]
])
    @nav([
        'items' => \MunicipioStyleGuide\Navigation::getMockedTopLevel(),
        'direction' => 'horizontal',
    ])
    @endnav
@endheader

Secondary color accented

<!-- header.blade.php -->
<header class="c-header o-container o-container c-header--accented c-header--secondary" data-uid="69f0d0429ea0e" data-component="header">

      <!-- nav.blade.php -->
 
          <ul class="c-nav c-nav--depth-1 unlist c-nav--horizontal" aria-orientation="horizontal" role="menu" data-js-keep-in-viewport-after-resize="1" id="id_69f0d0429e64a" data-uid="69f0d0429e64a" data-component="nav">
          <li id="69f0d0429e64a-1-0__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Arbete">
        
        <div class="c-nav__item-wrapper">
          
                      <a class="c-link c-nav__link" href="#" target="_top" id="id_69f0d0429e64a-1-0__label" data-uid="69f0d0429e719" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Arbete
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69f0d0429e64a-1-1__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Bo, bygga och miljö">
        
        <div class="c-nav__item-wrapper">
          
                      <a class="c-link c-nav__link" href="#" target="_top" id="id_69f0d0429e64a-1-1__label" data-uid="69f0d0429e7d5" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Bo, bygga och miljö
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69f0d0429e64a-1-2__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Förskola och utbildning">
        
        <div class="c-nav__item-wrapper">
          
                      <a class="c-link c-nav__link" href="#" target="_top" id="id_69f0d0429e64a-1-2__label" data-uid="69f0d0429e87a" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Förskola och utbildning
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69f0d0429e64a-1-3__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Kommun och politik">
        
        <div class="c-nav__item-wrapper">
          
                      <a class="c-link c-nav__link" href="#" target="_top" id="id_69f0d0429e64a-1-3__label" data-uid="69f0d0429e922" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Kommun och politik
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69f0d0429e64a-1-4__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Omsorg och stöd">
        
        <div class="c-nav__item-wrapper">
          
                      <a class="c-link c-nav__link" href="#" target="_top" id="id_69f0d0429e64a-1-4__label" data-uid="69f0d0429e9c1" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Omsorg och stöd
    </span>
    </a>
          
          
                  </div>

        
                          </li>

    </ul>
    
</header>

@header([
    'backgroundColor' => 'secondary',
    'classList' => [
        'o-container', 
        'o-container',
        'c-header--accented'
    ]
])
    @nav([
        'items' => \MunicipioStyleGuide\Navigation::getMockedTopLevel(),
        'direction' => 'horizontal',
    ])
    @endnav
@endheader

API

Parameter	Default	Description
componentElement	header	-
id		-
textColor	false	-
backgroundColor	false	-
sticky	false	-

CSS API

Variable	Default	Type	Values	Description
--c-header--space	var(--space)	range	-	Base spacing unit. Used for padding and margin inside components.
--c-header--color--surface	var(--color--surface)	color	-	Surface
--c-header--color--surface-contrast	var(--color--surface-contrast)	color	-	Used for text and icons on surface backgrounds with less contrast.
--c-header--color--primary	var(--color--primary)	color	-	Primary
--c-header--color--primary-contrast	var(--color--primary-contrast)	color	-	Primary Contrast
--c-header--color--primary-border	var(--color--primary-border)	color	-	Manual companion token for primary border and hover states.
--c-header--color--secondary	var(--color--secondary)	color	-	Secondary
--c-header--color--secondary-contrast	var(--color--secondary-contrast)	color	-	Secondary Contrast
--c-header--color--secondary-border	var(--color--secondary-border)	color	-	Manual companion token for secondary border and hover states.
--c-header--base	var(--base)	range	-	Main unit that drives radius and spacing scales.
--c-header--logotype-height-multiplier	1	range	-	Scales the header logotype height locally without changing the global base size.

Similar components

Loader Hero Paper