C&C Docs
Log in

cnc-nav-mobile

The hamburger menu: a button that opens a full list in place, with groups expanding inline rather than in a dropdown. One root tree, like the rest of the family.

Quick start

Give it a root tree and handle itemclick. Press the hamburger to open; a click outside closes it again.

nothing clicked yet

<cnc-nav-mobile
  active-id="widgets"
  @itemclick="router.go($event.detail.item.href)"
  $root="{
    'id': 'root',
    'children': [
      {'id':'home','label':'Home','href':'/'},
      {'id':'products','label':'Products','children':[
        {'id':'widgets','label':'Widgets','href':'/products/widgets'}
      ]}
    ]
  }"
></cnc-nav-mobile>

Node fields

Every item in the tree, at any depth, takes the same fields.

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.
icon An icon name shown before the label.

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.

The menu opens IN PLACE rather than over the page, so it pushes what follows it down. That is right at the top of a small-screen layout and wrong in the middle of one; put it in the header and let it expand downwards. Reach for cnc-drawer when the menu should slide over the content instead, and cnc-nav-mobile-drop when the tree is deep enough that expanding it inline gets long.

Groups emit itemclick too, so branch on item.href rather than routing on every event — otherwise opening a section navigates.

Bind $open if anything else needs to know the menu is showing — dimming the page behind it, or closing it yourself once a route has changed, which the widget does not do on its own.

← Back to Widgets