Vue - Navigation Tree
Last modified by Pierre Jeanjean on 2026/01/21 10:40
This component displays the navigation tree of the current wiki. The currently visited page should always be the selected node of the tree, and loading children is done lazily when nodes are opened.
- sources: https://github.com/xwiki-contrib/cristal/blob/main/core/navigation-tree/navigation-tree-ui/src/vue/NavigationTree.vue
- since: 1.0.0-rc-1
Usage
<script lang="ts" setup">
import { NavigationTree } from "@xwiki/cristal-navigation-tree-ui";
</script>
<template>
<navigation-tree include-terminals></navigation-tree>
</template>Visual results
Vuetify
Shoelace
Props
| Name | Since | Type | Mandatory | Default value | Comment |
|---|---|---|---|---|---|
| includeTerminals | 1.0.0-rc-1 | boolean | no | false | Whether to include terminal pages. |
| showRootNode | 1.0.0-rc-1 | boolean | no | false | Whether to display the root node. If false, the second hierarchy level will be flattened and displayed as the root nodes. |
| nodeClickAction | 1.0.0-rc-1 | (node: NavigationTreeNode) => Promise<void> | no | undefined | An optional click action that replaces the default action of clicking the URL in a node. |
This project is being financed by the French State as part of the France 2030 program
Ce projet est financé par l’État Français dans le cadre de France 2030
