Sidebar | Neural UI v2

Usage

The application owns open. Bind it and handle closeRequested by applying false when closing is accepted. opened and closed report lifecycle transitions, not replacement values for open. Project body content and the available header/footer slots. Keep a named trigger in the page so focus can return after dismissal. disableClose only blocks automatic dismissals; provide an explicit completion action.

Examples

Try this application-owned interaction. Its event handling and initial data are included in Code.

Events: 0

Try and configure

Change the public options, try the result and inspect the updated template. Code contains the complete executable implementation.

Events: 0

disableClose

persistent

collapsed

Advanced options · 5

<div class="remaining-preview">
  @if (!persistent()) {
    <button
    neu-button
    (neuClick)="open.set(true)"
  >
      {{ t('Open example', 'Abrir ejemplo') }}
    </button>
  }
  <div
    class="remaining-sidebar-layout"
    [class.remaining-sidebar-layout--persistent]="persistent()"
    [class.remaining-sidebar-layout--right]="side() === 'right'"
    [style.--remaining-sidebar-width]="collapsed() ? '3.75rem' : '16rem'"
  >
    <neu-sidebar
    [hideHeader]="false"
    [initialCollapsed]="false"
    [restoreFocus]="true"
    [open]="open()"
    [side]="'left'"
    [persistent]="false"
    [collapsed]="false"
    (collapsedChange)="collapsed.set($event)"
    [closeOnEscape]="true"
    (closeRequested)="open.set(false); record('closeRequested', $event)"
    (opened)="record('opened')"
    (closed)="record('closed')"
  [ariaLabel]="'Example navigation'"
  [closeLabel]="'Close navigation'"
>
      <div class="remaining-sidebar-links">
        @for (section of sections; track section.id) {
          <button
            neu-button
            variant="ghost"
            [ariaLabel]="t(section.en, section.es)"
            [attr.aria-pressed]="activeSection() === section.id"
            (neuClick)="activeSection.set(section.id)"
          >
            <app-navigation-example-icon [kind]="section.icon" size="18" />
            @if (!collapsed()) {
              <span>{{ t(section.en, section.es) }}</span>
            }
          </button>
        }
      </div>
    <header neu-sidebar-header>
      <strong>{{ t('Workspace', 'Área de trabajo') }}</strong>
    </header>
    @if (!persistent()) {
      <div neu-sidebar-footer>
        <button neu-button variant="outline" (neuClick)="open.set(false)">
          {{ t('Done', 'Terminar') }}
        </button>
      </div>
    }
    </neu-sidebar>
    @if (persistent()) {
      <section class="remaining-sidebar-main">
        <h3>{{ sectionLabel() }}</h3>
        <p>
          {{
            t(
              'Persistent navigation stays visible beside the main content. The open input only controls overlay mode.',
              'La navegación persistente permanece visible junto al contenido. El input open solo controla el modo overlay.'
            )
          }}
        </p>
      </section>
    }
  </div>
</div>

State and data for this configuration

These values match the current preview. Complete handlers, Core imports and templates are in Source.

import { signal } from '@angular/core';

export const open = signal(false);

State and events

The application owns open. Bind it and handle closeRequested by applying false when closing is accepted. opened and closed report lifecycle transitions, not replacement values for open. Project body content and the available header/footer slots. Keep a named trigger in the page so focus can return after dismissal. disableClose only blocks automatic dismissals; provide an explicit completion action.

Accessibility and keyboard

Tab remains in a modal surface. Escape requests dismissal when enabled. Closing returns focus to the original trigger; persistent Sidebar is normal page navigation rather than a modal task.

Key	Action
`Tab`	In modal mode, move through controls inside the surface. A persistent sidebar follows normal page order.
`Shift + Tab`	Move backwards through the focus order; modal focus stays inside the surface.
`Escape`	Request dismissal when enabled; closing restores focus to the trigger.

API

Inputs, models and Outputs are extracted from the installed Core package. Named public types link to their definitions. Templates below include executable examples.

Inputs

Configure the component with [property]="value". Your application supplies these values; the component does not replace the state you pass in.

