- Added iconPlace value to config to determine location of group/link icons. It can be 'start' or 'end'.
- Link and group icons have ahref attribute.
- Create an unordered list as example. Make sure all list items have its own id. If you want to create searchable nav-tree, you have to add data-value attribute to the list items.
<ul id="arbitrary_id" class="arbitrary_class">
<li id="li0" data-value="li0">
<a href="#">extra list</a>
</li>
<li id="li1" data-value="li1">
<a href="#">
Link 1
</a>
</li>
<li id="li2" data-value="li2">
<span><i class="fas fa-chevron-left"></i></span>
<a>
Collapse 1
</a>
<span>t</span>
<ul>
<li id="li4" data-value="li4">
<a>
Collapse 2
</a>
<ul>
<li id="li6" data-value="li6">
<a href="#">
Link 2
</a>
</li>
<li id="li7" data-value="li7">
<a href="#">
Link 3
</a>
</li>
<li id="li8" data-value="li8">
<a>
Collapse 3
</a>
<ul>
<li id="li9" data-value="li9">
<a href="#">
Link 4
</a>
</li>
<li id="li10" data-value="li10">
<a href="#">
Link 5
</a>
</li>
</ul>
</li>
</ul>
</li>
<li id="li5" data-value="li5">
<a href="#">
Link 6
</a>
</li>
</ul>
</li>
</ul>- There are multiple ways to create NavTree.
NavTree.createBySelector("#nav-tree", {
searchable: true,
showEmptyGroups: true,
groupOpenIconClass: "fas",
groupOpenIcon: "fa-chevron-down",
groupCloseIconClass: "fas",
groupCloseIcon: "fa-chevron-right",
linkIconClass: "fas",
linkIcon: "fa-link",
searchPlaceholderText: "Search",
});new NavTree(document.querySelector('#arbitrary_id'), {
searchable: true,
showEmptyGroups: true,
groupOpenIconClass: "fas",
groupOpenIcon: "fa-chevron-down",
groupCloseIconClass: "fas",
groupCloseIcon: "fa-chevron-right",
linkIconClass: "fas",
linkIcon: "fa-link",
searchPlaceholderText: "Search",
});NavTree.getOrCreateInstance(document.querySelector('#arbitrary_id'), {
searchable: true,
showEmptyGroups: true,
groupOpenIconClass: "fas",
groupOpenIcon: "fa-chevron-down",
groupCloseIconClass: "fas",
groupCloseIcon: "fa-chevron-right",
linkIconClass: "fas",
linkIcon: "fa-link",
searchPlaceholderText: "Search",
});You can access the NavTree instance by using the getOrCreateInstance function in the example above. If an instance has not been created before, it will give you a new instance.
- Using data-icon attribute, you can set special icon to the links.
<li data-icon="fas fa-cloud" id="li0" data-value="li0">
<a href="#">extra list</a>
</li>- If you want to add some special things to the list, you can add them as prefix or suffix. Just wrap them with span and put them before or after than 'a' element.
<li data-icon="fas fa-cloud" id="li0" data-value="li0">
<span><a href="#">1</a></span>
<span><i class="fas fa-plane"></i></span>
<a href="#">extra list</a>
<span><a href="#">1</a></span>
<span><i class="fas fa-plane text-danger"></i></span>
</li>- Done! You can experience it using the example in the example folder.
navtree_instance.update(html_string)
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent