Check with your designers to help you design this section
Check with your designers to help you design this section
<nav id="raul-left-navigation" class="raul-left-navigation raul-left-navigation-light">
<ul id="raul-left-navigation-items" class="raul-left-navigation-items">
<li>
<a class="raul-left-navigation-item no-subitems" href="#">
<i class="raul-left-navigation-item-icon fa fa-home"></i>
<span class="raul-left-navigation-item-display">Home</span>
</a>
</li>
<li>
<span class="raul-left-navigation-item has-subitems">
<i class="raul-left-navigation-item-arrow fa fa-angle-down"></i>
<i class="raul-left-navigation-item-icon fa fa-university"></i>
<span class="raul-left-navigation-item-display">Company</span>
</span>
<ul class="raul-left-navigation-subitems">
<li>
<a class="raul-left-navigation-subitem" href="#">
<span class="raul-left-navigation-item-display">Company Search</span>
</a>
</li>
<li>
<a class="raul-left-navigation-subitem" href="#">
<span class="raul-left-navigation-item-display">Company Details</span>
</a>
</li>
</ul>
</li>
<li>
<span class="raul-left-navigation-item has-subitems active selected">
<i class="raul-left-navigation-item-arrow fa fa-angle-up"></i>
<i class="raul-left-navigation-item-icon fa fa-building"></i>
<span class="raul-left-navigation-item-display">Properties</span>
</span>
<ul class="raul-left-navigation-subitems subitems-open">
<li>
<span class="raul-left-navigation-subitem has-subitems active" href="/item/2.1">
<i class="raul-left-navigation-item-arrow fa fa-angle-up"></i>
<span class="raul-left-navigation-item-display">Level 2 Sub Navigation Item</span>
</span>
<ul class="raul-left-navigation-subitems subitems-open">
<li>
<a class="raul-left-navigation-subitem active" href="#">
<span class="raul-left-navigation-item-display">
Level 3 Sub Navigation Item (Active)
</span>
</a>
</li>
<li>
<span class="raul-left-navigation-subitem has-subitems" href="/item/2.2">
<i class="raul-left-navigation-item-arrow fa fa-angle-down"></i>
<span class="raul-left-navigation-item-display">
Level 3 Sub Navigation Item
</span>
</span>
<ul class="raul-left-navigation-subitems">
<li>
<span class="raul-left-navigation-subitem has-subitems" href="/item/2.2">
<i class="raul-left-navigation-item-arrow fa fa-angle-down"></i>
<span class="raul-left-navigation-item-display">
Level 4 Sub Navigation Item
</span>
</span>
<ul class="raul-left-navigation-subitems">
<li>
<a class="raul-left-navigation-subitem" href="#">
<span class="raul-left-navigation-item-display">
Level 5 Sub Navigation Item
</span>
</a>
</li>
<li>
<span class="raul-left-navigation-subitem has-subitems" href="/item/2.2">
<i class="raul-left-navigation-item-arrow fa fa-angle-down"></i>
<span class="raul-left-navigation-item-display">
Level 5 Sub Navigation Item
</span>
</span>
<ul class="raul-left-navigation-subitems">
<li>
<a class="raul-left-navigation-subitem" href="#">
<span class="raul-left-navigation-item-display">
Level 6 Sub Navigation Item
</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a class="raul-left-navigation-subitem" href="#">
<span class="raul-left-navigation-item-display">
Level 4 Sub Navigation Item
</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a class="raul-left-navigation-subitem" href="#">
<span class="raul-left-navigation-item-display">Level 2 Sub Navigation Item</span>
</a>
</li>
</ul>
</li>
<li>
<a class="raul-left-navigation-item no-subitems" href="#">
<i class="raul-left-navigation-item-icon fa fa-th"></i>
<span class="raul-left-navigation-item-display">Products</span>
</a>
</li>
<li>
<a class="raul-left-navigation-item no-subitems" href="#">
<i class="raul-left-navigation-item-icon fa fa-users"></i>
<span class="raul-left-navigation-item-display">People</span>
</a>
</li>
<li>
<a class="raul-left-navigation-item no-subitems" href="#">
<i class="raul-left-navigation-item-icon fa fa-key"></i>
<span class="raul-left-navigation-item-display">Roles & Rights</span>
</a>
</li>
<li>
<a class="raul-left-navigation-item no-subitems" href="#">
<i class="raul-left-navigation-item-icon fa fa-cog"></i>
<span class="raul-left-navigation-item-display">Settings</span>
</a>
</li>
</ul>
</nav>
<ui-left-nav id="left-nav-data-driven"><ui-left-nav>
const leftNavStructure = [
{
'title': 'Home',
'icon': 'places-home-1',
'url': '#',
},
{
'title': 'Company',
'icon': 'bank-2',
'items': [
{
'title': 'Company Search',
'url': '#',
},
{
'title': 'Company Details',
'url': '#',
},
],
},
{
'title': 'Properties',
'icon': 'building-7',
'active': true,
'items': [
{
'title': 'Level 2 Sub Navigation Item',
'active': true,
'items': [
{
'title': 'Level 3 Sub Navigation Item (Active)',
'url': '#',
'active': true,
},
{
'title': 'Level 3 Sub Navigation Item',
'items': [
{
'title': 'Level 4 Sub Navigation Item',
'items': [
{
'title': 'Level 5 Sub Navigation Item',
'url': '#',
},
{
'title': 'Level 5 Sub Navigation Item',
'items': [
{
'title': 'Level 6 Sub Navigation Item',
'url': '#',
},
],
},
],
},
{
'title': 'Level 4 Sub Navigation Item',
'url': '#',
},
],
},
],
},
{
'title': 'Level 2 Sub Navigation Item',
'url': '#',
},
],
},
{
'title': 'Products',
'icon': 'content-view-module-1',
'url': '#',
},
{
'title': 'People',
'icon': 'user',
'url': '#',
},
{
'title': 'Roles & Rights',
'icon': 'key-1',
'url': '#',
},
{
'title': 'Settings',
'icon': 'fa fa-cog',
'url': '#',
},
]
const leftNavDataDriven = document.getElementById('left-nav-data-driven')
leftNavDataDriven.api.items = leftNavStructure
The data-driven left nav accepts both FontAwesome and RAUL's ui-icon format. We recommend choosing RAUL ui-icons for the left nav as this is the preferred format of the future. Please consult with the UI/UX Design Team for help selecting ui-icon equivalents.
For FontAwesome use 'icon': 'fa fa-cog'
For RAUL ui-icons us 'icon': 'icon-file-name'
In the last round of RAUL compliance a few products were granted left nav exceptions. The following link shows how to implement those exceptions using custom elements. Do not use these features if you've not been granted an exception!
Demo with various exceptions