OFRAG Frontend Components Library v0.0.0

Big Menu Dropdown Basic: Large List With Only Categories With Forward Button 

<a href="#" class="big-menu-dropdown-basic__navigation--link">Alle Marken</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">Marke A</a>

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

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

                  </li>

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

                      <a href="#" target="_self" class="big-menu-flat-list__title -is-link">Marke J</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": "Marken",
  "href": "#",
  "items": [
    {
      "title": "Marke A",
      "href": "#"
    },
    {
      "title": "Marke B",
      "href": "#"
    },
    {
      "title": "Marke C",
      "href": "#"
    },
    {
      "title": "Marke D",
      "href": "#"
    },
    {
      "title": "Marke E",
      "href": "#"
    },
    {
      "title": "Marke F",
      "href": "#"
    },
    {
      "title": "Marke G",
      "href": "#"
    },
    {
      "title": "Marke H",
      "href": "#"
    },
    {
      "title": "Marke I",
      "href": "#"
    },
    {
      "title": "Marke J",
      "href": "#"
    },
    {
      "title": "Marke A",
      "href": "#"
    },
    {
      "title": "Marke B",
      "href": "#"
    },
    {
      "title": "Marke C",
      "href": "#"
    },
    {
      "title": "Marke D",
      "href": "#"
    },
    {
      "title": "Marke E",
      "href": "#"
    },
    {
      "title": "Marke F",
      "href": "#"
    },
    {
      "title": "Marke G",
      "href": "#"
    },
    {
      "title": "Marke H",
      "href": "#"
    },
    {
      "title": "Marke I",
      "href": "#"
    },
    {
      "title": "Marke J",
      "href": "#"
    },
    {
      "title": "Marke A",
      "href": "#"
    },
    {
      "title": "Marke B",
      "href": "#"
    },
    {
      "title": "Marke C",
      "href": "#"
    },
    {
      "title": "Marke D",
      "href": "#"
    },
    {
      "title": "Marke E",
      "href": "#"
    },
    {
      "title": "Marke F",
      "href": "#"
    },
    {
      "title": "Marke G",
      "href": "#"
    },
    {
      "title": "Marke H",
      "href": "#"
    },
    {
      "title": "Marke I",
      "href": "#"
    },
    {
      "title": "Marke J",
      "href": "#"
    },
    {
      "title": "Marke I",
      "href": "#"
    },
    {
      "title": "Marke J",
      "href": "#"
    },
    {
      "title": "Marke H",
      "href": "#"
    },
    {
      "title": "Marke I",
      "href": "#"
    },
    {
      "title": "Marke J",
      "href": "#"
    },
    {
      "title": "Marke I",
      "href": "#"
    },
    {
      "title": "Marke J",
      "href": "#"
    },
    {
      "title": "Marke A",
      "href": "#"
    },
    {
      "title": "Marke B",
      "href": "#"
    },
    {
      "title": "Marke C",
      "href": "#"
    },
    {
      "title": "Marke D",
      "href": "#"
    },
    {
      "title": "Marke E",
      "href": "#"
    },
    {
      "title": "Marke F",
      "href": "#"
    },
    {
      "title": "Marke G",
      "href": "#"
    },
    {
      "title": "Marke H",
      "href": "#"
    },
    {
      "title": "Marke I",
      "href": "#"
    },
    {
      "title": "Marke J",
      "href": "#"
    },
    {
      "title": "Marke I",
      "href": "#"
    },
    {
      "title": "Marke J",
      "href": "#"
    },
    {
      "title": "Marke H",
      "href": "#"
    },
    {
      "title": "Marke I",
      "href": "#"
    },
    {
      "title": "Marke J",
      "href": "#"
    },
    {
      "title": "Marke I",
      "href": "#"
    },
    {
      "title": "Marke J",
      "href": "#"
    },
    {
      "title": "Marke A",
      "href": "#"
    },
    {
      "title": "Marke B",
      "href": "#"
    },
    {
      "title": "Marke C",
      "href": "#"
    },
    {
      "title": "Marke D",
      "href": "#"
    },
    {
      "title": "Marke E",
      "href": "#"
    },
    {
      "title": "Marke F",
      "href": "#"
    },
    {
      "title": "Marke G",
      "href": "#"
    },
    {
      "title": "Marke H",
      "href": "#"
    },
    {
      "title": "Marke I",
      "href": "#"
    },
    {
      "title": "Marke J",
      "href": "#"
    },
    {
      "title": "Marke I",
      "href": "#"
    },
    {
      "title": "Marke J",
      "href": "#"
    },
    {
      "title": "Marke H",
      "href": "#"
    },
    {
      "title": "Marke I",
      "href": "#"
    },
    {
      "title": "Marke J",
      "href": "#"
    },
    {
      "title": "Marke I",
      "href": "#"
    },
    {
      "title": "Marke J",
      "href": "#"
    },
    {
      "title": "Marke A",
      "href": "#"
    },
    {
      "title": "Marke B",
      "href": "#"
    },
    {
      "title": "Marke C",
      "href": "#"
    },
    {
      "title": "Marke D",
      "href": "#"
    },
    {
      "title": "Marke E",
      "href": "#"
    },
    {
      "title": "Marke F",
      "href": "#"
    },
    {
      "title": "Marke G",
      "href": "#"
    },
    {
      "title": "Marke H",
      "href": "#"
    },
    {
      "title": "Marke I",
      "href": "#"
    },
    {
      "title": "Marke J",
      "href": "#"
    },
    {
      "title": "Marke I",
      "href": "#"
    },
    {
      "title": "Marke J",
      "href": "#"
    },
    {
      "title": "Marke H",
      "href": "#"
    },
    {
      "title": "Marke I",
      "href": "#"
    },
    {
      "title": "Marke J",
      "href": "#"
    },
    {
      "title": "Marke I",
      "href": "#"
    },
    {
      "title": "Marke J",
      "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.