Name	Type	Default	Template binding	Description
`ariaLabel`	`string`	`'Navigation menu'`	`[ariaLabel]`	Accessible name of the control or region.
`closeLabel`	`string`	`'Close navigation menu'`	`[closeLabel]`	Label for close preview. Translate it for your application.
`closeOnEscape`	`boolean`	`true`	`[closeOnEscape]`	Allow Escape to request closing the sidebar.
`collapsed`	`boolean \| undefined`	`undefined`	`[collapsed]`	Applied collapsed state; undefined lets the component manage the state.
`hideHeader`	`boolean`	`false`	`[hideHeader]`	Hide the sidebar header region.
`initialCollapsed`	`boolean`	`false`	`[initialCollapsed]`	One-time collapse seed when collapsed is omitted.
`open`	`boolean`	`false`	`[open]`	Application-owned visibility. Apply false when the requested dismissal is accepted.
`persistent`	`boolean`	`false`	`[persistent]`	Render side content as part of page layout rather than a modal overlay.
`restoreFocus`	`boolean`	`true`	`[restoreFocus]`	Restore focus to the original trigger after closing.
`side`	`"left" \| "right"`	`'left'`	`[side]`	Choose the physical left or right side of the sidebar.

Outputs

Listen to an event with (event)="handler($event)". The table explains the data your handler receives and how to use it.

Name	Payload	Template binding	Description
`closed`	`void`	`(closed)="onClosed($event)"`	Reports closure of this component. Consult the payload type for the emitted data.
`closeRequested`	`NeuCloseRequest`	`(closeRequested)="onCloseRequested($event)"`	Requests dismissal with its reason and original event. The application accepts by applying open=false.
`collapsedChange`	`boolean`	`(collapsedChange)="onCollapsedChange($event)"`	Proposes the next collapsed state; update collapsed when controlled.
`opened`	`void`	`(opened)="onOpened($event)"`	Reports opening of this component. Consult the payload type for the emitted data.

Templates

ng-content projects content into the component. TemplateRef inputs receive a template; ng-template directives identify templates with a typed context. A directive shared by an entrypoint is not necessarily a slot of this component.

Name	Mechanism	Contract
`[neu-sidebar-header]`View example	Content projection	`<ng-content select="[neu-sidebar-header]" />`
`*` Projected content View example	Content projection Application-provided content.	`<ng-content />` Context used: `—`
`[neu-sidebar-footer]`View example	Content projection	`<ng-content select="[neu-sidebar-footer]" />`

Each example demonstrates a different template. Switch between Demo and Code to inspect its implementation, imports and state.

Public Types

Open a type to inspect its definition and interface fields.

NeuCloseReasonTypeScript

import type { NeuCloseReason } from '@neural-ui/core/foundation';

// Public declaration (reference only)
export type NeuCloseReason = 'escape' | 'outside' | 'action' | 'programmatic-command';

NeuCloseRequestTypeScript

import type { NeuCloseReason } from '@neural-ui/core/foundation';

import type { NeuCloseRequest } from '@neural-ui/core/foundation';

// Public declaration (reference only)
export interface NeuCloseRequest {
  readonly originalEvent?: Event;
  readonly reason: NeuCloseReason;
}

Styles and tokens

Use the supported public tokens listed below. Surrounding layout belongs to your application; validate the result in light and dark modes and narrow containers.

Specific tokens

Token	Purpose	State / variant	Default / source	Fallback
`--neu-sidebar-bg`	Inherited theme value used by this component	Field surface	`var(--neu-surface)`Root declaration	`--neu-surface`
`--neu-sidebar-collapsed-width`	Inherited theme value used by this component	Field surface	`60px`Root declaration	`No token alias`
`--neu-sidebar-width`	Inherited theme value used by this component	Field surface	`260px`Root declaration	`No token alias`

Shared tokens used

Override these on a local wrapper to affect this example. An override on :root affects other components that use the same token.

Token	Purpose here	Other impact	Default / fallback
`--neu-border`	Normal control and cell borders	Shared by other Core consumers; scope the override.	`rgba(15, 23, 42, 0.08)`
`--neu-focus-ring-strong`	Emphasized focus treatment	Shared by other Core consumers; scope the override.	`0 0 0 var(--neu-focus-ring-width) rgba(0, 122, 255, 0.35)`
`--neu-radius`	Control corner radius	Shared by other Core consumers; scope the override.	`8px`
`--neu-surface`	Main field, header or control surface	Shared by other Core consumers; scope the override.	`#ffffff`
`--neu-surface-2`	Secondary surfaces and alternating rows	Shared by other Core consumers; scope the override.	`#f1f5f9`
`--neu-surface-3`	Hover and raised control surfaces	Shared by other Core consumers; scope the override.	`#e2e8f0`
`--neu-text`	Main text and inherited icon color	Shared by other Core consumers; scope the override.	`#0f172a`
`--neu-text-muted`	Secondary labels and supporting content	Shared by other Core consumers; scope the override.	`#475569`

Related components

Use related components when your task requires a different interaction or a composed control.

Inputs

Outputs

Templates

[neu-sidebar-header]

Projected content

[neu-sidebar-footer]

Public Types

Specific tokens

Shared tokens used