castlecss-docs/views/inc/menu.html

Documentation website for CastleCSS

<!-- End Google Tag Manager -->
<header id="header" class="nav-container">
	<div class="nav-label">menu</div>
	<a class="nav-logo  p-b4-3x" href="index.html"><img src="img/logo-castlecss.png"></a>
	<div class="nav-wrap pl-3x pr-3x">
		{% set items = [
			{ url: "/about.html", id: "about", title: "About CastleCSS", children: []},
			{ url: "/installation.html", id: "installation", title: "Installation", children: []},
			{ url: "/style-guidelines.html", id: "guidelines", title: "Style Guidelines", children: []},
			{ url: "/variables.html", id: "variables", title: "Variables", children: []},
			{ url: "/grid.html", id: "grid", title: "Breakpoints & Grid", children: [
				{url: "grid.html#basicexamples", id: "grid", title: "The basics"},
				{url: "grid.html#breakpoints", id: "grid", title: "Breakpoints"},
				{url: "grid.html#basicexamples", id: "grid", title: "Basic grid examples"},
				{url: "grid.html#gutters", id: "grid", title: "Gutters"},
				{url: "grid.html#directionalignment", id: "grid", title: "Direction and alignment"}
			]},
			{ url: "/utility.html", id: "utility", title: "Utility classes", children: []},
			{ url: "/utility_spacers.html", id: "utility_spacers", title: "Utility spacers", children: []},
			{ url: "/icons.html", id: "icons", title: "Icons", children: []},
			{ url: "/forms.html", id: "forms", title: "Forms", children: []},
			{ url: "/buttons.html", id: "buttons", title: "Buttons", children: []},
			{ url: "/stickers.html", id: "stickers", title: "Stickers", children: []},
			{ url: "/notifications.html", id: "notifications", title: "Notifications / alerts", children: []},
			{ url: "/breadcrumbs.html", id: "breadcrumbs", title: "Breadcrumbs", children: []},
			{ url: "/mixins.html", id: "mixins", title: "Mixins", children: []}

		]  %}
		<ul class="doc-menu list-unstyled">
		{% for item in items %}
		  <li><a href="{{ item.url }}" {% if item.id == currentPageId %}class="active"{% endif %}>{{ item.title }}</a>
			{% if item.children.length > 0 %}
				<ul class="list-unstyled">
				{% for child in item.children %}
					<li><a href="{{ child.url }}">{{ child.title }}</a>
				{% endfor %}
				</ul>
			{% endif %}
		  </li>
		{% endfor %}
		</ul>
	</div>



</header>