Swegon Component Library

Navigation Item List: Default 

<ul class="navigation-item-list js-options-limiter " data-desktop-disabled="true" data-option-selector=".js-option" data-option-limit="4">
        <li class="js-option">
            <a href="#" class="navigation-item navigation-item--subcategory">
                <span class="navigation-item__text">
                    Luftburna rumsprodukter
                </span>
                <span class="navigation-item__icon">
                    <svg class="icon " focusable="false">
                        <use xlink:href="#icon-chevron-right"></use>
                    </svg>
                </span>
            </a>

        </li>
        <li class="button-wrapper">
            <button type="button" class="show-more-filters">Show More</button>
        </li>
    </ul>
 
{{#if horizontalScroll }}
    {{#> @horizontal-scroller }}
        <ul class="navigation-item-list js-options-limiter {{ getmodifiers modifiers "navigation-item-list"}}" data-desktop-disabled="true" data-option-selector=".js-option" data-option-limit="4">
            {{#each items}}
                <li class="js-option">
                    {{render "@navigation-item" this }}
                </li>
            {{/each}}
                <li class="button-wrapper">
                    <button type="button" class="show-more-filters">Show More</button>
                </li>
        </ul>
    {{/@horizontal-scroller}}
{{else}}
    <ul class="navigation-item-list js-options-limiter {{ getmodifiers modifiers "navigation-item-list"}}" data-desktop-disabled="true" data-option-selector=".js-option" data-option-limit="4">
        {{#each items}}
            <li class="js-option">
                {{render "@navigation-item" this }}
            </li>
        {{/each}}
            <li class="button-wrapper">
                <button type="button" class="show-more-filters">Show More</button>
            </li>
    </ul>
{{/if}}
 
{
  "horizontalScroll": false,
  "items": [
    {
      "label": "Luftburna rumsprodukter",
      "href": "#",
      "modifiers": "subcategory",
      "linkIcon": "chevron-right"
    }
  ]
}
  • Content: 
    .navigation-item-list {
    font-size: 0;
    margin: 0;
    list-style: none;
    padding: 16px 0 8px;
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid $color-gray-2;

    @include breakpoint(0, $s) {
        margin: 0;
        flex-direction: column;
        flex-wrap: inherit;
    }

    @include breakpoint($l) {
        text-align: left;
        padding: 32px 0 24px;
    }

    &.navigation-item-list--horizontal-scroll {
        display: flex;
        margin: 0;
        padding: 0;

        li {
            flex-shrink: 0;
            margin: 0 0 4px 16px;

            &:first-child {
                margin: 0 0 4px 0;
            }
        } 
    }

    li {
        display: inline-block;
        vertical-align: top;
        margin: 0 4px 8px;

        @include breakpoint(0, $s) {
            display: block;
            margin: 0 0 8px;
            text-align: center !important;
        }
    }

    &.js-options-limiter {
        .button-wrapper {
            bottom: 18px;
            &:after {
                height: 60px;
                background: linear-gradient(0deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
            }
        }

        .show-more-filters {
            font-size: 16px;
            color: $color-black;
            text-decoration: underline;

            &:hover {
                text-decoration: none;
            }
        }

        &--padded {
            padding-bottom: 60px;
        }
    }

    .navigation-item {
        @include breakpoint(0, $s) {
            display: flex;
            justify-content: center;
        }
    }
}
  • URL: /components/raw/navigation-item-list/navigation-item-list.scss
  • Filesystem Path: src/components/navigation-item-list/navigation-item-list.scss
  • Size: 1.6 KB

No notes defined.