castlecss-docs/views/breadcrumbs.html

Documentation website for CastleCSS

{% set currentPageId = 'breadcrumbs' %}{% set pageTitle = 'Breadcrumbs - CastleCSS' %}{% include "inc/header.html" %}

	<!-- Main -->
	<div class="b0_12 b4_14 b4_push_01">
		<div class="p p-b3-3x">
			<div class="block">
				<h1>Breadcrumbs</h1>
				<p class="intro">Make sure your visitors never get lost</p>
				<p class="alert">
					Note: You need castlecss-breadcrumbs or the <a href="https://github.com/CastleCSS/castlecss-boilerplate" target="_blank">castlecss-boilerplate</a> for this.
				</p>
				<p>Feel free to use these breadcrumbs to get you started. Create your own breadcrumbs.scss to overwrite the standard breadcrumbs or edit your <a href="variables.html">variables document</a> for different colors/styles.</p>
			</div>
			
			<div class="block pt tb">
				<h2>Example</h2>
				<nav class="breadcrumbs">
					<ol class="breadcrumbs-wrap">
						<li class="breadcrumb breadcrumb-home">
							<a href="/"><span>Home</span></a>
						</li>
						<li class="breadcrumb">
							<a href="/category/"><span>Main category</span></a>
						</li>  
						<li class="breadcrumb">
							<a href="/category/sub-category/"><span>Sub category</span></a>
						</li>
						<li class="breadcrumb breadcrumb-current">
							<a href="/category/sub-category/this-page/">This page</a>
						</li>
					</ol>
				</nav>

			</div>

			<div class="mb-2x">
				<pre class="brush: xml;">
				<nav class="breadcrumbs">
					<ol class="breadcrumbs-wrap">
						<li class="breadcrumb breadcrumb-home">
							<a href="/"><span>Home</span></a>
						</li>
						<li class="breadcrumb">
							<a href="/category/"><span>Main category</span></a>
						</li>  
						<li class="breadcrumb">
							<a href="/category/sub-category/"><span>Sub category</span></a>
						</li>
						<li class="breadcrumb breadcrumb-current">
							<a href="/category/sub-category/this-page/">This page</a>
						</li>
					</ol>
				</nav></pre>
			</div>

			<div class="block mt-2x">
				<h2>Options</h2>
				<h3>Changing the breadcrumb separator</h3>
				<p>
					The default separator between the breadcrumbs is the double arrow <code>&raquo;</code>. <br />
					To set a different character as your separator for all crumbs, please overwrite the variable <code>$breadcrumbs-separator</code>.
				</p>
				<p>
					If you want a different character for a specific separator, please add the attribute <code>data-breadcrumbs-separator</code> and give it the value of your separator.
				</p>
				<p>
					<strong>Example:</strong> <code>data-breadcrumbs-separator="/"</code> sets a / as separator
				</p>
			</div>
			<div class="block">
				<h3>Breadcrumbs font-size</h3>
				<table class="specs">
					<tr>
						<th>Class</th>
						<th>Value</th>
					</tr>
					<tr>
						<td><code>breadcrumbs</code></td>
						<td><a href="/variables.html">$font-size-default</a></td>
					</tr>
					<tr>
						<td><code>breadcrumbs-small</code></td>
						<td>font-size: 1.4rem;</td>
					</tr>
				</table>
			</div>
			<div class="block">
				<h2>Seo</h2>
				<p>Please take a look at the <a href="https://developers.google.com/search/docs/data-types/breadcrumbs" target="_blank">Google Developer</a> website for making breadcrumbs SEO friendly</p>
			</div>
		</div>
	</div>
	<!-- End main -->

{% include "inc/footer.html" %}