Canvas Docs

Nav Tree

An indented multi-level link tree: the navigation list a side panel or documentation sidebar uses. It is shown in the block inserter as Canvas Nav Tree and registered as canvas-core/nav-tree.

Select the block on a page and its own settings open in the sidebar, in the panels below:

The Nav Tree settings in the block editor sidebar

Settings

Each setting is named exactly as the block editor names it, followed by what it does and what it starts as. Where a setting carries a Shown when line, it stays hidden until that condition is met, which is the usual reason a setting looks missing from the sidebar:

Content

  • Links FromDefaultThis Block

    A WordPress menu keeps the tree in step with the site structure; this block's own list is for a fixed set of links.

    ChoicesThis BlockA WordPress Menu

  • MenuDefaultEmpty

    Which of your saved menus this tree is built from, so it follows whatever you change in Appearance then Menus.

    Choices- Select a Menu - (empty)Canvas Main MenuHeaders DirectoryHeaders Ecommerce MinimalHeaders Floating SemiHeaders SaaS PrimaryHeaders SaaS SecondaryHeaders ShopHeaders Split LeftHeaders Split RightMega Menu Demo | Full WidthMega Menu Demo | Side Taband 2 moreShown when Links From is "A WordPress Menu"

  • LinksDefaultEmpty

    Level decides the nesting: a Level 2 row becomes a child of the Level 1 row above it.

    Shown when Links From is "This Block"

    Each row of Links takes:

    • LabelDefaultEmpty

      Wording of this row.

    • URLDefault#

      Address this row opens.

    • IconDefaultEmpty

      Shown before the label. Top-level rows normally carry one.

    • LevelDefaultLevel 1

      How deep this row sits. A Level 2 row is nested under the Level 1 row above it, which is how you build the tree.

      ChoicesLevel 1Level 2Level 3

Style

  • Extra ClassesDefaultEmpty

    Added to the element beside the nav-tree class.

Settings

  • Accessible LabelDefaultEmpty

    Names this navigation landmark for screen readers when the page carries more than one.

Every Canvas block also carries the Animation, Scroll Effects and Advanced panels, which are described in Controls every Canvas block has.

Other blocks in Content: Background Video / Audio, Cascading Images, Charts, Circle Stack, Clients, Data Tables.

Was this page helpful?