- Foundation Tutorial
- Foundation - Home
- Foundation - Overview
- Foundation - Installation
- Foundation - Starter Projects
- Foundation - Kitchen Sink
- Foundation General
- Foundation - Global Styles
- Foundation - Sass
- Foundation - JavaScript
- Foundation - JavaScript Utilities
- Foundation - Media Queries
- Foundation - The Grid
- Foundation - Flex Grid
- Foundation - Forms
- Foundation - Visibility Classes
- Foundation - Base Typography
- Foundation - Typography Helpers
- Foundation - Basic Controls
- Foundation - Navigation
- Foundation - Containers
- Foundation - Media
- Foundation - Plugins
- Foundation SASS
- Foundation - Sass Functions
- Foundation - Sass Mixins
- Foundation Libraries
- Foundation - Motion UI
- Foundation Useful Resources
- Foundation - Quick Guide
- Foundation - Useful Resources
- Foundation - Discussion
Foundation - Navigation Breadcrumbs
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;