+nav-links()
p.title Hello World
ul
+nav-item('#item-1')
| Item 1
+nav-item('#item-2')
| Item 2
+nav-item('#item-3')
+icon('lg', 'arrow-r')
+sprite('web', 'arrow-r-fade')
| Item 3
+nav-item('#item-4')
| Item 4
+nav-stack()
+nav-item('#item-1')
+icon('lg', 'arrow-r')
+sprite('web', 'arrow-r-fade')
| Item 1
+nav-item('#item-2').is-active
+icon('lg', 'arrow-r')
+sprite('web', 'arrow-r-fade')
| Item 2
+nav-item('#item-3')
+icon('lg', 'arrow-r')
+sprite('web', 'arrow-r-fade')
| Item 3
+nav-item('#item-4')
+icon('lg', 'arrow-r')
+sprite('web', 'arrow-r-fade')
| Item 4
This is the default navbar used in the web application.
An optional nav-logo mixin can be used to render the logo area, which receives the nav-logo class. The intended use case for this is to set your own application specific background on it.
+nav()
+nav-logo('/')
+nav-list().off-sm.off-xs
+nav-item('#').is-active
| Browse ads
+nav-item('#')
| Shops
+nav-item('#')
| Help & Support
+nav-list().is-opposite
+nav-item('#').off-sm.off-xs
+icon('lg', 'user')
| Log in
li
+button-important() Post ad
+sub-nav().off-lg
+nav-list()
+nav-item('#').is-active
+icon('sm', 'tag')
| Browse ads
+nav-item('#')
| Shops
+nav-list().is-opposite
+nav-item('#')
+icon('sm', 'user')
| Log in
+nav-crumbs()
+nav-crumb('#item-1') All ads
+nav-crumb('#item-2') Home and personal items
+nav-crumb('#item-3') Furninture
+nav-crumb()
a(href='#item-4')
strong Antiques and art
| in Kottowa.row
.col-3
+link-tree()
+link-tree-item()
+link-tree-link('#')
+link-tree-text().has-indicator
| All categories
+link-tree()
+link-tree-item().is-active
+link-tree-link('#')
+link-tree-icon()
+icon('lg', 'image')
+link-tree-text()
| Property but let's make this name long
+link-tree().is-collapsed
+link-tree-item()
+link-tree-link('#')
+link-tree-icon()
+icon('lg', 'image')
+link-tree-text()
| Houses this name is also long
+badge 1,736,233
+link-tree-item()
+link-tree-link('#')
+link-tree-icon()
+icon('lg', 'image')
+link-tree-text()
| Apartments oh wow long name here too
+badge 1,436,233
+link-tree-item()
+link-tree-link('#')
+link-tree-icon()
+icon('lg', 'image')
+link-tree-text()
| Apartments 2
+badge 526,233
+link-tree-item()
+link-tree-link('#')
+link-tree-icon()
+icon('lg', 'image')
+link-tree-text()
| Apartments 3
+badge 289,573
+link-tree-item()
+link-tree-link('#')
+link-tree-icon()
+icon('lg', 'image')
+link-tree-text()
| Apartments yep, super long name here as well
+badge 9,221
+link-tree-item()
+link-tree-link('#')
+link-tree-icon()
+icon('lg', 'image')
+link-tree-text()
| Apartments 5
+badge 5,221
+link-tree-item()
+link-tree-link('#')
+link-tree-icon()
+icon('lg', 'image')
+link-tree-text()
| Apartments 6
+badge 876
+link-tree-item()
+link-tree-link('#')
+link-tree-icon()
+icon('lg', 'image')
+link-tree-text()
| Apartments 7
+badge 156
+link-tree-item()
+link-tree-link('#')
+link-tree-icon()
+icon('lg', 'image')
+link-tree-text()
| Apartments 8
+badge 98
+link-tree-item()
+link-tree-link('#')
+link-tree-icon()
+icon('lg', 'image')
+link-tree-text()
| Apartments 9
+badge 45
+link-tree-item()
+link-tree-link('#')
+link-tree-icon()
+icon('lg', 'image')
+link-tree-text()
| Apartments 10
+badge 22
+link-tree-opener()
+link-tree-icon()
+icon('lg', 'add')
+link-tree-text()
| Show more...
.row
.col-3
+link-tree()
+link-tree-item()
+link-tree-link('#')
+link-tree-icon().has-indicator
+icon('lg', 'image')
+link-tree-text()
| All categories
+link-tree()
+link-tree-item()
+link-tree-link('#')
+link-tree-icon().has-indicator
+icon('lg', 'image')
+link-tree-text()
| Property
+link-tree()
+link-tree-item().is-active
+link-tree-link('#')
+link-tree-icon()
+icon('lg', 'tag')
+link-tree-text()
| Houses
+link-tree-opener()
+link-tree-icon()
+icon('lg', 'add')
+link-tree-text()
| Show more...