Page-explorer: adding page navigation easily to your website

Undraw My Documents

ComboStrap UI - Page Explorer

About

A page-explorer is a navigational component that creates a navigation bar 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.

Example

Default List

A default page-explorer list pane can be asked with this minimal markup (the width options is cosmetic and can be deleted)

By default, the list will show the pages of the namespace from the requested page.

<page-explorer 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 cosmetic and can be deleted, it permits to show two levels)
<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"/> ... ${h1 | cut("-","2-") | trim()} ]]</parent>
    <page>[[$path|<icon name="file"/> ${h1 | cut("-","2-") | trim()} ]]</page>
</page-explorer>

where the page template is composed of:

Custom Collapsible Tree

Example:

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

where the page template is composed of:

It produces:

Syntax and Templates

Syntax

<page-explorer type ns="namespacePath">
  <page>template</page>
  <namespace>template</namespace>
  <index>template</index>
  <parent>template</parent>
</page-explorer>

where:

Attribute Default Possible Values Description
type list list or tree It defines the layout
ns the rendered page for a list
the physical page for a tree
It defines the namespace that should be rendered

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

Templates

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

  • page defines a for each page in the namespace
  • index defines a fragment for the index page of the namespace
  • namespace defines a fragment for each child namespace of the actual namespace
  • parent defines a fragment for the index page of the parent namespace of the actual namespace (used only in the list layout)

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

Page Explorer List Name To Ui Region

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

Page Explorer Tree Name To Ui Region

If a sub-element (index, 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
[[$path|$name]]
  • 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 -->
$name</pipeline>
  • 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

Support

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




Showcase yourself and your brand

Get free news, tips, and tricks
to create a remarkable experience for your readers.




Recommended Pages
Cache
Automatic Slot Cache Management

Thanks to the automatic slot cache management, the secondary slots cache is managed automatically and are re-rendered in the background
Undraw My Documents
ComboStrap Quality - Hidden Page

A hidden resource (page, image, file, ...) is a resource that is: not published to search:engineSearch Engine (ie not included in the sitemap and not pinged) not visible in any listing. ie not: ...
Layout Element
Page Side or Sidebar Layout Element

The page side or sidebar is a layout element that is located along the side of the main area (ie content with header and footer). In this area, you will find generally navigational component such...
Undraw My Documents
The ComboStrap Documentation

This section regroups all documentation of ComboStrap in one place.
Undraw My Documents
What are the Navigational components in Combostrap?

How to improve the navigation of your website with the navigational components



Task Runner