tabler/preview/pages/navigation.html

---
page-menu: base.navigation
title: Navigation
page-header: Navigation
layout: default
permalink: navigation.html
---

<div class="box">
	<div class="mb-3">
		{% include "layout/navbar.html" sample=true condensed=true transparent=true person-id=3 %}
	</div>

	<div class="mb-3">
		{% include "layout/navbar.html" sample=true condensed=true person-id=4 %}
	</div>

	<div class="mb-3">
		{% include "layout/navbar.html" sample=true condensed=true dark=true hide-logo=true show-title=true hide-icons=true hide-username=true person-id=5 %}
	</div>

	<div class="mb-3">
		{% include "layout/navbar.html" sample=true condensed=true dark=true small-logo=true background-color="#7952b3" hide-search=true person-id=6 %}
	</div>

	<div class="mb-3">
		{% include "layout/navbar.html" sample=true condensed=true dark=true background="primary" hide-brand=true hide-icons=true fluid-search=true hide-username=true person-id=7 %}
	</div>

	<div class="mb-3">
		{% include "layout/navbar.html" sample=true small-logo=true show-title=true person-id=8 %}
	</div>

	<div class="mb-3">
		{% include "layout/navbar.html" sample=true dark=true person-id=9 %}
	</div>
</div>