Sidebar

A collapsible navigation sidebar.

import { BuiSidebar, BuiSidebarMenuButton } from 'ng-blatui';

<bui-sidebar [(open)]="open">
  <a buiSidebarMenuButton [isActive]="true" href="#">Dashboard</a>
</bui-sidebar>

Icon collapsible

Dashboard Projects Settings

<bui-sidebar [(open)]="open" collapsible="icon">…menu…</bui-sidebar>

Right side

Inbox Drafts

<bui-sidebar [(open)]="open" side="right">…menu…</bui-sidebar>

API reference

bui-sidebar

Inputs

Prop	Type	Default	Description
`side`	`"left" \| "right"`	`'left'`	Edge the sidebar is docked to, which sets its border side.
`collapsible`	`"icon" \| "offcanvas"`	`'offcanvas'`	Collapse behavior: hide entirely (`offcanvas`) or shrink to an icon rail (`icon`).

Two-way models

Bind with [(name)], or one-way as an input.

Prop	Type	Default	Description
`open`	`boolean`	`true`	Whether the sidebar is expanded. Two-way bindable with `[(open)]` (standalone use).

[buiSidebarMenuButton]

Inputs

Prop	Type	Default	Description
`isActive`	`boolean`	`false`	Whether this item is the current page; sets active styling and `aria-current`.

Every ng-blatui component also accepts a class input to merge extra Tailwind classes onto the host.