Foundation - Navigation Breadcrumbs


Advertisements

Description

A breadcrumb specifies the current location for a site within navigational hierarchy. It is useful when accessing large number of the pages of a website. A breadcrumb in Foundation is simply an unordered list with a class of .breadcrumb. For detailed information check this chapter.

SASS Reference

Variables

You can change the styles of the components by using the following SASS variables as listed in the table.

Sr.No. Name & Description Type Default Value
1

$breadcrumbs-margin

Around the breadcrumb container the margin is set.

Number 0 0 $global-margin 0
2

$breadcrumbs-item-font-size

Sets font size for breadcrumb item.

Number rem-calc(11)
3

$breadcrumbs-item-color

Sets color for breadcrumb item.

Color $primary-color
4

$breadcrumbs-item-color-current

Sets color for current breadcrumb item.

Color $black
5

$breadcrumbs-item-color-disabled

The breadcrumb item is disabled.

Number $medium-gray
6

$breadcrumbs-item-margin

Sets margin between the breadcrumb items.

Number 0.75rem
7

$breadcrumbs-item-uppercase

Makes the breadcrumb item in uppercase.

Boolean true
8

$breadcrumbs-item-slash

Includes slash between the breadcrumb items.

Boolean true

Mixin

You can use the mixins to build the CSS class structure for your components as listed in the table −

breadcrumbs-container

It includes styles for the breadcrumb container with the style for element <li> <a> present inside it.

@include breadcrumbs-container;
foundation_navigation.htm
Advertisements