Navigation

Toggle source (Jade)
+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
Toggle source (Jade)
+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.

Toggle source (Jade)
+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
Toggle source (Jade)
+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
Toggle source (Jade)
.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...
Toggle source (Jade)
.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...