Components / Sidebar

Sidebar

A collapsible desktop navigation and responsive mobile drawer.

example.component.html

html

<aevko-sidebar label="Workspace">
  <a routerLink="/home">
    Home
  </a>
</aevko-sidebar>

Installation

npx aevko-ui@latest add sidebar --yes

Source ownership

Compose header, links and footer from product content. Mobile, collapse and icon treatments remain editable in the installed template and stylesheet.

Edit locallyThe installed template and stylesheet are application code, not a black box.

Theme semanticallyOverride --aevko-* tokens or ordinary classes without !important.

Compose freelySlots accept native elements, SVG, images or Angular components.

Property or slot	Type	Default	Description
`label`	`string`	`'Primary navigation'`	Accessible name for the navigation and panel.
`open`	`model<boolean>`	`false`	Responsive drawer state.
`collapsed`	`model<boolean>`	`false`	Desktop collapsed state.
`closeOnNavigate`	`boolean`	`true`	Closes the mobile drawer after projected navigation is used.
`aevkoSidebarHeader / Footer`	`projected slots`	`empty`	Persistent content around navigation.
`aevkoSidebarMenuIcon`	`projected slot`	`inline SVG`	Replaces the mobile menu icon.
`aevkoSidebarExpandIcon`	`projected slot`	`inline SVG`	Replaces the expand icon.
`aevkoSidebarCollapseIcon`	`projected slot`	`inline SVG`	Replaces the collapse icon.

Accessibility contract

The mobile trigger exposes expanded state, Escape closes the drawer and navigation keeps a visible label.

Provide descriptive navigation text, identify the current route and keep projected links keyboard reachable.