Layout

Sidebar

Compose a navigation rail from header, sections, active links, and footer. The same markup works for docs and dashboard screens.

Try dashboard block

Main plane

Build the application frame from package components, not a page-specific Sidebar imitation.

View code

<AppShell mode="embedded" railWidth="sm">
  <Sidebar slot="sidebar" label="Navigation" collapsible="true" open="true">
    <SidebarHeader slot="header"><strong>Foundry</strong></SidebarHeader>
    <SidebarSection title="Workspace">
      <SidebarItem href="/components/sidebar" active="true">Overview</SidebarItem>
      <SidebarItem href="/blocks/dashboard-01" meta="03">Blocks</SidebarItem>
      <SidebarItem href="/themes">Themes</SidebarItem>
    </SidebarSection>
    <SidebarFooter slot="footer">Axonyx UI</SidebarFooter>
  </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"

Composition contract

Import Sidebar, SidebarHeader, SidebarSection, SidebarItem, and SidebarFooter from their matching package files. The header and footer use named slots; sections and links use the default slot.

On mobile, collapsible adds a toggle and open sets its initial state. An active item is highlighted. Desktop icon-only collapse and controlled state are not part of this 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"
import { SidebarFooter } from "@axonyx/ui/foundry/SidebarFooter.asx"

<aside class="ax-layout-sidebar" data-collapsible="true" data-open="true">
  <header class="ax-layout-sidebar__header">Foundry</header>
  <div class="ax-layout-sidebar__content">...</div>
  <footer class="ax-layout-sidebar__footer">Axonyx UI</footer>
</aside>