Skip to content

Twig Bootstrap Template

Shea Lewis edited this page Apr 24, 2015 · 6 revisions

The following view files will get you started with a basic Bootstrap navbar using the Twig template engine. The use of Twig in Laravel can be pulled in through the Caffeinated Sapling package.


navbar.twig.php

Recommended save to views/partials/menu.

<nav class="navbar navbar-inverse" role="navigation">
	<div class="container">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu-collapse">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>

			<a href="#" class="navbar-brand">Caffeinated Menu</a>
		</div>

		<div class="collapse navbar-collapse" id="menu-collapse">
			<ul class="nav navbar-nav">
				{{ include('partials.menu.items', {'items': menu_example.roots()}) }}
			</ul>
		</div>
	</div>
</nav>

items.twig.php

Recommended save to views/partials/menu.

{% for item in items %}
	<li {{ (item.hasChildren()) ? 'class="dropdown"' : null }}>
		<a href="{{ item.url() }}" {{ (item.hasChildren()) ? 'class="dropdown-toggle" data-toggle="dropdown"' : null }}>
			{{ item.title }} {{ (item.hasChildren()) ? '<b class="caret"></b>' : null }}
		</a>

		{% if (item.hasChildren()) %}
			<ul class="dropdown-menu">
				{% for child in item.children() %}
					<li><a href="{{ child.url() }}">{{ child.title }}</a></li>
				{% endfor %}
			</ul>
		{% endif %}
	</li>

	{% if (item.divider) %}
		<li class="divider"></li>
	{% endif %}
{% endfor %}