1

Type
primary
Tags
landing
homepage
mobile
menu

Preview

Implementation

Markup
header-1(urliconh1nav[hook])
ParameterDefinitionType
urlURL: homepagestring
iconSVG: symbolstring
h1heading: globalstring
navanchors: navigationarray, object
idattribute: idstring
Brief

A primary header with navigation support. The menu has two modes for desktop (expanded & compact) and one for mobile. The icon parameter accepts an SVG symbol fragment by default.

Paths
  • location:  components/headers/1
  • activate:  templates/_/mixins.pug
  • markup:  templates/_/body.pug
  • style:  style/_/elements/header.styl
Dependencies
  • _.pug
  • index.styl
  • *.svg
  • _.js
Examples
extends ../root

block body

    body

        block header

            +header-1("/#front", "logo", "Heading", [
                {
                    href: "/lorem/",
                    name: "Lorem"
                },
                {
                    href: "/quidem/",
                    name: "Quidem"
                },
                //...
            ])

        block main
            //...
header-1()
import header from 'headers/1/_';

2

Type
secondary
Tags
sectional
breadcrumbs
menu

Preview

Implementation

Markup
header-2(urliconh1h2[breadcrumbs][hook])
ParameterDefinitionType
urlURL: homepagestring
iconSVG: fragmentstring
h1heading: globalstring
h2heading: sectionstring
breadcrumbsbreadcrumbsarray, object
hookattribute: classstring
Brief

A 2nd-level header designed to be used as a stand-alone, primary header for nested pages. Pass an arbitrary class to the style hook parameter should greater specificity be required.

Paths
  • location:  components/headers/2
  • activate:  templates/_/mixins.pug
Dependencies
  • _.pug
  • index.styl
  • *.svg
Example
extends body

block context
    //...

block header

    +header-2('/#front', 'logo', 'Heading', 'Heading 2', [
        {
            href: "/",
            name: "Home"
        },
        {
            href: "/about/",
            name: "About"
        },
        //...
    ])

block main
    //...
header-2()

3

Type
primary
Tags
minimal
header
navigation

Preview

Implementation

Markup
header-3(urliconh1nav[hook])
ParameterDefinitionType
urlURL: homepagestring
iconSVG: fragmentstring
h1heading: globalstring
navanchors: navigationarray, object
hookattribute: classstring
Brief

This primary page header rely exclusively on HTML and CSS while oferring support for compact mobile viewports. Take it for a spin in the preview panel!

Paths
  • location:  components/headers/3
  • activate:  templates/_/mixins.pug
Dependencies
  • _.pug
  • index.styl
Example
block header

    +header-3("/", "logo", "Heading", [
        {
            href: "/",
            name: "Home"
        },
        {
            href: "/login",
            name: "Log in"
        },
    ], "home")
header-3()