At a glance

TsgcHTMLComponent_Site

One component that emits a complete document: a header with brand and switchers, a navigation menu, the main content area and a footer, wrapped in a swappable Layout template. Set the Layout, Theme and Brand, add menu and content, then read the HTML property (GetHTML in .NET).

Component class

TsgcHTMLComponent_Site

Renders

Full page shell (header + menu + content + footer)

Family

Navigation & Structure

Languages

Delphi, C++ Builder, .NET

QuickStart

Create it, build the page, render it

Pick a Layout, set the read-only Theme and Brand, call AddMenu for links and AddContent / AddSection for the body, then read HTML (GetHTML in .NET) and serve the finished page.

uses
  sgcHTML_Enums, sgcHTML_Component_Site;

var
  oSite: TsgcHTMLComponent_Site;
begin
  oSite := TsgcHTMLComponent_Site.Create(nil);
  try
    oSite.Layout := slTopNavSidebarLeft;
    oSite.Theme.Preset := stpViolet;
    oSite.Theme.Mode := stmLight;
    oSite.Brand.Text := 'Acme';

    oSite.AddMenu('Dashboard', '/', '📊').Active := True;
    oSite.AddMenu('Reports', '/reports', '📈');

    oSite.AddSection('Overview', '<p>Welcome back.</p>', 'overview');
    oSite.AddContent('<div class="alert alert-info">All systems normal</div>');
    oSite.Footer.Text := '© 2026 Acme';

    WebModule.Response := oSite.HTML;   // full page
  finally
    oSite.Free;
  end;
end;

// includes: sgcHTML_Enums.hpp, sgcHTML_Component_Site.hpp

TsgcHTMLComponent_Site *oSite = new TsgcHTMLComponent_Site(NULL);
try
{
  oSite->Layout = slTopNavSidebarLeft;
  oSite->Theme->Preset = stpViolet;
  oSite->Theme->Mode = stmLight;
  oSite->Brand->Text = "Acme";

  oSite->AddMenu("Dashboard", "/", "📊")->Active = true;
  oSite->AddMenu("Reports", "/reports", "📈");

  oSite->AddSection("Overview", "<p>Welcome back.</p>", "overview");
  oSite->AddContent("<div class=\"alert alert-info\">All systems normal</div>");
  oSite->Footer->Text = "© 2026 Acme";

  String html = oSite->HTML;   // full page
}
__finally
{
  delete oSite;
}

using esegece.sgcWebSockets;

var site = new TsgcHTMLComponent_Site();
site.Layout = TsgcHTMLSiteLayout.slTopNavSidebarLeft;
site.Theme.Preset = TsgcHTMLSiteThemePreset.stpViolet;
site.Theme.Mode = TsgcHTMLSiteThemeMode.stmLight;
site.Brand.Text = "Acme";

site.AddMenu("Dashboard", "/", "📊").Active = true;
site.AddMenu("Reports", "/reports", "📈");

site.AddSection("Overview", "<p>Welcome back.</p>", "overview");
site.AddContent("<div class=\"alert alert-info\">All systems normal</div>");
site.Footer.Text = "© 2026 Acme";

string html = site.GetHTML();   // full page

Reference

Key properties & methods

The members you reach for most often.

Layout

Layout selects the page shape: slSidebarLeft, slSidebarRight, slTopNav, slTopNavSidebarLeft, slIconRail or slOffcanvas — the same brand, menu and content re-arranged.

Theme

Theme.Preset picks the accent palette (blue, violet, emerald, slate, dark), Theme.Mode chooses light, dark or system, and Theme.SidebarDark draws the sidebar on a dark background.

Preset

Preset configures Layout and Theme together for a page type — spAdmin, spDashboard, spPortal, spDocs, spLanding or spApp — and you can still override afterwards.

AddMenu(aText, aHref, aIcon) appends a navigation entry and returns it; each item can be a link, a section Header or a Divider, and be marked Active as the current page.

The read-only Header drives the top bar: ShowThemeSwitcher, ShowLanguageSwitcher, the signed-in ShowUser box and ShowLogout link, plus ExtraHTML for your own controls.

Content & output

AddSection(aTitle, aContent, aID) and AddContent(aHTML) build the body, Footer.Text adds a centered footer, and HTML (GetHTML in .NET) returns the complete page, ready to serve.

Resources

Keep exploring

	Online HelpFull API reference and usage guide for this component.	Open
	All sgcHTML ComponentsBrowse the full feature matrix of 60+ components.	Open
	Download Free TrialThe 30-day trial ships the 60.HTML demo projects.	Open
	PricingSingle, Team and Site licenses with full source code.	Open

Site