Component

Sidebar

A full application sidebar shell. Wrap a sidebar and main area in a layout, build the nav from header, groups, menus, and collapsible sub-menus, collapse it to icons or off-canvas, pick a side and variant, and toggle it from anywhere with a trigger.

App shell

Herbst

Photos

Signed in as A. Herbst

Photos

Toggle collapses the sidebar to an icon rail.

import { ChangeDetectionStrategy, Component } from '@angular/core';

import { HbButtonComponent, HbSidebarImports } from '@herbst/ui';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { phosphorBell, phosphorLeaf, phosphorTag } from '@ng-icons/phosphor-icons/regular';

@Component({
  selector: 'hb-demo-sidebar-basic',
  imports: [HbSidebarImports, HbButtonComponent, NgIcon],
  viewProviders: [provideIcons({ phosphorLeaf, phosphorTag, phosphorBell })],
  template: `
    <hb-sidebar-layout class="h-[28rem] w-full overflow-hidden rounded-md border border-border">
      <hb-sidebar hbId="docs-basic" hbCollapsible="icon">
        <hb-sidebar-header>
          <div class="flex items-center gap-2 px-1 py-1.5">
            <ng-icon name="phosphorLeaf" class="text-primary [&>svg]:size-5" />
            <span class="font-medium group-data-[collapsed]/sb:hidden">Herbst</span>
          </div>
        </hb-sidebar-header>

        <hb-sidebar-content>
          <hb-sidebar-group>
            <hb-sidebar-group-label>Photos</hb-sidebar-group-label>
            <hb-sidebar-group-content>
              <hb-sidebar-menu>
                <hb-sidebar-menu-item>
                  <a
                    hbSidebarMenuButton
                    href="#"
                    [hbActive]="true"
                    (click)="$event.preventDefault()"
                  >
                    <ng-icon name="phosphorLeaf" />
                    <span>Photos</span>
                  </a>
                </hb-sidebar-menu-item>
                <hb-sidebar-menu-item>
                  <a hbSidebarMenuButton href="#" (click)="$event.preventDefault()">
                    <ng-icon name="phosphorTag" />
                    <span>Forests</span>
                  </a>
                </hb-sidebar-menu-item>
                <hb-sidebar-menu-item>
                  <a hbSidebarMenuButton href="#" (click)="$event.preventDefault()">
                    <ng-icon name="phosphorBell" />
                    <span>Alerts</span>
                  </a>
                </hb-sidebar-menu-item>
              </hb-sidebar-menu>
            </hb-sidebar-group-content>
          </hb-sidebar-group>
        </hb-sidebar-content>

        <hb-sidebar-footer>
          <div class="px-1 text-xs text-muted-foreground group-data-[collapsed]/sb:hidden">
            Signed in as A. Herbst
          </div>
        </hb-sidebar-footer>
      </hb-sidebar>

      <hb-sidebar-main>
        <div class="flex items-center gap-2 border-b border-border p-3">
          <button hbSidebarTrigger target="docs-basic" hb-button hbType="outline" hbSize="sm">
            Toggle
          </button>
          <span class="text-sm font-medium">Photos</span>
        </div>
        <div class="p-4 text-sm text-muted-foreground">
          Toggle collapses the sidebar to an icon rail.
        </div>
      </hb-sidebar-main>
    </hb-sidebar-layout>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HbDemoSidebarBasicComponent {}

Collapsible sub-menus

Library

Expand the parent items to reveal their sub-menus.

Floating, right & off-canvas

A floating sidebar on the right that slides off-canvas when closed.

Filters

API reference

hb-sidebar

Property	Description	Type	Default
[(hbOpen)] / [hbId]	The open state (two-way), and an id that hbSidebarTrigger targets to toggle this sidebar.	boolean / string	true / auto
[hbSide] / [hbVariant]	Which edge it docks to, and its look.	'left' \| 'right' / 'sidebar' \| 'floating' \| 'inset'	'left' / 'sidebar'
[hbCollapsible]	How it collapses: to an icon rail, fully off-canvas, or not at all.	'icon' \| 'offcanvas' \| 'none'	'icon'
[hbWidth] / [hbIconWidth]	Expanded width, and the width of the icon rail when collapsed.	string	'16rem' / '3rem'
[hbOverlay] / [hbDismissable] / [hbHideOnOutsideClick]	Float over the content with a backdrop (also automatic on mobile), dismiss on backdrop, and close on outside click.	boolean	false / true / true
[hbOpenOnHover] / [hbHoverOpenDelay] / [hbHoverCloseDelay]	Expand a collapsed sidebar on hover, with open/close delays in milliseconds.	boolean / number	false / 50 / 100
(hbOnOpenChange)	Emits { value, originalEvent } whenever the open state changes.	HbSidebarOpenChangeEvent	—

Structure

Property	Description	Type	Default
hb-sidebar-layout / hb-sidebar-main	The flex shell wrapping the sidebar(s), and the main content area beside them.	component	—
hb-sidebar-header / -content / -footer	The top, scrollable middle, and bottom regions of the sidebar.	component	—
hb-sidebar-group / -group-label / -group-content	A titled section of the nav.	component	—
hb-sidebar-menu / -menu-item	A menu list and its items. An item takes [hbCollapsible], [(hbOpen)], [hbDefaultOpen], [hbDisabled] to host a sub-menu.	component	—
[hbSidebarMenuButton] / [hbSidebarMenuSubButton]	The clickable nav link inside an item (hbActive marks the current page) and inside a sub-item.	directive	—
[hbSidebarTrigger] / [hbSidebarRail]	A button that toggles a sidebar by its target id, and a draggable edge rail that toggles on click.	directive	—