Pict-Section-TabBar

A compact, host-agnostic tab-bar control for Pict applications and anything else that renders HTML. It draws one small, professional tab strip -- underline-active tabs with optional FontAwesome icons, submenu groups, pin zones, and configurable overflow -- as a pure string-builder plus a tiny browser runtime, with no framework dependency.

It is intentionally not a pict-view. A tab host may be a pict view or a plain provider, so the module exports cheap, host-agnostic pieces you compose into whichever host you have.

Installation

npm i pict-section-tabbar

Quick Start

const libTabBar = require('pict-section-tabbar');

// 1. Describe the tabs. A def is a LEAF (Key/Label/Icon) or a GROUP (adds Children[]).
const tabs =
[
    { Key: 'overview', Label: 'Overview', Icon: 'fas fa-circle-info' },
    { Key: 'features', Label: 'Features', Icon: 'fas fa-star' },
    { Key: 'data', Label: 'Data', Icon: 'fas fa-database', Children:
        [
            { Key: 'records', Label: 'Records', Icon: 'fas fa-table' },
            { Key: 'charts', Label: 'Charts', Icon: 'fas fa-chart-column' },
        ] },
];

// 2. Render the whole bar as an HTML string. onClick returns the JS for a leaf/child click.
const html = libTabBar.renderTabsHTML(tabs, 'overview',
    (pTab) => `selectTab('${ pTab.Key }')`,
    { overflow: 'menu', display: 'both' });

// 3. Inject the CSS once, drop the HTML into a container, then bind the runtime.
document.head.insertAdjacentHTML('beforeend', `<style>${ libTabBar.TABBAR_CSS }</style>`);
document.getElementById('nav').innerHTML = html;
libTabBar.layout(document);

Icons are FontAwesome class strings (for example fas fa-database); the host page must load FontAwesome for them to appear. Every color in the CSS is a --theme-color-* custom property with a sensible fallback, so the bar inherits your theme tokens automatically.

Features

• Leaf and group tabs -- a leaf navigates on click; a group renders a dropdown submenu, and when a child is active the group tab reads active and shows a "Group -> Child" breadcrumb.
• Pin zones -- any top-level def may carry Pin: 'left' | 'center' | 'right' to park it in a zone of the bar.
• Overflow strategies -- menu collapses overflowing tabs into a "More" dropdown, wrap flows onto more rows, scroll scrolls the row horizontally (the default).
• Display modes -- icon plus label (default), icon only, or text only.
• Two host paths -- a pict-view template path (TABBAR_CSS + TABBAR_TEMPLATES + buildTabs()) and a plain string path (renderTabsHTML()).
• Tiny runtime -- layout() binds the dropdown behavior and, for the menu strategy, moves overflowing tabs into "More".

Documentation

• Getting Started -- install and a first bar on both host paths
• Concepts -- leaves vs groups, pins, overflow strategies, and the two integration models
• Integration -- step-by-step for a pict view and for a plain string host
• buildTabs
• renderTabsHTML
• containerClass
• layout
• Templates & CSS

Ecosystem

Pict-Section-TabBar is part of the Retold module suite:

• pict -- Core MVC application framework
• pict-view -- View base class
• pict-section-form -- Configuration-driven form sections
• pict-section-modal -- Dialogs, toasts, and tooltips

License

MIT

Example Applications