1
- Type
- body
- Tags
- scroll
- move
- view
- local
Preview
Implementation
Markup
| Parameter | Definition | Description | Type |
|---|---|---|---|
| target | attribute: id | id selector of target view | string |
| direction | keyword | either "next" or "prev" | string |
| icon | SVG: fragment | change default button image | string |
Brief
Button to trigger animated scrolling between sections of a page. Contains 2 global SVG symbols: nav-1-fill and nav-1-stroke, the former being the default. The last argument may be used to switch between the two default icons or set your own.
Paths
- location:
components/navigation/1 - activate:
templates/_/mixins.pug
Placement
- markup:
templates/views/**/*.pug - style:
styles/views/**/*.styl - logic:
logic/root.jsorlogic/views/**/*.js
Dependencies
- _.pug
- index.styl
- *.svg
- _.js
Examples
#home
// content...
// default is "next" (down arrow)
+nav-1({ target: "section" })
// choose the outlined button
+nav-1({ target: "id", icon="nav-1-stroke" })
#section
// content...
+nav-1({ target: "home", direction: "prev" })
nav-1()
import nav1 from 'navigation/1/_';
nav1();
2
- Type
- menu
- Tags
- secondary
- menu
- fixed
Preview
Implementation
Markup
| Parameter | Definition | Description | Type |
|---|---|---|---|
| anchors | URL: set | navigation links | array, hash |
| hook | attribute: class | arbitrary style hook | string |
Brief
A fixed-menu component for use on the right edge of a page.
Paths
- location:
components/navigation/2 - activate:
templates/_/mixins.pug
Dependencies
- _.pug
- index.styl
Examples
.content
+nav-2([
{
href: "/lorem/",
name: "Lorem"
},
{
href: "/ipsum/",
name: "Ipsum"
}
])
nav-2()