AppHeader
Sticky top bar with backdrop blur — Brand, Nav, Actions slots
SSR mode
Examples
Default
Blok Blazor
Borderless, no background fill, gutters off
Minimal
API
The element family below can be composed together. Click an element to jump to its properties.
| Element | Purpose |
|---|---|
| AppHeader | Sticky top bar with backdrop-blurred background. Designed to sit at the top of an app shell. Three slots — Brand on the left, Nav in the centre-left, Actions on the right (auto-aligned via ml-auto). Wrapper-styling. |
AppHeader
Sticky top bar with backdrop-blurred background. Designed to sit at the top of an app shell. Three slots — Brand on the left, Nav in the centre-left, Actions on the right (auto-aligned via ml-auto). Wrapper-styling.
| Property | Type | Required | Description |
|---|---|---|---|
| Brand | RenderFragment? | Left-most slot. Typically holds an AppBrand chunk or a logo + product-name link. | |
| Nav | RenderFragment? | Top-level navigation slot. Typically holds a row of <a>/<NavLink> elements. | |
| Actions | RenderFragment? | Right-aligned slot for sign-in / theme-toggle / settings buttons. | |
| Sticky | bool | When true (default), the header sticks to the top of the scrolling viewport via sticky top-0 z-40. Set to false for headers that scroll with content. | |
| Borders | bool | Toggles border-b border-border. Default: true. | |
| BgFilled | bool | Toggles bg-background/95 backdrop-blur on the band. Default: true. | |
| Gutters | bool | Toggles h-14 px-6 gap-4 on the content row. Default: true. When false, the band collapses to its content height with no horizontal padding. | |
| HeaderAlignment | Alignment | Flex items-* on the content row. Default: Alignment.Center. Other values: Start, End, Stretch. Shared Alignment enum. |