A bootstrap 5 plugin to create vertical and nested navigation which support collapsing and searching.

  • By Hasan Akalp
  • Last update: Oct 22, 2022
  • Comments: 5

BS5-Nav-Tree

NOTE: ALL OLD VERSIONS ARE DEPRECATED. PLEASE USE v0.3.

NOTE 2: THIS PROJECT IS OPEN FOR CONTRIBUTION. PLEASE FEEL FREE FOR PULL REQUEST.

How to use bs5-nav-tree v0.3

  1. 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.
  • extra list
  • Link 1
  • Collapse 1 t
    • "> 
    <ul id="arbitrary_id" class="arbitrary_class">
  <li id="li0" data-value="li0">
    <a href="#">extra lista>
  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>tspan> <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>
    1. 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.

    1. Using data-icon attribute, you can set special icon to the links.
    extra list "> 
    <li data-icon="fas fa-cloud" id="li0" data-value="li0">
  <a href="#">extra lista>
li>
    1. 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.
    1 extra list 1 "> 
    <li data-icon="fas fa-cloud" id="li0" data-value="li0">
  <span><a href="#">1a>span>
  <span><i class="fas fa-plane">i>span>
  <a href="#">extra lista>
  <span><a href="#">1a>span> <span><i class="fas fa-plane text-danger">i>span> li>
    1. Done! You can experience it using the example in the example folder.

    Update the tree

    navtree_instance.update(html_string)

    Github

    https://github.com/akalp/bs5-nav-tree

    Comments(5)

    • 1

      Less issue more compliment

      This is a great piece of work. Thank you. I wanted to move the icons from left to the right so changed line 100 to append to the end li_container.appendChild(icon_container)

      Be nice to have in config:) Also be good to have the icons linked too

    • 2

      Icons links do not receive a href attribute value

      The icons generated do not receive the ahref value Then when you click on the arrow nothing happens - or in my case in an offcanvas menu the menu closes and goes nowhere

    • 3

      JS Error

      Tried everything, but did not get this error:

      tree.js:73 Uncaught DOMException: Failed to execute 'replaceChild' on 'Node': The node to be replaced is not a child of this node. at http://127.0.0.1:8000/static/js/tree.js:73:12 at NodeList.forEach () at init (http://127.0.0.1:8000/static/js/tree.js:49:48) at new NavTree (http://127.0.0.1:8000/static/js/tree.js:156:3) at HTMLDocument. (http://127.0.0.1:8000/women-rights-america/:4769:20)

    • 4

      Collapse does not close

      Issue by mistake. I spend hours getting this working from the readme.md, but the collapse stays open. just tried your example code and now it works. Sorry for creating an issue which isn't one. Can't delete it.

    • 5

      Active classes not added dynamically to text or icons

      Lastest version config NavTree.createBySelector("#nav-tree", { searchable: false, showEmptyGroups: false,

      groupOpenIconClass: "bi",
groupOpenIcon: "bi-chevron-down",

groupCloseIconClass: "bi",
groupCloseIcon: "bi-chevron-right",

linkIconClass: "",
linkIcon: "",

searchPlaceholderText: "Search",
iconPlace: "end"

      });

      line 134 a.addEventListener("click", () => { this.element .querySelectorAll("li") .forEach((li) => li.classList.remove("active")); a.closest("li").classList.add("active"); });

      It appears no active links are added to the node. It would be good to be able to target styles for parent links to highlight the parent and icon color

    Popular Tag

    Related