At a glance

TsgcHTMLComponent_Sidebar

A navigation component that emits a Bootstrap 5 vertical sidebar with an optional brand, nav-pill links, headers, dividers and a footer. Add items, then read the HTML property.

Component class

TsgcHTMLComponent_Sidebar

Renders

Bootstrap 5 sidebar markup

Family

Navigation & Structure

Languages

Delphi, C++ Builder, .NET

QuickStart

Create it, add items, render it

Set Brand and Width, push items (links, headers, dividers) into Items, then read HTML.

uses
  sgcHTML_Component_Sidebar;

var
  oSidebar: TsgcHTMLComponent_Sidebar;
begin
  oSidebar := TsgcHTMLComponent_Sidebar.Create(nil);
  try
    oSidebar.Brand := 'Dashboard';
    oSidebar.Width := '240px';
    oSidebar.Dark := True;

    with oSidebar.Items.Add do begin Text := 'Main'; Header := True; end;
    with oSidebar.Items.Add do begin Text := 'Home'; Href := '/'; Active := True; end;
    with oSidebar.Items.Add do begin Text := 'Reports'; Href := '/reports'; end;
    oSidebar.Items.Add.Divider := True;
    with oSidebar.Items.Add do begin Text := 'Settings'; Href := '/settings'; end;

    oSidebar.FooterText := 'v2.0';

    WebModule.Response := oSidebar.HTML;   // vertical <div> nav
  finally
    oSidebar.Free;
  end;
end;

// includes: sgcHTML_Component_Sidebar.hpp

TsgcHTMLComponent_Sidebar *oSidebar = new TsgcHTMLComponent_Sidebar(NULL);
try
{
  oSidebar->Brand = "Dashboard";
  oSidebar->Width = "240px";
  oSidebar->Dark = true;

  TsgcHTMLSidebarItem *oItem = oSidebar->Items->Add();
  oItem->Text = "Main"; oItem->Header = true;
  oItem = oSidebar->Items->Add(); oItem->Text = "Home"; oItem->Href = "/"; oItem->Active = true;
  oItem = oSidebar->Items->Add(); oItem->Text = "Reports"; oItem->Href = "/reports";
  oSidebar->Items->Add()->Divider = true;
  oItem = oSidebar->Items->Add(); oItem->Text = "Settings"; oItem->Href = "/settings";

  oSidebar->FooterText = "v2.0";

  String html = oSidebar->HTML;   // vertical <div> nav
}
__finally
{
  delete oSidebar;
}

using esegece.sgcWebSockets;

var sidebar = new TsgcHTMLComponent_Sidebar();
sidebar.Brand = "Dashboard";
sidebar.Width = "240px";
sidebar.Dark = true;

var item = sidebar.Items.Add();
item.Text = "Main"; item.Header = true;
item = sidebar.Items.Add(); item.Text = "Home"; item.Href = "/"; item.Active = true;
item = sidebar.Items.Add(); item.Text = "Reports"; item.Href = "/reports";
sidebar.Items.Add().Divider = true;
item = sidebar.Items.Add(); item.Text = "Settings"; item.Href = "/settings";

sidebar.FooterText = "v2.0";

string html = sidebar.HTML;   // vertical <div> nav

Reference

Key properties & methods

The members you reach for most often.

Brand

Brand sets the heading shown at the top of the panel; BrandHref is the link it points to (defaults to #).

Items

Items.Add returns a TsgcHTMLSidebarItem; set Text, Href, Icon and Active for a link, or flag Header / Divider for a section title or rule.

Theme

Dark (default True) switches between dark and light backgrounds and the matching link text color.

Layout

Width sets the panel width (defaults to 250px); Fixed pins it to the left edge; SidebarID and CSSClass set the id and extra classes.

FooterHTML injects raw markup below a divider, or FooterText renders a muted caption when no HTML is set.

Output

HTML returns the full vertical <div> navigation — serve it, or assign it to a page template's BodyContent.

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

Sidebar