1

Type
primary
Tags
landing
homepage
mobile
menu

Preview

Implementation

Markup
header-1(url,icon,h1,nav,[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

Heading

Heading 2

content

Implementation

Markup
header-2(url,icon,h1,h2,[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()