Sidebar
App-level collapsible side navigation
Divergence from Blok
Desktop rendering only. Blok's source swaps to a mobile Sheet when useIsMobile() returns true. BlazorUI keeps the desktop position:absolute container and hides on small viewports via hidden md:block. Consumers who need a mobile drawer should compose <Sheet> separately for the small-viewport layout.
No keyboard shortcut. Blok wires a global Ctrl/Cmd+B listener via window.addEventListener('keydown', …) to toggle the sidebar. BlazorUI leaves this to the consumer — add your own handler if you want the shortcut.
No cookie persistence. Blok persists the open/collapsed state to a sidebar_state cookie so the layout survives page reloads. BlazorUI's state is in-memory for the current circuit. Consumers can wire their own persistence via OpenChanged.
No tooltip on collapsed menu buttons. Blok's SidebarMenuButton accepts a tooltip prop that surfaces the button's label when the sidebar collapses to icon-only. BlazorUI's Tooltip is a pure-CSS hover primitive with no programmatic hidden prop or TooltipProvider context, so this integration is omitted. Consumers can wrap the button with a Tooltip manually.
SidebarHeader and SidebarFooter are not exposed. Blok's source does not export these; the upstream shadcn/ui primitive does, but BlazorUI tracks Blok. Place header/footer content directly inside SidebarContent or an outer <div> with layout classes.
Examples
Leading icons
Trailing actions and badges
Groups with sub-menus
Collapsible: icon
Variant: floating
Loading skeleton
API
The element family below can be composed together. Click an element to jump to its properties.
| Element | Purpose |
|---|---|
| SidebarProvider | Outermost wrapper. Cascades itself so child Sidebar, SidebarTrigger, and SidebarRail components can read and toggle the open state. Sets the --sidebar-width and --sidebar-width-icon CSS variables consumed by Sidebar. |
| Sidebar | The collapsible navigation rail. Reads its open state from the cascading SidebarProvider and swaps between full-width, icon-only, or off-canvas layouts via the Collapsible parameter. |
| SidebarInset | Main-content <main> region that sits alongside the Sidebar. When the Sidebar is SidebarVariant.Inset, this element gains the inset margin and rounded corner styling. |
| SidebarTrigger | Pre-styled icon button that toggles the nearest SidebarProvider. Place it in your page header to let users collapse / expand the sidebar. |
| SidebarRail | Thin vertical hit-area at the outer edge of the sidebar that also toggles the provider. Useful for drag-to-collapse style interactions. |
| SidebarInput | Standard Input wired up with the sidebar input styling. Useful for inline filters at the top of a sidebar group. |
| SidebarSeparator | Horizontal Separator with sidebar-specific spacing and background colour. |
| SidebarContent | Scrollable body area of the sidebar. Place SidebarGroups here; overflow becomes scrollable. |
| SidebarGroup | Logical section inside SidebarContent. Usually holds a SidebarGroupLabel, an optional SidebarGroupAction, and a SidebarGroupContent with a SidebarMenu. |
| SidebarGroupLabel | Small uppercase heading at the top of a SidebarGroup. Fades out when the sidebar collapses to icon mode. |
| SidebarGroupAction | Small icon button positioned at the top-right of a SidebarGroup. Hidden when the sidebar is collapsed to icon mode. |
| SidebarGroupContent | Body of a SidebarGroup. Host for SidebarMenu. |
| SidebarMenu | Vertical <ul> of navigation items inside a SidebarGroupContent. |
| SidebarMenuItem | <li> row hosting one SidebarMenuButton plus optional SidebarMenuBadge, SidebarMenuAction, or SidebarMenuSub. |
| SidebarMenuButton | The primary clickable row of a SidebarMenuItem. Place an Icon + <span> label inside; the icon stays visible when the sidebar collapses to icon mode. |
| SidebarMenuBadge | Small inline badge pinned to the right of a SidebarMenuItem (e.g. unread counts). Hidden when the sidebar collapses to icon mode. |
| SidebarMenuAction | Icon-only button pinned to the right of a SidebarMenuItem. Optionally shown only on hover via ShowOnHover. |
| SidebarMenuSub | Nested <ul> rendered beneath a SidebarMenuItem to hold second-level navigation. Hidden when the sidebar collapses to icon mode. |
| SidebarMenuSubItem | <li> row inside a SidebarMenuSub, hosting a single SidebarMenuSubButton. |
| SidebarMenuSubButton | Clickable navigation link inside a SidebarMenuSubItem. Renders as an <a> so Href drives actual navigation. |
| SidebarMenuSkeleton | Loading placeholder styled to match a SidebarMenuItem. Each instance picks a random width between 50% and 90% for visual variety. |
SidebarProvider
Outermost wrapper. Cascades itself so child Sidebar, SidebarTrigger, and SidebarRail components can read and toggle the open state. Sets the --sidebar-width and --sidebar-width-icon CSS variables consumed by Sidebar.
| Property | Type | Required | Description |
|---|---|---|---|
| DefaultOpen | bool | Initial open state. Default: true. | |
| OpenChanged | EventCallback<bool> | Fires whenever the user toggles the sidebar. Use this to persist state yourself — Blok's cookie persistence is not ported. | |
| ClassName | string? | Extra CSS classes appended to the provider wrapper. | |
| ChildContent | RenderFragment? | Should contain a Sidebar and a sibling SidebarInset. | |
| AdditionalAttributes | Dictionary<string, object>? | Captured unmatched attributes, forwarded to the wrapper div. |
Sidebar
The collapsible navigation rail. Reads its open state from the cascading SidebarProvider and swaps between full-width, icon-only, or off-canvas layouts via the Collapsible parameter.
| Property | Type | Required | Description |
|---|---|---|---|
| Side | SidebarSide | Screen edge to dock against. Default: SidebarSide.Left. Other value: Right. | |
| Variant | SidebarVariant | Visual treatment. Default: SidebarVariant.Sidebar. Other values: Floating (rounded + shadow), Inset (inset main content). | |
| Collapsible | SidebarCollapsible | Collapse behaviour. Default: SidebarCollapsible.Offcanvas (slides off-screen). Other values: Icon (collapses to icon-only rail), None (fixed width, no collapse). | |
| ClassName | string? | Extra CSS classes appended to the sidebar container. | |
| ChildContent | RenderFragment? | Sidebar body — typically one or more SidebarGroups inside a SidebarContent. | |
| AdditionalAttributes | Dictionary<string, object>? | Captured unmatched attributes, forwarded to the sidebar container. |
SidebarInset
Main-content <main> region that sits alongside the Sidebar. When the Sidebar is SidebarVariant.Inset, this element gains the inset margin and rounded corner styling.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the <main> element. | |
| ChildContent | RenderFragment? | Page content rendered next to the sidebar. | |
| AdditionalAttributes | Dictionary<string, object>? | Captured unmatched attributes, forwarded to the <main> element. |
SidebarTrigger
Pre-styled icon button that toggles the nearest SidebarProvider. Place it in your page header to let users collapse / expand the sidebar.
| Property | Type | Required | Description |
|---|---|---|---|
| OnClicked | EventCallback | Fires on click, before the provider toggles. Use for analytics or extra side effects. | |
| ClassName | string? | Extra CSS classes appended to the button. | |
| AdditionalAttributes | Dictionary<string, object>? | Captured unmatched attributes, forwarded to the underlying Button. |
SidebarRail
Thin vertical hit-area at the outer edge of the sidebar that also toggles the provider. Useful for drag-to-collapse style interactions.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the rail button. | |
| AdditionalAttributes | Dictionary<string, object>? | Captured unmatched attributes, forwarded to the rail <button>. |
SidebarInput
Standard Input wired up with the sidebar input styling. Useful for inline filters at the top of a sidebar group.
| Property | Type | Required | Description |
|---|---|---|---|
| Value | string? | Current input value. Use @bind-Value for two-way binding. | |
| ValueChanged | EventCallback<string?> | Fires on input change. Part of the @bind-Value pair. | |
| ClassName | string? | Extra CSS classes appended to the inner Input. | |
| AdditionalAttributes | Dictionary<string, object>? | Captured unmatched attributes, forwarded to the inner Input. |
SidebarSeparator
Horizontal Separator with sidebar-specific spacing and background colour.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the separator. | |
| AdditionalAttributes | Dictionary<string, object>? | Captured unmatched attributes, forwarded to the separator. |
SidebarContent
Scrollable body area of the sidebar. Place SidebarGroups here; overflow becomes scrollable.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the content container. | |
| ChildContent | RenderFragment? | Should contain one or more SidebarGroups. | |
| AdditionalAttributes | Dictionary<string, object>? | Captured unmatched attributes, forwarded to the content container. |
SidebarGroup
Logical section inside SidebarContent. Usually holds a SidebarGroupLabel, an optional SidebarGroupAction, and a SidebarGroupContent with a SidebarMenu.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the group wrapper. | |
| ChildContent | RenderFragment? | Group content. | |
| AdditionalAttributes | Dictionary<string, object>? | Captured unmatched attributes, forwarded to the group wrapper. |
SidebarGroupLabel
Small uppercase heading at the top of a SidebarGroup. Fades out when the sidebar collapses to icon mode.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the label container. | |
| ChildContent | RenderFragment? | Label text or inline markup. | |
| AdditionalAttributes | Dictionary<string, object>? | Captured unmatched attributes, forwarded to the label container. |
SidebarGroupAction
Small icon button positioned at the top-right of a SidebarGroup. Hidden when the sidebar is collapsed to icon mode.
| Property | Type | Required | Description |
|---|---|---|---|
| OnClicked | EventCallback | Fires when the action button is clicked. | |
| ClassName | string? | Extra CSS classes appended to the button. | |
| ChildContent | RenderFragment? | Button content — typically an Icon. | |
| AdditionalAttributes | Dictionary<string, object>? | Captured unmatched attributes, forwarded to the <button>. |
SidebarGroupContent
Body of a SidebarGroup. Host for SidebarMenu.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the content wrapper. | |
| ChildContent | RenderFragment? | Group body — usually a SidebarMenu. | |
| AdditionalAttributes | Dictionary<string, object>? | Captured unmatched attributes, forwarded to the wrapper. |
SidebarMenu
Vertical <ul> of navigation items inside a SidebarGroupContent.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the <ul>. | |
| ChildContent | RenderFragment? | One or more SidebarMenuItems. | |
| AdditionalAttributes | Dictionary<string, object>? | Captured unmatched attributes, forwarded to the <ul>. |
SidebarMenuItem
<li> row hosting one SidebarMenuButton plus optional SidebarMenuBadge, SidebarMenuAction, or SidebarMenuSub.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the <li>. | |
| ChildContent | RenderFragment? | Item content — the button plus any trailing badge / action / sub-menu. | |
| AdditionalAttributes | Dictionary<string, object>? | Captured unmatched attributes, forwarded to the <li>. |
SidebarMenuButton
The primary clickable row of a SidebarMenuItem. Place an Icon + <span> label inside; the icon stays visible when the sidebar collapses to icon mode.
| Property | Type | Required | Description |
|---|---|---|---|
| IsActive | bool | When true, paints the button with the active (primary) colour. Default: false. | |
| Disabled | bool | When true, the button is non-interactive and visually muted. Default: false. | |
| Size | SidebarMenuButtonSize | Size token. Default: SidebarMenuButtonSize.Default. Other values: Sm (smaller text), Lg (larger hit area). | |
| OnClicked | EventCallback | Fires when the button is clicked. | |
| ClassName | string? | Extra CSS classes appended to the <button>. | |
| ChildContent | RenderFragment? | Typically an Icon followed by a <span> label. | |
| AdditionalAttributes | Dictionary<string, object>? | Captured unmatched attributes, forwarded to the <button>. |
SidebarMenuBadge
Small inline badge pinned to the right of a SidebarMenuItem (e.g. unread counts). Hidden when the sidebar collapses to icon mode.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the badge container. | |
| ChildContent | RenderFragment? | Badge content — typically a short number or string. | |
| AdditionalAttributes | Dictionary<string, object>? | Captured unmatched attributes, forwarded to the badge container. |
SidebarMenuAction
Icon-only button pinned to the right of a SidebarMenuItem. Optionally shown only on hover via ShowOnHover.
| Property | Type | Required | Description |
|---|---|---|---|
| ShowOnHover | bool | When true, the action is opacity-0 until the menu item is hovered or focused. Default: false. | |
| OnClicked | EventCallback | Fires when the action button is clicked. | |
| ClassName | string? | Extra CSS classes appended to the button. | |
| ChildContent | RenderFragment? | Button content — typically an Icon. | |
| AdditionalAttributes | Dictionary<string, object>? | Captured unmatched attributes, forwarded to the <button>. |
SidebarMenuSub
Nested <ul> rendered beneath a SidebarMenuItem to hold second-level navigation. Hidden when the sidebar collapses to icon mode.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the sub-menu <ul>. | |
| ChildContent | RenderFragment? | One or more SidebarMenuSubItems. | |
| AdditionalAttributes | Dictionary<string, object>? | Captured unmatched attributes, forwarded to the <ul>. |
SidebarMenuSubItem
<li> row inside a SidebarMenuSub, hosting a single SidebarMenuSubButton.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the <li>. | |
| ChildContent | RenderFragment? | A single SidebarMenuSubButton. | |
| AdditionalAttributes | Dictionary<string, object>? | Captured unmatched attributes, forwarded to the <li>. |
SidebarMenuSubButton
Clickable navigation link inside a SidebarMenuSubItem. Renders as an <a> so Href drives actual navigation.
| Property | Type | Required | Description |
|---|---|---|---|
| Href | string? | The target URL for the link. | |
| IsActive | bool | When true, paints the link with the active colour. Default: false. | |
| Size | SidebarMenuSubButtonSize | Size token. Default: SidebarMenuSubButtonSize.Md. Other value: Sm (smaller text). | |
| ClassName | string? | Extra CSS classes appended to the <a> element. | |
| ChildContent | RenderFragment? | Link content — typically a label string, optionally with a leading Icon. | |
| AdditionalAttributes | Dictionary<string, object>? | Captured unmatched attributes, forwarded to the <a> element. |
SidebarMenuSkeleton
Loading placeholder styled to match a SidebarMenuItem. Each instance picks a random width between 50% and 90% for visual variety.
| Property | Type | Required | Description |
|---|---|---|---|
| ShowIcon | bool | When true, also renders a small square Skeleton in the icon slot. Default: false. | |
| ClassName | string? | Extra CSS classes appended to the skeleton row. | |
| AdditionalAttributes | Dictionary<string, object>? | Captured unmatched attributes, forwarded to the skeleton row. |