Sidebar

Sidebar is an app navigation panel: collapsible to icons on desktop, a native <dialog> drawer (Sheet) below the mobile breakpoint. It covers the common case — no rail, no nested submenus, no skeleton loading — with a real focusable trigger, a genuinely modal mobile drawer, and item labels that stay in the accessibility tree once the panel goes icon-only.

Minimal example

import { Component, signal } from "@angular/core";
import {
  SidebarComponent,
  SidebarHeaderDirective,
  SidebarContentDirective,
  SidebarGroupDirective,
  SidebarItemDirective,
  SidebarItemLabelDirective,
  SidebarTriggerDirective,
  PanelLeftIcon,
  HouseIcon,
  FileSearchIcon,
} from "@sinequa/galactik";

@Component({
  selector: "app-shell",
  imports: [
    SidebarComponent,
    SidebarHeaderDirective,
    SidebarContentDirective,
    SidebarGroupDirective,
    SidebarItemDirective,
    SidebarItemLabelDirective,
    SidebarTriggerDirective,
    PanelLeftIcon,
    HouseIcon,
    FileSearchIcon,
  ],
  template: `
    <div class="flex h-dvh">
      <Sidebar [(collapsed)]="collapsed" aria-label="Main navigation">
        <div sidebarHeader class="flex-row items-center justify-between">
          <span class="group-data-[collapsed=true]:sr-only">Sinequa</span>
          <button sidebarTrigger type="button" [attr.aria-label]="collapsed() ? 'Expand navigation' : 'Collapse navigation'">
            <PanelLeftIcon />
          </button>
        </div>
        <nav sidebarContent aria-label="Main navigation">
          <div sidebarGroup>
            <a sidebarItem routerLink="/home">
              <HouseIcon />
              <span sidebarItemLabel>Home</span>
            </a>
            <a sidebarItem routerLink="/search">
              <FileSearchIcon />
              <span sidebarItemLabel>Search</span>
            </a>
          </div>
        </nav>
      </Sidebar>
      <main class="flex-1 overflow-auto"><router-outlet /></main>
    </div>
  `,
})
export class AppShellComponent {
  collapsed = signal(false);
}

How it works

Sidebar renders as a native <aside> on desktop, and swaps to a Sheet anchored to side() below the 768px breakpoint (via BreakpointObserverService) — projecting the exact same sidebarHeader/sidebarContent/sidebarFooter content either way, nothing to branch on in application code.

The mobile drawer starts closed, and its entire content — including a trigger placed inside sidebarHeader — lives inside it. Below the breakpoint there is nothing on screen to open it from unless the app keeps a second trigger outside the <Sidebar> (its own top bar, typically), passed the panel explicitly since it cannot resolve SIDEBAR_REF through DI from outside:

<button sidebarTrigger [sidebar]="sidebar" type="button" aria-label="Open navigation">
  <BarsIcon />
</button>

<Sidebar #sidebar="sidebar" aria-label="Main navigation">
  <!-- sidebarHeader / sidebarContent / sidebarFooter -->
</Sidebar>

The mobile drawer reuses Sheet unmodified — focus trap, Escape-to-close, focus restoration and the ::backdrop all come from the native <dialog> + showModal() — sized to the full viewport width (a fixed Sheet width can otherwise push the in-header trigger off-screen on a narrow phone) and painted with the same --sidebar/--sidebar-foreground tokens as the desktop panel, so a themed app gets a matching drawer with no extra work.

Recipes

Trailing badge and disabled item

A trailing Badge is pinned to the end of an item and dropped automatically once the sidebar is icon-only — there is no room next to a bare icon for a pill.

<a sidebarItem routerLink="/notifications">
  <BellIcon />
  <span sidebarItemLabel>Notifications</span>
  <badge size="xs">3</badge>
</a>

<a sidebarItem href="#" disabled>
  <CogIcon />
  <span sidebarItemLabel>Locked setting</span>
</a>

disabled reflects aria-disabled="true" and sets tabindex="-1" — the same contract as Link's own disabled.

inset and floating variants

variant="inset" draws no border or fill on Sidebar itself; the encased look comes from sidebarInset on the app's main content wrapper instead, which supplies the surface. variant="floating" needs no companion element — it detaches with a margin, border and shadow of its own, and reserves no layout space, ever, floating on top of whatever sibling content follows it.

<div class="flex gap-2 p-2">
  <Sidebar variant="inset" aria-label="Main navigation">
    <div sidebarHeader>Sinequa</div>
    <nav sidebarContent aria-label="Main navigation">
      <div sidebarGroup>
        <a sidebarItem routerLink="/home">
          <HouseIcon />
          <span sidebarItemLabel>Home</span>
        </a>
      </div>
    </nav>
  </Sidebar>
  <main sidebarInset>App content</main>
</div>

floating/inset collapse differently from the default sidebar variant: instead of narrowing to an icon rail, the whole panel slides off-screen (and is marked inert while hidden, so its own header trigger cannot still be reached by keyboard). An app using either variant with collapse therefore needs a third trigger placed outside the <Sidebar>, shown only while collapsed() is true.

Reading the collapsed state from a projected component

A component projected inside sidebarHeader/sidebarContent/sidebarFooter reads the panel's own state by injecting SIDEBAR_REF — the same token SidebarTriggerDirective itself resolves through.

import { Component, computed, inject } from "@angular/core";
import { SIDEBAR_REF } from "@sinequa/galactik";

@Component({
  selector: "app-sidebar-status",
  template: `<span [class]="dotClass()" aria-hidden="true" [title]="label()"></span>`,
})
export class SidebarStatusComponent {
  private readonly sidebar = inject(SIDEBAR_REF, { optional: true });

  protected readonly label = computed(() => {
    const sidebar = this.sidebar;
    if (!sidebar) return "";
    if (sidebar.isMobile()) return sidebar.expanded() ? "Drawer open" : "Drawer closed";
    return sidebar.collapsed() ? "Collapsed" : "Expanded";
  });

  protected readonly dotClass = computed(() => "size-2 rounded-full bg-(--bg-neutral-muted)");
}

Options

SidebarTriggerDirective

SidebarTriggerDirective also reflects aria-expanded on its host, bound to the resolved sidebar's expanded() signal — a screen reader announces whether activating it opens or closes the panel, whichever viewport applies.

SIDEBAR_REF

An InjectionToken<SidebarRef> a <Sidebar> provides for anything projected into it, exposing collapsed, isMobile, expanded (all Signal<boolean>) and toggle()/open()/close() — the last three branch on isMobile() automatically (desktop collapse vs. the mobile drawer).

Pitfalls

What's next