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>

Scrolling menu

buiSidebarContent is the scrolling region between a pinned header and footer. Without it the sidebar scrolls as a whole — either way an overflowing menu stays reachable, and the icon rail hides its scrollbar rather than losing 16px of a 3.5rem rail to its track.

Acme

Settings

<!-- buiSidebarContent scrolls; the header and footer around it stay put -->
<bui-sidebar [(open)]="open" collapsible="icon">
  <div class="px-3 py-2 font-semibold">Acme</div>
  <div buiSidebarContent>
    <a buiSidebarMenuButton href="#">Dashboard</a>
    …30 more items…
  </div>
  <a buiSidebarMenuButton href="#">Settings</a>
</bui-sidebar>

Icon rail tooltips

Inside a bui-sidebar-provider, a menu button with tooltip labels itself on hover and focus while it is shrunk to the rail, and nowhere else. It is a visual affordance: the label stays in the DOM, so the accessible name never depended on it. Collapse the rail, then hover an icon. mobileBreakpoint moves the off-canvas threshold off Tailwind's md.

<!-- The label shows only while the rail is collapsed on desktop -->
<bui-sidebar-provider [mobileBreakpoint]="1023">
  <bui-sidebar collapsible="icon">
    <a buiSidebarMenuButton tooltip="Inbox" tooltipSide="right" href="#">
      <svg …></svg>
      <span>Inbox</span>
    </a>
  </bui-sidebar>
  <main buiSidebarInset>…</main>
</bui-sidebar-provider>

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`.

bui-sidebar-provider

Inputs

Prop	Type	Default	Description
`mobileBreakpoint`	`string \| number`	`DEFAULT_MOBILE_BREAKPOINT`	Viewport width below which the sidebar becomes an off-canvas drawer instead of an icon rail. A bare number is read as px; anything else is used as written.

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