C&C Docs
Log in

cnc-nav-horizontal2

A horizontal bar whose top-level items reveal their children in a PANEL below the bar rather than in a dropdown, so a whole level is visible at once. The only nav widget whose rows you can render yourself, through per-level templates.

Quick start

Give it a root tree and handle navigate. Hovering a top-level item previews its panel; active-id decides which panel is showing the rest of the time.

nothing clicked yet

<cnc-nav-horizontal2
  active-id="sale"
  @navigate="router.go($event.detail.href)"
  $root='{
    "id": "root",
    "children": [
      { "id": "shop", "label": "Shop", "href": "#", "children": [
        { "id": "sale", "label": "Sale", "href": "/shop/sale" }
      ]}
    ]
  }'
></cnc-nav-horizontal2>

Node fields

Every item in the tree takes the same four fields. A top-level item is a panel; its children fill that panel.

Field Purpose
id The node's identity. Used by active-id and carried in the events, so it must be unique across the whole tree rather than among its siblings.
label The text shown for the item.
children An array of the same shape, nested to any depth. A node WITH children is a group; a node without is a destination.
href The destination. Note that the widget calls preventDefault() on it and emits its event instead, so this is data for your handler rather than a working link.

Usage guidance

Navigation is the HOST's job. Every one of these widgets swallows the click on an href and emits an event carrying it instead of letting the browser follow the link, so a nav with no handler renders correctly and goes nowhere. Route from the event.

Reach for this over cnc-nav-horizontal when a section has many children and they should be seen together — a shop, a documentation set, a product range. The panel shows a whole level at once instead of a column the pointer has to steer down, which is what makes it the better mega-menu; the dropdown variant stays better for a short list per section.

The per-level <template data-level> mechanism is what to use when panel rows need more than a label — a thumbnail, a price, a description. Bind with :attr="key" and x-text="key" against the node's own fields, and give a group row a [data-nav-items] child to say where its grandchildren go. Without that marker a group renders with nothing under it.

Set active-id from the route rather than active-panel-id. The first both highlights the link and opens the right panel; the second only pins a panel, and pinning one the user is not inside makes the bar disagree with the page.

← Back to Widgets