C&C Docs
Log in

cnc-tabbar

The mobile-style bottom bar: a fixed row of icon-and-label destinations with optional badges, driven entirely by one items array. It pins itself to the bottom of the VIEWPORT, so it belongs in an application shell rather than on a page.

Quick start

Bind an array to items and a label to active. Every example on this page is framed inside a positioned container and overridden to position: relative, because a real tabbar would otherwise cover the bottom of this documentation.

Pick a destination below. In an application the bar would be fixed to the viewport bottom instead of this frame.

active: Home

<div x-data="{ current: 'Home' }">
  <cnc-tabbar
    $items="[
      { label: 'Home',   icon: 'heroicons/home' },
      { label: 'Alerts', icon: 'heroicons/bell', badge: 3 }
    ]"
    $active="current"
    @change="current = $event.detail.item.label"
  ></cnc-tabbar>
</div>

Item fields

Field Purpose
label The caption AND the item's identity: active and the change lookup both match on it. Two items sharing a label are indistinguishable to the widget, and renaming one silently clears the selection.
icon An icon name, rendered above the label. Optional, though a bar of labels alone reads poorly at this size.
badge A count on the icon. Rendered whenever the field is PRESENT, so badge: 0 shows a zero — leave the field out rather than setting it to zero when there is nothing to report.
href Wraps the item in a link. The click still updates active and emits change before the navigation happens.

Usage guidance

Put one tabbar in the application shell, never on a page. Its nav is fixed to the bottom of the viewport whatever you nest it in, so two of them stack invisibly on top of each other and one on a page follows the user everywhere until they leave it. Reserve room for it in the layout as well — being fixed, it takes no space and will otherwise cover the last of the page's content.

Three to five destinations is the working range: they divide the width evenly, so a sixth makes every label too narrow to read on a phone. Use it for the top level of an application's navigation — cnc-nav-mobile suits a drawer of many destinations, and the tab widgets suit switching views WITHIN one screen.

Keep labels short and unique. A label is the item's identity here, so two that match are indistinguishable and changing one drops the selection.

← Back to Widgets