Sidebar

Sidebar is a complete vertical app or workspace sidebar for persistent navigation and supporting sidebar content. Use it inside a shell sidebar region, usually within Sidenav or LayoutSidebar, when the app needs a real sidebar with header, body, footer, navigation items, groups, headings, dividers, badges, icons, and active state.

Use it for:

App and admin shell sidebars with brand, workspace switcher, main navigation, and footer content.
Navigation with ngs-sidebar-nav, ngs-sidebar-nav-item, active keys, icons, badges, headings, dividers, and expandable groups.
Data-driven sidebar navigation with item templates when the navigation tree comes from configuration.

Sidebar has its own navigation system. If ngs-sidebar is not used and a persistent navigation block is still needed, use Navigation instead. Do not use Sidebar as a generic left column, card, drawer content, inspector, page section, tabs, menu, or compact icon rail. Use Sidenav for responsive open, collapse, or overlay behavior, RailNav for compact icon navigation, and SidePanel for secondary tabbed tools beside the main content.

Prop	Type	Default
onlyCompact Forces the compact layout and prevents the sidebar from expanding on hover.	boolean	false
block Available on ngs-sidebar-header and ngs-sidebar-footer. Switches the region from the default flex items-center layout to block layout.	boolean	false
activeKey The key of the currently active navigation item	any	undefined
dataSource Data source for the navigation items	any[]	undefined
itemTypeProperty Property name to determine item type	string	'type'
autoScrollToActiveItem Whether to automatically scroll to the active item on render	boolean	false

Event	Description
itemClicked	Emitted when a navigation item is clicked

Mode templates

ngs-sidebar-header and ngs-sidebar-footer are flex containers with centered items by default, so simple text, icons, and mode templates can be placed directly inside them.

For sidebar content that changes between compact and expanded modes, render separate blocks with *ngsSidenavCollapsed and *ngsSidenavExpanded inside an ngs-sidenav. Do not use CSS marker classes for these mode blocks.

Dynamic compact sidebar

<ngs-sidenav [opened]="true" mode="side" [collapsed]="compact()">
  <ngs-sidebar>
    <ngs-sidebar-header>
      <span *ngsSidenavCollapsed>NG</span>
      <span *ngsSidenavExpanded>NgStarter</span>
    </ngs-sidebar-header>
  </ngs-sidebar>
</ngs-sidenav>

Block header or footer

Use block only when the header or footer content needs to own its own block layout.

<ngs-sidebar-header block>
  <div class="grid gap-1">
    <strong>Workspace</strong>
    <span>Production</span>
  </div>
</ngs-sidebar-header>

Fixed compact sidebar

Use onlyCompact when the sidebar is always compact and should not expand on hover.

<ngs-sidebar onlyCompact>
  <ngs-sidebar-header>NG</ngs-sidebar-header>
  <ngs-sidebar-body>
    <!-- icon-only navigation -->
  </ngs-sidebar-body>
</ngs-sidebar>

Using this component in production?

Source code, templates, and commercial support

NgStarter includes source code, admin dashboard templates, and commercial support.