# Sgcwebsockets HTML Layout
> sgcHTML Layout and Navigation
- Skill: `esegece-com/sgcwebsockets-html-layout` (Agent Skill, multi-file: 63 files)
- Install (CLI): `npx skillmds@latest add esegece-com/sgcwebsockets-html-layout`
- Raw SKILL.md: https://api.skillmd.com/api/skills/esegece-com/sgcwebsockets-html-layout/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: esegece-com (https://skillmd.com/u/esegece-com)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/esegece-com/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
| Group | Components |
| --- | --- |
| Page chrome | `_NavBar`, `_Sidebar`, `_Toolbar` |
| Sectioning | `_Tabs`, `_Accordion`, `_Stepper`, `_Panel`, `_Splitter` |
| Navigation | `_Breadcrumb`, `_Pagination`, `_ListGroup` |
| Actions | `_ButtonGroup`, `_Dropdown`, `_ContextMenu` |
| Overlay | `_Offcanvas` |
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:
```pascal
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/.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/.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/.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.