PSI Software SE Design Library

Breadcrumb Nav

No notes defined.

<!-- Default -->
<nav class="breadcrumbNav">
    <div class="breadcrumbNav-item">
        <a href="#" class="breadcrumbNav-link">Startpage</a>
    </div>
    <div class="breadcrumbNav-item">
        <a href="#" class="breadcrumbNav-link">Page</a>
    </div>
    <div class="breadcrumbNav-item">
        <span>Current Page</span>
    </div>
</nav>


<!-- Large Content -->
<nav class="breadcrumbNav">
    <div class="breadcrumbNav-item">
        <a href="#" class="breadcrumbNav-link">Startpage</a>
    </div>
    <div class="breadcrumbNav-item">
        <a href="#" class="breadcrumbNav-link">Cardigan Pinterest gentrify</a>
    </div>
    <div class="breadcrumbNav-item">
        <a href="#" class="breadcrumbNav-link">Echo Park bespoke tattooed</a>
    </div>
    <div class="breadcrumbNav-item">
        <a href="#" class="breadcrumbNav-link">Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep</a>
    </div>
    <div class="breadcrumbNav-item">
        <a href="#" class="breadcrumbNav-link">Normcore vegan tilde vinyl</a>
    </div>
    <div class="breadcrumbNav-item">
        <a href="#" class="breadcrumbNav-link">Marfa migas Austin Schlitz</a>
    </div>
    <div class="breadcrumbNav-item">
        <span>Current Page</span>
    </div>
</nav>


<!-- Documentation only -->
<section class="doc-variant">

    <header class="doc-variant-header">

        <div class="doc-variant-configuration">
        </div>

        <div class="doc-variant-configuration">
            <label>
                Theme:
                <select class="doc-select" onchange="fractal.setTheme(this, {target: '.doc-variant-samples', value: this.value});">
                    <option value="default">default</option>
                    <option value="dark">dark</option>
                </select>
            </label>
        </div>

    </header>

    <div class="doc-variant-samples" style="display: block;" data-theme="">
        <nav class="breadcrumbNav">
            <div class="breadcrumbNav-item">
                <a href="#" class="breadcrumbNav-link">Startpage</a>
            </div>
            <div class="breadcrumbNav-item">
                <a href="#" class="breadcrumbNav-link">Page</a>
            </div>
            <div class="breadcrumbNav-item">
                <span>Current Page</span>
            </div>
        </nav>

        <nav class="breadcrumbNav">
            <div class="breadcrumbNav-item">
                <a href="#" class="breadcrumbNav-link">Startpage</a>
            </div>
            <div class="breadcrumbNav-item">
                <a href="#" class="breadcrumbNav-link">Cardigan Pinterest gentrify</a>
            </div>
            <div class="breadcrumbNav-item">
                <a href="#" class="breadcrumbNav-link">Echo Park bespoke tattooed</a>
            </div>
            <div class="breadcrumbNav-item">
                <a href="#" class="breadcrumbNav-link">Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep</a>
            </div>
            <div class="breadcrumbNav-item">
                <a href="#" class="breadcrumbNav-link">Normcore vegan tilde vinyl</a>
            </div>
            <div class="breadcrumbNav-item">
                <a href="#" class="breadcrumbNav-link">Marfa migas Austin Schlitz</a>
            </div>
            <div class="breadcrumbNav-item">
                <span>Current Page</span>
            </div>
        </nav>

    </div>

</section>


