One Component, a Whole Web Page: Introducing TsgcHTMLComponent_Site

6 July 2026 · Components

sgcHTML already gives Delphi, C++ Builder and .NET developers 60+ server-side components that render Bootstrap 5 markup — grids, charts, forms, chat, everything you drop into a page. But there was still one thing you assembled by hand on every project: the page itself. The top bar. The side menu. The footer. The bit that frames every screen. Today that boilerplate gets its own component.

TsgcHTMLComponent_Site builds an entire web page — header, navigation menu, main content and footer — from a single component. You set a brand, add a few menu items, drop in your content, and read the HTML property. And because the whole layout is driven by one Layout property, you can switch between six different page arrangements by changing a single line.

The shell was the boilerplate

Look at any real web application and most of the pixels are chrome: a header with a logo and a user menu, a sidebar of navigation links, a content area, a footer. That chrome is the same on every page, and until now every sgcHTML project re-created it — hand-written HTML strings for the navbar, a TsgcHTMLComponent_Sidebar positioned with custom CSS, a footer glued on at the end. It worked, but it was the part nobody wanted to write twice.

TsgcHTMLComponent_Site is that shell as a first-class component. It composes the existing TsgcHTMLComponent_NavBar and TsgcHTMLComponent_Sidebar, wraps them in the Bootstrap template, and exposes the whole thing through a handful of properties. Here is a complete page:

uses
  sgcHTML_Component_Site;

var
  oSite: TsgcHTMLComponent_Site;
begin
  oSite := TsgcHTMLComponent_Site.Create(nil);
  try
    oSite.Title       := 'Acme Admin';
    oSite.Layout      := slTopNavSidebarLeft;
    oSite.Theme.Preset := stpBlue;

    oSite.Brand.Text  := 'Acme';
    oSite.Brand.Href  := '/';

    // one menu drives the sidebar (and the mobile off-canvas)
    oSite.AddMenu('Dashboard', '/',          'bi-speedometer2').Active := True;
    oSite.AddMenu('Customers', '/customers',  'bi-people');
    oSite.AddMenu('Invoices',  '/invoices',   'bi-receipt');

    oSite.AddContent('<h1 class="h3">Welcome back</h1>');
    oSite.Footer.Text := '(c) 2026 Acme';

    Response := oSite.HTML;   // a complete <!DOCTYPE html> page
  finally
    oSite.Free;
  end;
end;

That is the whole page: a top navbar with the brand, a left sidebar built from the menu, your content in the middle, a footer at the bottom, Bootstrap 5 loaded, responsive on mobile.

Six layouts, one property

The reason to make the shell a component is that the shell is exactly the thing you want to restyle without touching your content. Set Layout and the same brand, menu and content rearrange into a completely different page:

slTopNavSidebarLeft — the classic admin layout: top bar plus a fixed left sidebar.
slSidebarLeft / slSidebarRight — a docs- or app-style sidebar with no top bar, on either side.
slTopNav — a marketing / portal layout: top navigation, centered content, no sidebar.
slIconRail — a compact dashboard with a narrow icon-only rail.
slOffcanvas — mobile-first: the menu hides behind a hamburger and slides in.

Change one line — oSite.Layout := slIconRail; — and the header, menu and content reflow. Nothing else in your code changes.

Presets and themes

If you would rather pick a look than wire up individual settings, the Preset property bundles a layout and a theme in one assignment — spAdmin, spDashboard, spPortal, spDocs, spLanding or spApp. For finer control, the Theme sub-object carries a colour preset (stpBlue, stpViolet, stpEmerald, stpSlate, stpDark), a Mode of light, dark or system, and an optional custom primary colour.

oSite.Preset      := spDashboard;   // icon rail + violet + dark
oSite.Theme.Mode  := stmSystem;     // follow the OS colour scheme
oSite.Theme.Primary := '#0057B8';   // or override the accent directly

Batteries included

The header carries the pieces every application re-implements. Turn them on with a flag and the component emits the markup, the CSS and the small amount of JavaScript:

a responsive sidebar that collapses to an off-canvas menu on small screens, automatically;
Header.ShowThemeSwitcher and Header.ShowLanguageSwitcher dropdowns;
a Header.ShowUser avatar with the user name, and a Header.ShowLogout control;
a single Menu collection that feeds both the sidebar and the mobile menu, so navigation is defined once.

The content area is still pure sgcHTML: AddContent takes any markup, and AddSection wraps a titled card — so any of the other 60+ components (a grid, a chart, a form) drops straight into the page.

Delphi, C++ Builder and .NET

Like the rest of sgcHTML, the component ships with an identical API in all three languages. The Delphi and C++ Builder versions read the inherited HTML property; the .NET version exposes GetHTML(). The rendered page is byte-for-byte the same. Bootstrap is loaded from a CDN by default, so there is nothing extra to deploy.

Getting it

TsgcHTMLComponent_Site is part of sgcHTML and installs on the component palette with its own icon. See the component page for the full walkthrough, the feature matrix for the complete component list, and the online help for the full reference. You can try everything with the free trial.

Questions, feedback or ideas for another layout template? Get in touch — you will get a reply from the people who wrote the code.