OFRAG Frontend Components Library v0.0.0

Big Menu Dropdown Basic: With Forward Button 

<a href="#" class="big-menu-dropdown-basic__navigation--link">Alle Produkte</a>
              <ul class="big-menu-dropdown-basic__navigation">

                  <li class="big-menu-flat-list__item">

                      <a href="#" target="_self" class="big-menu-flat-list__title -is-link">Gruppentitel</a>

                  </li>

                  <li class="big-menu-flat-list__item">

                      <a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>

                  </li>

                  <li class="big-menu-flat-list__item">

                      <a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>

                  </li>

                  <li class="big-menu-flat-list__item">

                      <a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>

                  </li>

                  <li class="big-menu-flat-list__item">

                      <a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>

                  </li>

                  <li class="big-menu-flat-list__item">

                      <a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>

                  </li>

                  <li class="big-menu-flat-list__item">

                      <a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>

                  </li>

                  <li class="big-menu-flat-list__item">

                      <a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>

                  </li>

                  <li class="big-menu-flat-list__item">

                      <a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>

                  </li>

                  <li class="big-menu-flat-list__item">

                      <a href="#" target="_self" class="big-menu-flat-list__title -is-link">Gruppentitel</a>

                  </li>

                  <li class="big-menu-flat-list__item">

                      <a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>

                  </li>

                  <li class="big-menu-flat-list__item">

                      <a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>

                  </li>

                  <li class="big-menu-flat-list__item">

                      <a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>

                  </li>

                  <li class="big-menu-flat-list__item">

                      <a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>

                  </li>

                  <li class="big-menu-flat-list__item">

                      <a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>

                  </li>

                  <li class="big-menu-flat-list__item">

                      <a href="#" target="_self" class="big-menu-flat-list__title -is-link">Gruppentitel</a>

                  </li>

                  <li class="big-menu-flat-list__item">

                      <a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>

                  </li>

                  <li class="big-menu-flat-list__item">

                      <a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>

                  </li>

                  <li class="big-menu-flat-list__item">

                      <a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>

                  </li>

                  <li class="big-menu-flat-list__item">

                      <a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>

                  </li>

                  <li class="big-menu-flat-list__item">

                      <a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>

                  </li>

                  <li class="big-menu-flat-list__item">

                      <a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>

                  </li>

                  <li class="big-menu-flat-list__item">

                      <a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>

                  </li>

                  <li class="big-menu-flat-list__item">

                      <a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>

                  </li>

                  <li class="big-menu-flat-list__item">

                      <a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>

                  </li>

                  <li class="big-menu-flat-list__item">

                      <a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>

                  </li>

                  <li class="big-menu-flat-list__item">

                      <a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>

                  </li>

                  <li class="big-menu-flat-list__item">

                      <a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>

                  </li>

                  <li class="big-menu-flat-list__item">

                      <a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>

                  </li>

                  <li class="big-menu-flat-list__item">

                      <a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>

                  </li>

                  <li class="big-menu-flat-list__item">

                      <a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>

                  </li>

                  <li class="big-menu-flat-list__item">

                      <a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>

                  </li>

                  <li class="big-menu-flat-list__item">

                      <a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>

                  </li>

                  <li class="big-menu-flat-list__item">

                      <a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>

                  </li>

                  <li class="big-menu-flat-list__item">

                      <a href="#" target="_self" class="big-menu-flat-list__title -is-link">Gruppentitel</a>

                  </li>

                  <li class="big-menu-flat-list__item">

                      <a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>

                  </li>

                  <li class="big-menu-flat-list__item">

                      <a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>

                  </li>

                  <li class="big-menu-flat-list__item">

                      <a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>

                  </li>

                  <li class="big-menu-flat-list__item">

                      <a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>

                  </li>

                  <li class="big-menu-flat-list__item">

                      <a href="#" target="_self" class="big-menu-flat-list__title -is-link">Gruppentitel</a>

                  </li>

                  <li class="big-menu-flat-list__item">

                      <a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>

                  </li>

                  <li class="big-menu-flat-list__item">

                      <a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>

                  </li>

                  <li class="big-menu-flat-list__item">

                      <a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>

                  </li>

                  <li class="big-menu-flat-list__item">

                      <a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>

                  </li>

                  <li class="big-menu-flat-list__item">

                      <a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>

                  </li>

                  <li class="big-menu-flat-list__item">

                      <a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>

                  </li>

                  <li class="big-menu-flat-list__item">

                      <a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>

                  </li>

                  <li class="big-menu-flat-list__item">

                      <a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>

                  </li>

                  <li class="big-menu-flat-list__item">

                      <a href="#" target="_self" class="big-menu-flat-list__title -is-link">Gruppentitel</a>

                  </li>

                  <li class="big-menu-flat-list__item">

                      <a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>

                  </li>

                  <li class="big-menu-flat-list__item">

                      <a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>

                  </li>

                  <li class="big-menu-flat-list__item">

                      <a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>

                  </li>

                  <li class="big-menu-flat-list__item">

                      <a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>

                  </li>

                  <li class="big-menu-flat-list__item">

                      <a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>

                  </li>

                  <li class="big-menu-flat-list__item">

                      <a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>

                  </li>

                  <li class="big-menu-flat-list__item">

                      <a href="#" target="_self" class="big-menu-flat-list__title -is-link">Gruppentitel Letzte</a>

                  </li>

                  <li class="big-menu-flat-list__item">

                      <a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>

                  </li>

                  <li class="big-menu-flat-list__item">

                      <a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>

                  </li>

                  <li class="big-menu-flat-list__item">

                      <a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>

                  </li>

                  <li class="big-menu-flat-list__item">

                      <a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>

                  </li>

                  <li class="big-menu-flat-list__item">

                      <a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>

                  </li>

                  <li class="big-menu-flat-list__item">

                      <a href="#" target="_self" class="big-menu-flat-list__link">Artikelgruppentitel</a>

                  </li>

              </ul>
 
