App shell
stable 2.8 kB<hk-app-shell>Header, navigation rail and content frame with the responsive rule built in — below the breakpoint the rail overlays the content instead of squeezing it.
#shell#layout
Live demo
Running in this page — interact with it.
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| navOpen | boolean | true | Rail visibility. Two-way bindable. |
| overlayBelow | string | 'lg' | Breakpoint under which the rail overlays rather than pushes. |
| navWidth | string | '13rem' | Expanded rail width. |
Outputs
navOpenChangeEventEmitter<boolean>Emits on toggle.
Keyboard
- Escape Closes the overlay rail on small screens
Theming
Component tokens, each falling back to a global one:
| Property | Default | Controls |
|---|---|---|
| --hk-shell-header-h | 3.5rem | Header height. |
| --hk-shell-nav-w | 13rem | Rail width. |
| --hk-shell-bg | #ffffff | Content background. |
Accessibility
- Emits real landmarks — banner, navigation, main — so screen-reader users can jump between regions.
- While the rail overlays, focus is trapped inside it and Escape closes it.