At a glance

TsgcHTMLComponent_NavBar

A navigation component that emits a Bootstrap 5 <nav class="navbar"> with a brand, a responsive toggler and a collapsible list of links. Set the brand, add items, then read the HTML property.

Component class

TsgcHTMLComponent_NavBar

Renders

Bootstrap 5 navbar markup

Family

Navigation & Structure

Languages

Delphi, C++ Builder, .NET

QuickStart

Create it, add links, render it

Set Brand, push one or more items into Items, then read HTML (or drop it into a TsgcHTMLTemplate_Bootstrap page).

uses
  sgcHTML_Component_NavBar;

var
  oNavBar: TsgcHTMLComponent_NavBar;
begin
  oNavBar := TsgcHTMLComponent_NavBar.Create(nil);
  try
    oNavBar.Brand := 'Acme Inc.';
    oNavBar.BrandHref := '/';
    oNavBar.Theme := ntDark;
    oNavBar.Expand := neLarge;

    with oNavBar.Items.Add do begin Text := 'Home'; Href := '/'; Active := True; end;
    with oNavBar.Items.Add do begin Text := 'Products'; Href := '/products'; end;
    with oNavBar.Items.Add do begin Text := 'Contact'; Href := '/contact'; end;

    WebModule.Response := oNavBar.HTML;   // <nav class="navbar"> ...
  finally
    oNavBar.Free;
  end;
end;

// includes: sgcHTML_Component_NavBar.hpp

TsgcHTMLComponent_NavBar *oNavBar = new TsgcHTMLComponent_NavBar(NULL);
try
{
  oNavBar->Brand = "Acme Inc.";
  oNavBar->BrandHref = "/";
  oNavBar->Theme = ntDark;
  oNavBar->Expand = neLarge;

  TsgcHTMLNavItem *oItem = oNavBar->Items->Add();
  oItem->Text = "Home"; oItem->Href = "/"; oItem->Active = true;
  oItem = oNavBar->Items->Add(); oItem->Text = "Products"; oItem->Href = "/products";
  oItem = oNavBar->Items->Add(); oItem->Text = "Contact"; oItem->Href = "/contact";

  String html = oNavBar->HTML;   // <nav class="navbar"> ...
}
__finally
{
  delete oNavBar;
}

using esegece.sgcWebSockets;

var navbar = new TsgcHTMLComponent_NavBar();
navbar.Brand = "Acme Inc.";
navbar.BrandHref = "/";
navbar.Theme = TsgcHTMLNavBarTheme.ntDark;
navbar.Expand = TsgcHTMLNavBarExpand.neLarge;

var item = navbar.Items.Add();
item.Text = "Home"; item.Href = "/"; item.Active = true;
item = navbar.Items.Add(); item.Text = "Products"; item.Href = "/products";
item = navbar.Items.Add(); item.Text = "Contact"; item.Href = "/contact";

string html = navbar.HTML;   // <nav class="navbar"> ...

Reference

Key properties & methods

The members you reach for most often.

Brand

Brand sets the brand text shown at the left; BrandHref is the link it points to (defaults to #).

Links

Items.Add returns a TsgcHTMLNavItem; set its Text, Href, Active and Disabled to build the collapsible link list.

Theme

Theme picks ntDark (default) or ntLight, mapping to the Bootstrap dark/light navbar background.

Responsive breakpoint

Expand chooses when the toggler collapses: neSmall, neMedium, neLarge (default), neXLarge or neAlways.

Layout

Fluid toggles container-fluid vs container; NavBarID sets the element id; CSSClass appends extra classes.

Output

HTML returns the full <nav class="navbar"> with brand, toggler and collapsible nav — serve it, or assign it to a page template's BodyContent.

Resources

Keep exploring

	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

NavBar