C&C Docs
Log in

cnc-nav-mobile-drop

The drill-down menu: a hamburger whose groups REPLACE the list rather than expanding it, with a generated Back row to climb out. Suits a deep tree on a small screen, where expanding inline would run off the bottom.

Quick start

Give it a root tree and handle itemclick. Open the menu, then choose a group: the list is replaced by that group's children with a Back row above them.

nothing clicked yet

<cnc-nav-mobile-drop
  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-drop>

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. It is suppressed on the generated Back row, which carries its own affordance.

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.

Choose between this and cnc-nav-mobile by DEPTH. Expanding inline keeps everything visible and works well two levels down; drilling in shows one level at a time and stays short however deep the tree goes, at the cost of the user losing sight of where they are. A shallow tree does not need the trade.

A group whose own entry has a destination cannot reach it here — clicking the row descends into its children. Where a section is also a page, repeat it as the first child (an "Overview" row) rather than relying on the group row.

The Back row is generated for you, so do not add one to the tree. It takes a synthesised id, which is another reason to branch on item.href in the handler rather than on ids you expect to recognise.

← Back to Widgets