The frame of an application page: a header, navigation down one side, the main area, an optional aside and a status bar, each scrolling on its own inside the height it is given. It adds a skip control and F6 between the regions and panels, and holds no state.
Example
Header, sidebar, two panels, an aside and a status barSource
Below 48rem of its own width the aside drops under the main area and shares the height with it, and a hui-sidebar in the navigation slot becomes a sheet, closed on load, which a header button opens with toggle().
<hui-panelslot="aside"heading="Details"inset><pstyle="margin:0">Select a file.</p></hui-panel>
<footerslot="footer">14 items</footer>
</hui-app-shell>
API
Attributes1
Attributes
Name
Type
Default
Description
skip-label
string
"Skip to main content"
The skip control’s text.
Properties1
Properties
Name
Type
Default
Description
main
HTMLElement | null
-
Read-only. The main area’s element: the first element in the default slot.
Methods2
Methods
Name
Type
Description
regions()
HTMLElement[]
The stops F6 visits, in order: header, navigation, each panel in the main area and the aside (or the area itself when it has none), status bar. Hidden ones are skipped.
focusRegion(region)
void
Moves focus into a region: a panel’s first control, a region’s first control, or the region itself.
Slots5
Slots
Name
Description
header
The application bar, spanning the top. Styled as a bordered row with its content centred on one line.
nav
Navigation down the start side - usually a hui-sidebar, which handles its own rail and sheet.
(default)
The main area. Its element takes the full height and should manage its own scrolling, as hui-panels do.
aside
An optional pane on the end side, --hui-app-shell-aside wide; below 48rem it drops under the main area.
footer
A status bar along the bottom: small, muted text on one line.
CSS custom properties2
CSS custom properties
Name
Default
Description
--hui-app-shell-height
100dvh
The shell’s height. The viewport by default, for a page that is the application.
--hui-app-shell-aside
18rem
The aside’s width.
::part() hooks7
::part() hooks
Name
Description
skip
The skip control, off screen until it has focus.
frame
The grid that lays out the regions.
header
The header region.
nav
The navigation region.
main
The main region.
aside
The aside region; hidden when nothing is slotted.
footer
The status bar region; hidden when nothing is slotted.
States
Moving between panes with F6
F6 moves focus to the next region - the header, the navigation, each hui-panel in the main area and the aside, the status bar - and Shift+F6 to the previous, as the panes of a desktop application do. A panel is entered at its first control, not its header actions; a region with nothing focusable is focused itself. The skip control, first in the tab order, lands in the main area the same way.
<hui-panelheading="Reading"insetstyle="flex:2;border-inline-start:1px solid var(--hui-border)"><pstyle="margin:0">Press F6 to move here.</p></hui-panel>
</main>
<footerslot="footer">F6 moves between panes</footer>
</hui-app-shell>
Server-side mechanics
Nothing is owned here. The regions are the host’s elements in named slots, so HTMX can swap any one of them - the main area on a navigation, the status bar out of band - and the shell lays out whatever arrives. It stores nothing and announces nothing. What the regions hold - the sidebar’s state, a panel’s content - is governed by those elements’ own contracts.
Accessibility
The host writes the landmarks - <header>, a hui-sidebar or <nav>, <main>, <aside>, <footer> - so a screen reader lists them as the page’s own; the shell adds no roles of its own.
The skip control is a button rather than a link, because Safari leaves links out of Tab unless the reader turns them on.
F6 is the pane key of desktop applications and browsers; the shell handles it only when focus is inside it.
Keyboard
Keyboard
Keys
Action
Tab
The skip control is the first stop; Enter or Space on it moves focus into the main area.
F6
The next region or panel.
Shift + F6
The previous region or panel.
Gotchas
The shell is the height it is given: the viewport by default. Inside a page with other content, set --hui-app-shell-height.
The main area hands its element the full height. Content that should scroll belongs in a hui-panel, or in an element with its own overflow; otherwise the main area scrolls as a whole.
F6 is also a browser shortcut for moving between the address bar and the page. The shell takes it only while focus is inside the shell.
