Sidebar for Angular

import { AuiSidebar } from '@absoluteui/angular/sidebar';

Styles are included with the component. Behavior, keyboard and screen-reader support, design tokens, and limitations are described on the Sidebar page; this page covers the Angular API.

Defaults for every instance: provideAbsoluteUIConfig({ components: { sidebar: { ... } } }) (see Configuration).

Example

import { Component, inject, viewChild } from '@angular/core';
import { Router } from '@angular/router';
import type { SidebarItem, SidebarNavigateDetail } from '@absoluteui/components/sidebar';
import { AuiSidebar } from '@absoluteui/angular/sidebar';
import { AuiButton } from '@absoluteui/angular/button';

@Component({
  selector: 'app-shell-nav',
  imports: [AuiSidebar, AuiButton],
  template: `
    @if (mode !== 'inline') {
      <button type="button" auiButton variant="ghost" (click)="sidebar.toggle()">Menu</button>
    }
    <aui-sidebar #sidebar="auiSidebar" label="Main" [items]="items" [value]="active" [(collapsed)]="collapsed"
      (modeChange)="mode = $event.mode"
      (aui-navigate)="go($event)"></aui-sidebar>
  `,
})
export class ShellNavComponent {
  private readonly router = inject(Router);
  private readonly sidebarRef = viewChild.required<AuiSidebar>('sidebar');
  readonly items: SidebarItem[] = [
    { id: 'inbox', label: 'Inbox', href: '/inbox' },
    { id: 'archive', label: 'Archive', href: '/archive' },
  ];
  active = 'inbox';
  collapsed = false;
  mode: 'inline' | 'drawer' = 'inline';

  go(event: Event): void {
    const { id, item } = (event as CustomEvent<SidebarNavigateDetail>).detail;
    if (item.href === undefined) return;
    event.preventDefault();
    this.active = id;
    void this.router.navigateByUrl(item.href);
    this.sidebarRef().close();
  }
}

<aui-sidebar>

Class AuiSidebar; template reference #ref="auiSidebar".

Server rendering: Renders on the server; the browser re-creates it after hydration.

Inputs

Input	Type	Default	Description
label	string		Required. Accessible name of the <nav> (aria-label) and the drawer title, e.g. “Main”. Must not be empty.
items	readonly SidebarItem[]		Required. Navigation tree (at least one item; groups need at least one child). Ids are unique across the whole tree; labels are non-empty. Links without href render as buttons.
collapsible	boolean	true	Render the collapse (rail) toggle in the footer.
breakpoint	number	'768'	Integer 0..4096: viewport width in CSS px below which the sidebar becomes a modal drawer. 0 never switches.
direction	Direction	'ltr'	‘rtl’ sets dir=“rtl” on the <nav> and footer; tooltips and the drawer also follow an inherited rtl direction.
icons	Partial<SidebarIcons>		Icon slot overrides.

Two-way bindings

Model	Type	Change output	Description
[(value)]	string	(valueChange)	Active (current page) item id; must be a non-group item. Default: no active item.
[(collapsed)]	boolean	(collapsedChange)	Icon rail: labels are visually hidden and shown as tooltips. Inline mode only; forced to false when collapsible is false.
[(expanded)]	readonly string[]	(expandedChange)	Expanded group ids. Every id must be a group id.

Outputs

Output	Payload	Description
(navigate)	SidebarNavigateDetail	The user activated an enabled item (unmodified primary click, Enter, or Space on a button). preventDefault stops link navigation, the active change, and the drawer close. Re-emits aui-navigate.
(changed)	SidebarChangeDetail	The active item changed after an uncanceled aui-navigate. Not emitted when the active item is activated again. Re-emits aui-change.
(groupToggled)	SidebarExpandedChangeDetail	The user toggled a group. value lists all expanded group ids in tree order. Re-emits aui-expanded-change.
(modeChange)	SidebarModeChangeDetail	The viewport crossed the breakpoint after creation. The initial mode is not reported. Re-emits aui-mode-change.

Read-only state

Property	Type	Description
mode	Signal<SidebarMode>	‘drawer’ below the breakpoint, otherwise ‘inline’.
isOpen	Signal<boolean>	Whether the drawer is open (always false inline).

Methods

Call them through a viewChild query or a template reference.

Method	Description
open(): void	Open the drawer; focus moves into it. No-op in inline mode.
close(): void	Close the drawer; focus returns to the element focused before open(). No-op when closed or inline.
toggle(): void	close() when open, otherwise open().
select(id: string): void	Mark a non-group item active and expand its groups. No events; does not close the drawer. Throws SIDEBAR_OPTIONS for an unknown or group id.

Test harness

AuiSidebarHarness from @absoluteui/angular/testing. <aui-sidebar>.