<!-- Default -->
<nav class="breadcrumbNav{{#modifier}} {{.}}{{/modifier}}">
    {{#items}}
        <div class="breadcrumbNav-item">
            {{#if url}}
                <a href="{{url}}" class="breadcrumbNav-link">{{{label}}}</a>
            {{else}}
                <span>{{{label}}}</span>
            {{/if}}
        </div>
    {{/items}}
</nav>

<!-- Large Content -->
<nav class="breadcrumbNav{{#modifier}} {{.}}{{/modifier}}">
    {{#items}}
        <div class="breadcrumbNav-item">
            {{#if url}}
                <a href="{{url}}" class="breadcrumbNav-link">{{{label}}}</a>
            {{else}}
                <span>{{{label}}}</span>
            {{/if}}
        </div>
    {{/items}}
</nav>

<!-- Documentation only -->
{{#variants}}
<section class="doc-variant">

    <header class="doc-variant-header">

            {{#title}}
        <h2 class="doc-variant-title">{{{.}}}</h2>
            {{/title}}

        <div class="doc-variant-configuration">
                {{#if modifiers}}
            <ul data-label="Modifier">
                    {{#modifiers}}
                <li>{{{.}}}</li>
                    {{/modifiers}}
            </ul>
                {{/if}}
        </div>

        <div class="doc-variant-configuration">
                {{#if themes}}
            <label>
                Theme:
                <select class="doc-select" onchange="fractal.setTheme(this, {target: '.doc-variant-samples', value: this.value});">
                        {{#themes}}
                    <option value="{{{.}}}">{{{.}}}</option>
                        {{/themes}}
                </select>
            </label>
                {{/if}}
        </div>

    </header>

    <div class="doc-variant-samples" style="display: block;" data-theme="{{theme}}">
        {{#samples}}
            {{render '@breadcrumbnav' (contextData '@breadcrumbnav' this) merge=true}}
        {{/samples}}
    </div>

</section>
    {{/variants}}
 
/* Default */
{
  "items": [
    {
      "label": "Startpage",
      "url": "#"
    },
    {
      "label": "Page",
      "url": "#"
    },
    {
      "label": "Current Page",
      "is-current": true
    }
  ]
}


/* Large Content */
{
  "items": [
    {
      "label": "Startpage",
      "url": "#"
    },
    {
      "label": "Cardigan Pinterest gentrify",
      "url": "#"
    },
    {
      "label": "Echo Park bespoke tattooed",
      "url": "#"
    },
    {
      "label": "Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep",
      "url": "#"
    },
    {
      "label": "Normcore vegan tilde vinyl",
      "url": "#"
    },
    {
      "label": "Marfa migas Austin Schlitz",
      "url": "#"
    },
    {
      "label": "Current Page",
      "is-current": true
    }
  ]
}


/* Documentation only */
{
  "items": [
    {
      "label": "Startpage",
      "url": "#"
    },
    {
      "label": "Page",
      "url": "#"
    },
    {
      "label": "Current Page",
      "is-current": true
    }
  ],
  "variants": [
    {
      "themes": [
        "default",
        "dark"
      ],
      "samples": [
        {
          "items": [
            {
              "label": "Startpage",
              "url": "#"
            },
            {
              "label": "Page",
              "url": "#"
            },
            {
              "label": "Current Page",
              "is-current": true
            }
          ]
        },
        {
          "items": [
            {
              "label": "Startpage",
              "url": "#"
            },
            {
              "label": "Cardigan Pinterest gentrify",
              "url": "#"
            },
            {
              "label": "Echo Park bespoke tattooed",
              "url": "#"
            },
            {
              "label": "Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep",
              "url": "#"
            },
            {
              "label": "Normcore vegan tilde vinyl",
              "url": "#"
            },
            {
              "label": "Marfa migas Austin Schlitz",
              "url": "#"
            },
            {
              "label": "Current Page",
              "is-current": true
            }
          ]
        }
      ]
    }
  ]
}
  • Content: 
    $breadcrumbNav_item_styles: (
    text-size: x-small,
    color: var(--accessible-color--small, #{$_ACCESSIBLE-COLOR--SMALL}),
) !default;

$breadcrumbNav_icon_color: $_accessible-color--small !default;

@import "_breadcrumbNav.settings";
@import "_breadcrumbNav.styles";

%breadcrumbNav {
    @include stack-spacing(0);

    padding-top: var(--bp-small);
    padding-bottom: var(--bp-small);

    a {
        color: inherit;
        text-decoration-thickness: 1px;
        text-decoration-color: color.adjust($_ACCESSIBLE-COLOR--SMALL, $lightness: 40%);
        text-underline-offset: 2px;

        transition-duration: (.2 * $_transition-duration--in);
    }

    [data-theme="dark"] & {

        a {
            text-decoration-color: color.adjust($_ACCESSIBLE-COLOR--SMALL, $lightness: -7%);
        }

    }

    [data-theme="dark"] &-item + &-item {

        &::before {
            background-image: svg-url($breadcrumbNav_icon, invert($_ACCESSIBLE-COLOR--SMALL));
        }

    }

}
  • URL: /components/raw/breadcrumbnav/_breadcrumbNav.scss
  • Filesystem Path: components/04-modules/breadcrumbNav/_breadcrumbNav.scss
  • Size: 992 Bytes
  • Content: 
    $breadcrumbNav_gap: 1ch !default;

$breadcrumbNav_icon: '<svg width="8" height="8" viewBox="0 0 8 8" fill="none" stroke="{{color}}" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M2 0.5L6 4L2 7.5"/></svg>' !default;
$breadcrumbNav_icon-size: 8px !default;
$breadcrumbNav_icon_color: $_minor-color !default;

$breadcrumbNav_item_styles: (
    text-size: small,
    color: $_minor-color,
) !default;

$breadcrumbNav_link-states: (
    default: map.get($link_states, default),
    hover: map.get($link_states, hover),
    focus: map.get($link_states, focus),
    active: map.get($link_states, active),
) !default;
  • URL: /components/raw/breadcrumbnav/_breadcrumbNav.settings.scss
  • Filesystem Path: components/04-modules/breadcrumbNav/_breadcrumbNav.settings.scss
  • Size: 655 Bytes
  • Content: 
    %breadcrumbNav {
    @include stack-spacing(section);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: $breadcrumbNav_gap;

    &-item {
        display: inherit;
        align-items: inherit;
        column-gap: inherit;

        white-space: nowrap;

        @include styles($breadcrumbNav_item_styles);

        & + & {

            &::before {
                content: '';

                display: block;
                width: $breadcrumbNav_icon-size;
                height: $breadcrumbNav_icon-size;

                background: svg-url($breadcrumbNav_icon, $breadcrumbNav_icon_color) no-repeat center center;
            }

        }

        > * {
            display: block;
        }

    }

    a {
        @include state-styles($breadcrumbNav_link_states);
        @include action-states($breadcrumbNav_link_states);
    }

    @include not-on-desktop(){

        &-item {

            &::before {
                transform: scaleX(-1);
            }

            &:not(:nth-last-child(2)) {
                display: none;
            }

        }

    }

}

.breadcrumbNav {
    @extend %breadcrumbNav;

    &-item {
        @extend %breadcrumbNav-item;
    }

}
  • URL: /components/raw/breadcrumbnav/_breadcrumbNav.styles.scss
  • Filesystem Path: components/04-modules/breadcrumbNav/_breadcrumbNav.styles.scss
  • Size: 1.2 KB