C&C Docs
Log in

cnc-nav-vertical2

A sidebar tree built on cnc-treetable2: the rows, the expanders and the selection are the tree widget's, and this one supplies the navigation shape around them. Labels wrap rather than truncate at every depth, so a narrow sidebar stays readable.

Quick start

Give it a root tree and name the current page in active-menu. Unlike the rest of the family the rows here are REAL links, so ordinary navigation works with no handler. 

<cnc-nav-vertical2
  active-menu="deploy"
  $root='{
    "children": [
      { "id": "home", "label": "Home", "href": "/", "icon": "heroicons/home" },
      { "id": "guides", "label": "Guides", "children": [
        { "id": "deploy", "label": "Deploying to production", "href": "/guides/deploy" }
      ]}
    ]
  }'
></cnc-nav-vertical2>

Node fields

The rows are cnc-treetable2 rows, so a node takes that widget's fields plus the two this one reads.

Field Purpose
id The node's identity, matched by active-menu and carried as nodeId in the underlying tree's event.
label The text shown for the row. text is accepted as an alias.
href The destination. Rendered as a real cnc-link, so unlike the other nav widgets the click is NOT swallowed and the browser follows it.
icon An icon name shown before the label.
targets Passed to the row's cnc-link as its targets, for the link widget's own targeting behaviour.
children An array of the same shape, nested to any depth. A node with children renders as an expandable group.

Usage guidance

This is the odd one in the family: its rows are real links, so navigation works with no handler and there is no navigate event to route from. That makes it the right sidebar for ordinary page-to-page navigation, and the wrong one when clicks must be intercepted — use cnc-nav-vertical, which swallows the click and hands you the node.

Set active-menu from the current route on every page. It is what expands the ancestors of a nested item, so without it a deep sidebar opens collapsed and the user cannot see where they are.

Because the rows come from cnc-treetable2, that widget's behaviour is this widget's behaviour: expansion state, keyboard handling and row styling are documented on its page, and the expander attribute chooses the glyph — expander-position its seat.

← Back to Widgets