<% @page_title = "Breadcrumbs" %>

<%= @page_title %>

Breadcrumbs come in handy to show a navigation trail for users clicking through a site or app. They'll conform to 100% of the container width you put them in.

Build With Predefined HTML Classes

There are two ways to build breadcrumbs in Foundation 4: with our predefined HTML classes or with our structure and mixins. Building breadcrumbs using our predefined class is easy. You'll need an <ul class="breadcrumbs"> with <li> elements inside. You have access to two state classes: <li class="unavailable"> and <li class="current"> to control link intentions. The default markup looks like this:

<%= code_example '

', :html %>

For these styles to come across, make sure you have the default Foundation CSS package or that you've selected breadcrumbs from a custom package. These should be linked up following our default HTML page structure.

Build with Mixins

We've included SCSS mixins used to style breadcrumbs. To use these mixins, you'll need to have the extension installed or grab _variables.scss, _global.scss and _breadcrumbs.scss from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:

<%= code_example ' @import "foundation/variables"; @import "foundation/components/global"; @import "foundation/components/breadcrumbs"; ', :css %>

If you are using the mixins, you may include the styles on whatever class or ID you'd like, just make sure you follow our markup structure:

<%= code_example '

', :html %>

Container Mixin

You can build your breadcrumbs using our global mixin by including it on your custom class or ID in your stylesheet. The container mixin will create the necessary style for the <ul>. The global mixin looks like this:

<%= code_example ' .your-class-name { @include crumb-container; } ', :css %>

Crumbs Mixin

Use this mixin to apply the list item and link styles to items inside the breadcrumb container. You attach this mixin to the list items inside of your container.

<%= code_example ' .your-class-name { @include crumb-container; li { @include crumbs; } } ', :css %>

Radius Mixin

We've also created a global radius mixin that you can use to add border-radius to any element you'd like.

<%= code_example ' .your-class-name { @include crumb-container; @include radius($radius); li { @include crumbs; } } ', :css %>

Default SCSS Variables

<%= code_example ' $include-html-nav-classes: $include-html-classes; /* We use this to set the background color for the breadcrumb container. */ $crumb-bg: lighten($secondary-color, 5%); /* We use these to set the padding around the breadcrumbs. */ $crumb-padding: em-calc(9 14 9); $crumb-side-padding: em-calc(12); /* We use these to control border styles. */ $crumb-function-factor: 10%; $crumb-border-size: 1px; $crumb-border-style: solid; $crumb-border-color: darken($crumb-bg, $crumb-function-factor); $crumb-radius: $global-radius; /* We use these to set various text styles for breadcrumbs. */ $crumb-font-size: em-calc(11); $crumb-font-color: $primary-color; $crumb-font-color-current: #333; $crumb-font-color-unavailable: #999; $crumb-font-transform: uppercase; $crumb-link-decor: underline; /* We use these to control the slash between breadcrumbs */ $crumb-slash-color: #aaa; $crumb-slash: "/"; ', :css %>

Note: em-calc(); is a function we wrote to convert px to em.

<%= render "_sidebar-components.html.erb" %>