Layout

AppShell

Application frame for docs, dashboards, and CMS tools, with responsive navigation beside the main content plane.

Main plane

Use the same frame for documentation, admin screens, and CMS tools.

View code

<AppShell mode="embedded" railWidth="sm" gap="md">
  <Sidebar slot="sidebar" label="Navigation" collapsible="true" open="true">
    <SidebarHeader slot="header"><strong>Foundry</strong></SidebarHeader>
    <SidebarSection title="Workspace">
      <SidebarItem href="/components/app-shell" active="true">Overview</SidebarItem>
      <SidebarItem href="/components/sidebar">Sidebar</SidebarItem>
      <SidebarItem href="/blocks/dashboard-01">Dashboard</SidebarItem>
    </SidebarSection>
  </Sidebar>
  <section class="ax-layout-main"><Card title="Main plane">...</Card></section>
</AppShell>

Installation

cargo ax add ui

Manual setup

[dependencies]
axonyx-ui = "0.0.80"

use "@axonyx/ui"

Layout contract

The named sidebar slot supplies the rail, and the default slot supplies the content plane. Rail width accepts small, medium, or large. Gap controls spacing between the planes.

Embedded mode removes the full-viewport minimum height for previews. Omit embedded mode in a full-screen app. A layout without a rail can use rail set to none. A right-hand rail is not supported by this CSS version.

import { AppShell } from "@axonyx/ui/foundry/AppShell.asx"
import { Sidebar } from "@axonyx/ui/foundry/Sidebar.asx"
import { SidebarHeader } from "@axonyx/ui/foundry/SidebarHeader.asx"
import { SidebarSection } from "@axonyx/ui/foundry/SidebarSection.asx"
import { SidebarItem } from "@axonyx/ui/foundry/SidebarItem.asx"

<div class="ax-app-shell" data-rail="left" data-rail-width="sm" data-gap="md" data-mode="embedded">
  <aside class="ax-layout-sidebar">...</aside>
  <section class="ax-layout-main">...</section>
</div>