chrome:seo.title.page

chrome:demo.preview

demo-preview:hints.category.navigation:

Tab

demo-preview:hints.category.focus:

Focus

demo-preview:hints.category.shortcuts:

Enter / Space

demo-preview:projection.slots-label:

[xSidebarHeader]

ng-content

[xSidebarFooter]

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

import { XSidebar } from '@xngui/components/sidebar';

@Component({

selector: 'app-example',

imports: [XSidebar],

templateUrl: './sidebar.component.html',

})

export class ExampleComponent {}

chrome:demo.events.empty

chrome:demo.api.title

chrome:demo.api.col.property

chrome:demo.api.col.type

chrome:demo.api.col.default

chrome:demo.api.col.description

collapsible

boolean

false

When true, enables the collapsed rail; drive `collapsed` from outside when false.

showToggle

boolean

true

Renders the built-in collapse toggle when collapsible is true.

mode

XSidebarMode

'push'

`push` keeps layout space; `overlay` floats above content with focus trap.

side

'start' | 'end'

'start'

Which viewport edge the panel attaches to.

size

XSize

—

Visual size tier — falls back to XConfigService when unset.

density

XDensity

—

Spacing offsets — orthogonal to `size`; falls back to XConfigService when unset.

ariaLabel

string

—

Accessible name for the navigation region — falls back to the `sidebar.ariaLabel` i18n key.

collapseLabel

string

—

Accessible label for the collapse toggle when expanded — falls back to `sidebar.collapse`.

expandLabel

string

—

Accessible label for the expand toggle when collapsed — falls back to `sidebar.expand`.

collapseHint

boolean

false

Pulsing dot on the collapse toggle — visual hint to collapse for more canvas space.

generated:catalog.entry.sidebar.title

chrome:demo.preview

chrome:demo.events.title

chrome:demo.api.title

x-sidebar

chrome:demo.section

chrome:demo.preview

chrome:demo.events.title

chrome:demo.api.title