Context navigation component#
A contextual navigation component is available in Volto, but it needs to be
integrated with your own website. To use it, customize any appropriate Volto
theme component (for example App.jsx
or DefaultView.jsx
) and insert the
ContextNavigation component:
import ContextNavigation from '@plone/volto/components/theme/Navigation/ContextNavigation'
// and insert it like:
<ContextNavigation params={{includeTop: true}} />
// or:
<ContextNavigation params={{ currentFolderOnly: true }} />
By default it uses the current location path to fetch the portlet listing, but you can compute and pass a custom path like:
<ContextNavigation pathname="/my-section" params={{ currentFolderOnly: true }} />
As parameters you can use:
name
: The title of the navigation tree.root_path
: Root Node.js path, can be "frontend path", derived from routerincludeTop
: Bool, Include top nodeschemacurrentFolderOnly
: Bool, Only show the contents of the current folder.topLevel
: Int, Start levelbottomLevel
: Int, Navigation tree depthno_icons
: Bool, Suppress Iconsthumb_scale
: String, Override thumb scaleno_thumbs
: Bool, Suppress thumbs
Notice the similarity to the classic Plone navigation portlet, as the plone.restapi
implementation is based on that original code.