Breadcrumb: With Dropdown 

<!-- 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>
            <!-- DROPDOWN Component -->
            <div class="kx-dropdown" role="group">
                <button id="--95270" class="kx-dropdown__toggle kx-btn kx-btn--skin-flat kx-btn--size-tiny kx-btn--icon kx-js-dropdown__toggle" aria-haspopup="true" aria-expanded="false">
        <span class="kx-btn__inner">
                <!-- 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>
                <span class="kx-btn__txt kx-is-vishidden">Dropdown</span>
                </span>
    </button>
                <div class="kx-dropdown__menu kx-js-dropdown__menu" aria-labelledby="--95270">
                    <ul class="kx-dropdown__list">
                        <li class="kx-dropdown__item">
                            <a class="kx-dropdown__link" href="#">
                            <span class="kx-dropdown__item__txt">Home Link 1A</span>
                            </a>
                        </li>
                        <li class="kx-dropdown__item">
                            <a class="kx-dropdown__link" href="#">
                            <span class="kx-dropdown__item__txt">Link 1B</span>
                            </a>
                        </li>
                        <li class="kx-dropdown__item">
                            <a class="kx-dropdown__link" href="#">
                            <span class="kx-dropdown__item__txt">Link 1C</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>

        </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>
            <!-- DROPDOWN Component -->
            <div class="kx-dropdown" role="group">
                <button id="--95692" class="kx-dropdown__toggle kx-btn kx-btn--skin-flat kx-btn--size-tiny kx-btn--icon kx-js-dropdown__toggle" aria-haspopup="true" aria-expanded="false">
        <span class="kx-btn__inner">
                <!-- 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>
                <span class="kx-btn__txt kx-is-vishidden">Dropdown</span>
                </span>
    </button>
                <div class="kx-dropdown__menu kx-js-dropdown__menu" aria-labelledby="--95692">
                    <ul class="kx-dropdown__list">
                        <li class="kx-dropdown__item">
                            <a class="kx-dropdown__link" href="#">
                            <span class="kx-dropdown__item__txt">Link 3A</span>
                            </a>
                        </li>
                        <li class="kx-dropdown__item">
                            <a class="kx-dropdown__link" href="#">
                            <span class="kx-dropdown__item__txt">Link 3B</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>

        </li>
        <li class="kx-breadcrumb__item">
            <a href="#" class="kx-breadcrumb__label">Node Offshore</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>
    </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": "#",
      "dropdownContext": {
        "text": "Dropdown",
        "hideText": true,
        "skin": "flat",
        "size": "tiny",
        "classes": [],
        "icon": {
          "size": "tiny",
          "symbol": "angle-right"
        },
        "items": [
          {
            "text": "Home Link 1A",
            "href": "#"
          },
          {
            "text": "Link 1B",
            "href": "#"
          },
          {
            "text": "Link 1C",
            "href": "#"
          }
        ]
      }
    },
    {
      "txt": "Applications",
      "href": "#"
    },
    {
      "txt": "GSN Management",
      "href": "#",
      "dropdownContext": {
        "text": "Dropdown",
        "hideText": true,
        "skin": "flat",
        "size": "tiny",
        "classes": [],
        "icon": {
          "size": "tiny",
          "symbol": "angle-right"
        },
        "items": [
          {
            "text": "Link 3A",
            "href": "#"
          },
          {
            "text": "Link 3B",
            "href": "#"
          }
        ]
      }
    },
    {
      "txt": "Node Offshore",
      "href": "#"
    }
  ]
}
  • 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.