Developer guideApp development

Adaptive layouts

Use breakpoints and adaptive containers so one UI works on every screen.

AbstractKit containers reflow at the same breakpoints the shell uses. Prefer them over checking the form factor directly.

Breakpoint	Width	Typical layout
`compact`	under 600 px	Single column, bottom navigation
`medium`	600–1200 px	Sidebar collapses to an overlay
`expanded`	over 1200 px	Persistent sidebar and detail pane

Rendering diagram

A SplitView collapsing on compact screens

window.ui

<object class="AkSplitView">
  <property name="collapse-below">compact</property>
  <child type="sidebar">
    <object class="AkNavList" id="nav"/>
  </child>
  <child type="content">
    <object class="AkStack" id="pages"/>
  </child>
</object>

Last updated September 30, 2026Edit this page on GitLab

Search documentation