<!-- BREADCRUMB Component -->
<nav class="kx-breadcrumb kx-breadcrumb--theme-foam">
    <ol class="kx-breadcrumb__list">
        <li class="kx-breadcrumb__item">
            <a href="#" class="kx-breadcrumb__label">Home</a>

            <!-- ICON Component -->
            <i class="kx-icon kx-icon--size-tiny">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#angle-right"></use>
    </svg>
</i></li>
        <li class="kx-breadcrumb__item">
            <a href="#" class="kx-breadcrumb__label">Applications</a>

            <!-- ICON Component -->
            <i class="kx-icon kx-icon--size-tiny">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#angle-right"></use>
    </svg>
</i></li>
        <li class="kx-breadcrumb__item">
            <a href="#" class="kx-breadcrumb__label">GSN Management</a>

            <!-- ICON Component -->
            <i class="kx-icon kx-icon--size-tiny">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#angle-right"></use>
    </svg>
</i></li>
        <li class="kx-breadcrumb__item">
            <span class="kx-breadcrumb__label">Node Offshore</span>
        </li>
    </ol>
</nav>
<!-- BREADCRUMB Component -->
<nav class="kx-breadcrumb{% if theme %} kx-breadcrumb--theme-{{ theme }}{% endif %}">
    <ol class="kx-breadcrumb__list">
        {% for item in items -%}
        <li class="kx-breadcrumb__item">
            {% if item.href -%}
            <a href="{{ item.href }}" class="kx-breadcrumb__label">{{ item.txt }}</a>
                {% if item.dropdownContext %}
                {%- render '@dropdown', item.dropdownContext -%}
                {% else %}
                {% render '@icon', { symbol: 'angle-right', size: 'tiny' } %}
                {%- endif -%}
            {% else -%}
            <span class="kx-breadcrumb__label">{{ item.txt }}</span>
            {% endif -%}
        </li>
        {%- endfor -%}
    </ol>
</nav>
{
  "theme": "foam",
  "classes": null,
  "items": [
    {
      "txt": "Home",
      "href": "#"
    },
    {
      "txt": "Applications",
      "href": "#"
    },
    {
      "txt": "GSN Management",
      "href": "#"
    },
    {
      "txt": "Node Offshore"
    }
  ]
}
  • Content:
    // ==========================================================================
    // Component: breadcrumb
    // ==========================================================================
    
    // Elements (children)
    // ==========================================================================
    .kx-breadcrumb__label {
        @include type-scale(small);
        @include type-weight(bold);
        color: inherit;
    
        @at-root {
            a#{&} {
                color: $color-breadcrumb-link;
                text-decoration: none;
    
                &:focus {
                    box-shadow: inset 0 0 0 rem-calc(2) $color-btn-flat-border-focus;
                    outline: 0;
                }
    
                &:hover {
                    text-decoration: underline;
                }
    
                + .kx-icon {
                    @include mx(tiny);
                    transform: translate(rem-calc(4), rem-calc(1));
    
                    svg {
                        fill: currentColor;
                    }
                }
            }
        }
    
        + .kx-dropdown {
            @include ml(tiny);
            margin-right: -4px;
    
            .kx-dropdown__toggle {
                padding-bottom: 1px;
                margin-bottom: -1px;
                border-radius: $radius-global;
                box-shadow: rem-calc(0 0 0 1) rgba(0, 0, 0, 0.19);
    
                .kx-icon {
                    margin-top: rem-calc(4) !important;
                    margin-bottom: rem-calc(4) !important;
                    will-change: transform;
                    transition: transform $duration-instant ease-in-out;
                    transform-origin: 50% 60%;
    
                }
    
                svg {
                    top: rem-calc(1);
                }
    
                &:hover {
                    background-color: $color-dropdownmenu-bg;
                }
    
                &.kx-dropdown--show {
                    margin-bottom: 0;
                    padding-bottom: 0;
                    background: $color-dropdownmenu-bg;
                    border-bottom-right-radius: 0;
                    border-bottom-left-radius: 0;
                    box-shadow: rem-calc(0 -1 0 0) rgba(0, 0, 0, 0.19), rem-calc(-1 0 0 0) rgba(0, 0, 0, 0.19), rem-calc(1 0 0 0) rgba(0, 0, 0, 0.19);
                    position: relative;
                    z-index: 1001;
    
                    .kx-icon {
                        transform: rotateZ(90deg);
                    }
                }
    
                ~ .kx-dropdown__menu {
                    margin-top: rem-calc(-3);
                    margin-left: rem-calc(-8);
                    padding-left: rem-calc(7);
                }
            }
        }
    }
    
    .kx-breadcrumb__item {
        @include mr(mini);
        @include flex;
        @include align-items-center;
        flex: 0 0 auto;
    }
    
    .kx-breadcrumb__list {
        @include reset-list;
        @include flex;
        @include flex-wrap;
    }
    
    // Block (parent)
    // ==========================================================================
    .kx-breadcrumb {
        padding-top: rem-calc(6);
        padding-bottom: rem-calc(6);
        background-color: $color-breadcrumb-bg;
        color: $color-breadcrumb-txt;
    }
    
    // Modifiers
    // ==========================================================================
    
    [class*='kx-breadcrumb--theme-'] {
        @include px(small);
    }
    
    .kx-breadcrumb--theme-white {
        background-color: $color-breadcrumb-bg-theme-white;
        color: $color-breadcrumb-txt-theme-white;
        box-shadow: 0 rem-calc(1) 0 0 $color-breadcrumb-border;
    }
    
    .kx-breadcrumb--theme-foam {
        background-color: $color-breadcrumb-bg-theme-foam;
        color: $color-breadcrumb-txt-theme-foam;
        box-shadow: 0 0 0 rem-calc(1) $color-breadcrumb-border;
    }
    
  • URL: /components/raw/breadcrumb/_breadcrumb.scss
  • Filesystem Path: src\components\01-breadcrumb\_breadcrumb.scss
  • Size: 3.6 KB

There are no notes for this item.