Exceptions

Do not use these exceptions unless you've applied and received permission for your product!

Submenu Icons

If you were granted an excpetion to have icons on submenu items, add 'icon': 'fa fa-th' or 'icon': 'ui-icon-file-name' to the submenu item in the json.

Badges on Top Level and Submenu Items

If you were granted an excpetion to have counters on top-level icons, or submenu items, add the following: 'counts': '5'

Custom Text and Icon Color

If you were granted an excpetion to change menu item text and color, apply a text color css class thusly: 'colorClass': 'text-danger'

More on RAUL colors' classes can be found here.


            <ui-left-nav id="left-nav-data-driven"><ui-left-nav>
          

            const leftNavStructure = [
              {
                'title': 'Home',
                'icon': 'places-home-3',
                'url': '#',
              },
              {
                'title': 'Company',
                'icon': 'building-16',
                'counts': '1',
                'active': true,
                'items': [
                  {
                    'title': 'Company Search',
                    'icon': 'real-estate-search',
                    'url': '#',
                    'active': true,
                  },
                  {
                    'title': 'Company Details',
                    'icon': 'real-estate-information',
                    'url': '#',
                    'counts': '1',
                  },
                ],
              },
              {
                'title': 'Properties',
                'icon': 'building-hotel',
                'colorClass': 'text-danger',
                'items': [
                  {
                    'title': 'Property Subitem Level 1',
                    'items': [
                      {
                        'title': 'Property Subitem Level 2',
                        'items': [
                          {
                            'title': 'Property Subitem Level 3',
                            'items': [
                              {
                                'title': 'Property Subitem Level 4',
                                'items': [
                                  {
                                    'title': 'Property Subitem Level 5',
                                    'icon': 'real-estate-address-book-1',
                                    'url': '#',
                                  },
                                ],
                              },
                            ],
                          },
                        ],
                      },
                    ],
                  },
                  {
                    'title': 'Property Search',
                    'url': '#',
                    'colorClass': 'text-danger',
                  },
                  {
                    'title': 'Property Details',
                    'url': '#',
                  },
                ],
              },
              {
                'title': 'Products',
                'icon': 'fa fa-th',
                'counts': '18',
                'items': [
                  {
                    'title': 'Product 1',
                    'icon': 'fa fa-laptop',
                    'url': '#',
                    'counts': '5',
                  },
                  {
                    'title': 'Product 2',
                    'url': '#',
                    'counts': '4',
                  },
                  {
                    'title': 'Product 3',
                    'url': '#',
                    'counts': '9',
                  },
                ],
              },
            ]

            const leftNavDataDriven = document.getElementById('left-nav-data-driven-with-exceptions')

            leftNavDataDriven.api.items = leftNavStructure