{% include '@SharedComponents/modules/page/components/navigation/big-menu/big-menu-dropdown-basic/big-menu-dropdown-basic.twig' %}
 
{
  "forwardButton": {
    "variant": "icon-text-regular",
    "title": "Alle %s",
    "icon": "arrow-right",
    "type": "a",
    "href": "#"
  },
  "title": "Produkte",
  "href": "#",
  "items": [
    {
      "title": "Gruppentitel",
      "href": "#",
      "items": [
        {
          "title": "Artikelgruppentitel",
          "href": "#"
        },
        {
          "title": "Artikelgruppentitel",
          "href": "#"
        },
        {
          "title": "Artikelgruppentitel",
          "href": "#"
        },
        {
          "title": "Artikelgruppentitel",
          "href": "#"
        },
        {
          "title": "Artikelgruppentitel",
          "href": "#"
        },
        {
          "title": "Artikelgruppentitel",
          "href": "#"
        },
        {
          "title": "Artikelgruppentitel",
          "href": "#"
        },
        {
          "title": "Artikelgruppentitel",
          "href": "#"
        }
      ]
    },
    {
      "title": "Gruppentitel",
      "href": "#",
      "items": [
        {
          "title": "Artikelgruppentitel",
          "href": "#"
        },
        {
          "title": "Artikelgruppentitel",
          "href": "#"
        },
        {
          "title": "Artikelgruppentitel",
          "href": "#"
        },
        {
          "title": "Artikelgruppentitel",
          "href": "#"
        },
        {
          "title": "Artikelgruppentitel",
          "href": "#"
        }
      ]
    },
    {
      "title": "Gruppentitel",
      "href": "#",
      "items": [
        {
          "title": "Artikelgruppentitel",
          "href": "#"
        },
        {
          "title": "Artikelgruppentitel",
          "href": "#"
        },
        {
          "title": "Artikelgruppentitel",
          "href": "#"
        },
        {
          "title": "Artikelgruppentitel",
          "href": "#"
        },
        {
          "title": "Artikelgruppentitel",
          "href": "#"
        },
        {
          "title": "Artikelgruppentitel",
          "href": "#"
        },
        {
          "title": "Artikelgruppentitel",
          "href": "#"
        },
        {
          "title": "Artikelgruppentitel",
          "href": "#"
        },
        {
          "title": "Artikelgruppentitel",
          "href": "#"
        },
        {
          "title": "Artikelgruppentitel",
          "href": "#"
        },
        {
          "title": "Artikelgruppentitel",
          "href": "#"
        },
        {
          "title": "Artikelgruppentitel",
          "href": "#"
        },
        {
          "title": "Artikelgruppentitel",
          "href": "#"
        },
        {
          "title": "Artikelgruppentitel",
          "href": "#"
        },
        {
          "title": "Artikelgruppentitel",
          "href": "#"
        },
        {
          "title": "Artikelgruppentitel",
          "href": "#"
        },
        {
          "title": "Artikelgruppentitel",
          "href": "#"
        },
        {
          "title": "Artikelgruppentitel",
          "href": "#"
        }
      ]
    },
    {
      "title": "Gruppentitel",
      "href": "#",
      "items": [
        {
          "title": "Artikelgruppentitel",
          "href": "#"
        },
        {
          "title": "Artikelgruppentitel",
          "href": "#"
        },
        {
          "title": "Artikelgruppentitel",
          "href": "#"
        },
        {
          "title": "Artikelgruppentitel",
          "href": "#"
        }
      ]
    },
    {
      "title": "Gruppentitel",
      "href": "#",
      "items": [
        {
          "title": "Artikelgruppentitel",
          "href": "#"
        },
        {
          "title": "Artikelgruppentitel",
          "href": "#"
        },
        {
          "title": "Artikelgruppentitel",
          "href": "#"
        },
        {
          "title": "Artikelgruppentitel",
          "href": "#"
        },
        {
          "title": "Artikelgruppentitel",
          "href": "#"
        },
        {
          "title": "Artikelgruppentitel",
          "href": "#"
        },
        {
          "title": "Artikelgruppentitel",
          "href": "#"
        },
        {
          "title": "Artikelgruppentitel",
          "href": "#"
        }
      ]
    },
    {
      "title": "Gruppentitel",
      "href": "#",
      "items": [
        {
          "title": "Artikelgruppentitel",
          "href": "#"
        },
        {
          "title": "Artikelgruppentitel",
          "href": "#"
        },
        {
          "title": "Artikelgruppentitel",
          "href": "#"
        },
        {
          "title": "Artikelgruppentitel",
          "href": "#"
        },
        {
          "title": "Artikelgruppentitel",
          "href": "#"
        },
        {
          "title": "Artikelgruppentitel",
          "href": "#"
        }
      ]
    },
    {
      "title": "Gruppentitel Letzte",
      "href": "#",
      "items": [
        {
          "title": "Artikelgruppentitel",
          "href": "#"
        },
        {
          "title": "Artikelgruppentitel",
          "href": "#"
        },
        {
          "title": "Artikelgruppentitel",
          "href": "#"
        },
        {
          "title": "Artikelgruppentitel",
          "href": "#"
        },
        {
          "title": "Artikelgruppentitel",
          "href": "#"
        },
        {
          "title": "Artikelgruppentitel",
          "href": "#"
        }
      ]
    }
  ]
}
  • Content: 
    import './big-menu-dropdown-basic.scss';
import BigMenuDropdownBasic, {selector as sel} from 'cando-cx-components-library/components/modules/page/components/navigation/big-menu/big-menu-dropdown-basic/big-menu-dropdown-basic';

export default BigMenuDropdownBasic;
export const selector = sel;
  • URL: /components/raw/big-menu-dropdown-basic/big-menu-dropdown-basic.js
  • Filesystem Path: src/components/modules/page/components/navigation/big-menu/big-menu-dropdown-basic/big-menu-dropdown-basic.js
  • Size: 293 Bytes
  • Content: 
    @import "~shared/base";
@import "~cando-cx-components-library/components/modules/page/components/navigation/big-menu/big-menu-dropdown-basic/big-menu-dropdown-basic";
  • URL: /components/raw/big-menu-dropdown-basic/big-menu-dropdown-basic.scss
  • Filesystem Path: src/components/modules/page/components/navigation/big-menu/big-menu-dropdown-basic/big-menu-dropdown-basic.scss
  • Size: 166 Bytes

No notes defined.