ComboStrap UI - Page Explorer


A page-explorer is a navigational component that creates a navigation pane in the form of:

  • a list
  • or a collapsible tree (ie clickable levels of folder hierarchy)

This component is mostly used in a side slot or sidekick slot


Default List

A default page-explorer list pane can be asked with this minimal markup (the ns (namespace) and width options are just cosmetic and could be deleted)

<page-explorer ns=":release" width="300px"></page-explorer>

and will look like this where the label for each page is the page name

Default Tree

A page-explorer tree does not need any template definition.

  • with a minimal markup (The ns option is a cosmetic and can be deleted)
<page-explorer tree ns=":docs:layout"></page-explorer>
  • a page-explorer tree will look like this:

Custom List

<page-explorer color="blue" height="250px" width="400" scroll="toggle">
    <parent>[[$path|<icon name="arrow-left-box"/> ... <pipeline>"$h1" | cut("-","2-") | trim()</pipeline>]]</parent>
    <page>[[$path|<icon name="file"/> <pipeline>"$h1" | cut("-","2-") | trim()</pipeline>]]</page>

where the page template is composed of:

Custom Collapsible Tree


<page-explorer tree ns=":docs:layout">
    <home>[[$path|<icon name="home" color="#0000004d" width="20"/> Overview]]</home>
    <ns><pipeline>"$h1" | cut("-","2-") | trim() </pipeline></ns>
    <page>[[$path|<icon name="file" color="#0000004d" width="20"/>  <pipeline>"$h1" | cut("-","2-") | trim() </pipeline>]]</page>

where the page template is composed of:

It produces:


<page-explorer type ns="namespacePath">


  • the attributes are:
    • type that defines the layout and may be one of this two value:
      • list to create a list navigation pane (the default)
      • tree to create a tree navigation pane
    • ns that defines the namespace. The default value is the namespace of:
      • the rendered page for a list
      • the physical page for a tree.
  • the sub-elements page,namespace, home and parent define templates for each page-explorer node.

page-explorer, home, page, parent and namespace are all superset HTML component.


The templates define the output of each node in the list or tree layout:

The below image shows you the mapping between the tag and their location in a list layout.

The below image shows you the mapping between the tag and their location in a tree layout.

If a sub-element (home, parent, namespace) is defined without any template (ie empty content), they are not shown.

Default template

  • if the page tag is is not defined, the below default page template is used
  • if the namespace tag is not defined, a default namespace template is used
<!-- For a list -->
[[$path|<icon name="mdi:folder"/> $name]]
<!-- For a tree -->
  • if the parent tag is not defined, a default parent template is used
[[$path|<icon name="icons8:level-up"/> $name]]
  • if the home tag is is not defined, the page template is used


Performance consideration with the tree pane

The page-explorer tree is recreated when:

If your tree has a lot of pages, it may seems slow:

  • while editing
  • or for the first viewer
Powered by ComboStrap