Sgcwebsockets HTML Layout

sgcHTML Layout and Navigation

Fifteen widgets that give a page its structure and its navigation: the bars and rails around the content, the containers that group it, and the controls that move between views.

Read sgcwebsockets-html-core first for the page builder and the edition gate. sgcHTML is All-Access only, needs Indy, and is absent on Android and iOS.

When to use this skill

• Put a navbar across the top, or a sidebar down the side
• Split content into tabs, an accordion or a stepper
• Show where the user is with a breadcrumb, or move between pages with a pager
• Group content into a panel or a list group
• Slide something in from the edge with an offcanvas
• Add a toolbar, a button group, a dropdown or a right-click context menu
• Divide a region with a draggable splitter

Components in this skill

All are prefixed TsgcHTMLComponent_.

The shape these share

Layout widgets are configured by property and by an items collection rather than built with methods. A navbar is representative:

FNav := TsgcHTMLComponent_NavBar.Create(Self);
FNav.PageBuilder := FPage;
FNav.Brand := 'My App';
FNav.BrandHref := '/';
FNav.Fluid := True;
// FNav.Items is a collection; add entries to it for the links

Items is a collection you populate, and its item type is documented under reference/types/. Theme and Expand control the colour scheme and the width at which the bar collapses to a hamburger.

They also carry the same shared surface as every other sgcHTML widget: PageBuilder, Section, ColumnWidth, ElementID, CSSClass, Style, ComponentVisible and a read-only HTML. sgcwebsockets-html-forms documents that surface in full, including the two traps: the label property is Label_ with a trailing underscore, and OnClick is a string of JavaScript rather than a Delphi event.

Before you start, ask the developer

Use a structured question tool if your host has one, for example Claude Code's AskUserQuestion. Otherwise ask in chat:

1. Is there a shell already? TsgcHTMLDashboardLayout and TsgcHTMLComponent_Site in sgcwebsockets-html-core provide a whole page shell. Adding a navbar and sidebar by hand on top of one duplicates it.
2. How should it behave on a phone? Expand decides when a navbar collapses, and an offcanvas is usually the right sidebar on a small screen.
3. Tabs or accordion or stepper? All three divide content. Tabs are parallel, an accordion is collapsible detail, a stepper implies order and progress. Picking by look rather than by meaning ages badly.
4. Do navigation items reload the page or swap a fragment? With HTMX they swap. Without it, each item is a normal link and a full request.

Things that catch people out

• Layout widgets still need PageBuilder assigned. Nothing renders without it.
• A navbar and a sidebar are separate components. The page builder has GetNavBarHTML and GetSidebarHTML for rendering those regions on their own, which is what you use when HTMX is swapping one part of the page.
• Expand is a breakpoint, not a boolean. Setting it wrong gives a navbar that collapses on a desktop or never collapses on a phone.
• Tabs, accordions and offcanvas panels need stable ids. If you generate ids dynamically and they change between renders, the browser loses which panel was open.
• A context menu is a browser-level right-click replacement. It will not appear in a browser configured to block that, so do not put anything essential behind it alone.
• Pagination renders the control, it does not page the data. The paging itself is on the data widget or your query, and _DataTable in sgcwebsockets-html-data already has its own.

Routing

• Find a component: reference/components-index.md lists every component, its unit, and its edition, grouped by Reg module.
• Uses clause: add the component's unit: value (shown on its API page) to your uses clause. Nothing compiles without it.
• API detail: reference/api/<Component>.md has the Properties, Events and Methods, each in both Delphi and C++Builder form.
• Option / enum / event types: property and event types link to reference/types/<TypeName>.md, which documents the sub-properties of option classes, the values of enums, and the parameter list of event handlers.
• Examples: examples/index.md is the full demo catalog; examples/<Component>.md is a focused, real usage snippet for the most-used components.
• Concepts: concepts/overview.md (getting started + uses-clause rule) and concepts/editions-and-features.md (which components your edition includes).
• Bundled resources: concepts/resources.md lists the browser-side assets (JavaScript, HTML, CSS) the server components serve or embed, so a browser client works without an external CDN.
• Version history: reference/history.md lists what changed in each sgcWebSockets release.

Editions

Components are gated by edition (Professional, Enterprise, All-Access) or by a feature define. Check the edition column in the components index, or concepts/editions-and-features.md, before relying on a component.

Only public and published members are documented. Method bodies, private fields and protected members are intentionally not included.