--- title: SidebarFrame description: Build desktop sidebar navigation that moves into a mobile drawer. package: moraine version: 0.6.0 repository: https://github.com/subframe7536/moraine --- # SidebarFrame > Build desktop sidebar navigation that moves into a mobile drawer. `SidebarFrame` is both the state provider and desktop layout root. `SidebarFrame.Sidebar` renders inline on desktop and automatically moves its content into a mobile Sheet on smaller viewports. ## Basic usage ```tsx import { SidebarFrame } from 'moraine' export function Example() { return ( Navigation Home Settings Content ) } ``` ## Anatomy ```text SidebarFrame [component; slot=root] ├── SidebarFrame.Sidebar [part; slot=sidebar] │ ├── SidebarFrame.SidebarHeader [part; slot=sidebarHeader] │ ├── SidebarFrame.SidebarBody [part; slot=sidebarBody] │ │ └── SidebarFrame.Menu [part; slot=menu] │ │ ├── SidebarFrame.Label [part; slot=label] │ │ ├── SidebarFrame.Item [part; slot=item] │ │ │ ├── itemLeading [slot] │ │ │ ├── itemLabel [slot] │ │ │ ├── itemTrailing [slot] │ │ │ └── itemActions [slot] │ │ └── SidebarFrame.Submenu [part; slot=submenu] │ │ ├── SidebarFrame.SubmenuTrigger [part; slot=submenuTrigger] │ │ └── SidebarFrame.SubmenuContent [part; slot=submenuContent] │ └── SidebarFrame.SidebarFooter [part; slot=sidebarFooter] ├── SidebarFrame.Main [part; slot=main] └── SidebarFrame.Trigger [part] ``` Trigger can appear anywhere inside the root. On mobile, Sidebar renders its regions inside an internal Sheet. ## Navigation menu layer `SidebarFrame` provides structured menu primitives to build desktop and mobile navigation menus: - `SidebarFrame.Menu`: Section container for a labeled group of navigation items. - `SidebarFrame.Label`: Section title with polymorphic tag support (`as="h2"`, `'span'`, etc.). - `SidebarFrame.Item`: Polymorphic navigation trigger (`
Active Services
24 / 24
Global Uptime
99.98%
Avg Latency
42 ms
Recent Deployments Auto-synced
{(item) => (
{item.name} {item.env}
{item.status} {item.time}
)}
) } ``` ## Examples ### Collapsible sub-navigation Compose `SidebarFrame.Submenu` inside `SidebarFrame.SidebarBody` for multi-level navigation. Use `SubmenuTrigger` for disclosure and a separate `Item` with `href` when the parent label is also a link. ```tsx import { Badge, Breadcrumb, Button, Icon, Separator, SidebarFrame } from 'moraine' import { For, createSignal } from 'solid-js' export function CollapsibleGroups() { const [activePage, setActivePage] = createSignal('Pages and Layouts') const breadcrumbItems = () => [ { label: 'Documentation', href: '#' }, { label: 'Application Architecture', href: '#' }, { label: activePage() }, ] return (
Framework Docs
v3.0 Overview setActivePage('Getting Started')} > Getting Started setActivePage('Quickstart')} > Quickstart Architecture Routing {(item) => ( setActivePage(item)} > {item} )} Data Fetching {(item) => ( setActivePage(item)} > {item} )} SolidJS v1.9 Ecosystem
Architecture / Routing

{activePage()}

Learn how nested layouts and leaf pages compose seamlessly in modern file-based routers without unnecessary re-renders.

// Example page component definition
export default function{' '} Page() {'{'}
return{' '} {'

Welcome to '} {activePage()} {'

'}
{'}'}
) } ``` ### Side and Variant Using `side="right"` and `variant="inset"` to build an inspector and properties panel alongside a main document or canvas workspace. ```tsx import { Avatar, Badge, Button, Icon, Separator, SidebarFrame } from 'moraine' import { For } from 'solid-js' export function SideAndVariantUsage() { const reviewers = [ { name: 'Sarah C.', approved: true }, { name: 'David M.', approved: true }, { name: 'Kenji S.', approved: false }, ] const tags = ['Architecture', 'RFC', 'High Priority', 'v4.2'] return (
Document Inspector
Review Status
In Review (2/3)
Document Owner
Elena Rostova
Design Reviewers
{(reviewer) => (
{reviewer.name}
)}
Tags & Milestones
{(tag) => ( {tag} )}
RFC-104 Updated 14 minutes ago
SHA: 8f42c90

Unified Distributed Cache Architecture

Proposed multi-region cache synchronization protocol for sub-millisecond edge reads and automated cache invalidation upon ledger updates.

Verification Requirements
  • Under 5ms replication latency across tier-1 regional zones
  • Zero cache poisoning on concurrent write split-brain failover
  • Linear scaling up to 100,000 requests per node per second
Author: elena.rostova@distributed.io Target: v4.2-LTS
) } ``` ### Header and footer slots Compose compound header and footer slots with `DropdownMenu` to provide an interactive team/workspace switcher and account profile menu. ```tsx import { Avatar, Badge, Button, DropdownMenu, Icon, SidebarFrame } from 'moraine' import { For, createSignal } from 'solid-js' export function HeaderFooterSlots() { const [currentTeam, setCurrentTeam] = createSignal('Acme Corp') const [currentProject, setCurrentProject] = createSignal('Core Engine v2') const teamItems = [ { label: 'Acme Corp', icon: 'i-lucide:building-2', onSelect: () => setCurrentTeam('Acme Corp'), }, { label: 'Acme Labs', icon: 'i-lucide:flask-conical', onSelect: () => setCurrentTeam('Acme Labs'), }, { label: 'Personal Space', icon: 'i-lucide:user', onSelect: () => setCurrentTeam('Personal Space'), }, { type: 'separator' as const }, { label: 'Add Workspace', icon: 'i-lucide:plus', onSelect: () => {}, }, ] const userItems = [ { label: 'Account Settings', icon: 'i-lucide:settings' }, { label: 'Billing & Invoices', icon: 'i-lucide:credit-card' }, { label: 'Notifications', icon: 'i-lucide:bell' }, { type: 'separator' as const }, { label: 'Log out', icon: 'i-lucide:log-out', variant: 'destructive' as const }, ] const projects = [ { name: 'Core Engine v2', role: 'Architecture Lead', icon: 'i-lucide:cpu', branch: 'main' }, { name: 'Design System', role: 'Core Maintainer', icon: 'i-lucide:palette', branch: 'release/v3', }, { name: 'Customer Portal', role: 'Reviewer', icon: 'i-lucide:layout-template', branch: 'feature/auth', }, { name: 'Analytics Pipeline', role: 'Contributor', icon: 'i-lucide:bar-chart-2', branch: 'trunk', }, ] return (
{/* Header slot: Team Switcher Dropdown */}
{currentTeam()} Enterprise Tier
{/* Body slot: Projects list */} Active Projects {projects.length} {(proj) => ( setCurrentProject(proj.name)} > {proj.name} )} {/* Footer slot: User Profile Dropdown */}
Sarah Connor sarah@acme.com

{currentProject()}

Active Repository

Real-time pipeline orchestration and workload routing system. Synchronized across production worker fleets.

Current Branch
main
Open Pull Requests
4 ready for merge
Workspace: {currentTeam()} Last synced: just now
) } ``` ### Custom Frame Embed `SidebarFrame` beneath an application-level global topbar containing brand identification, project pickers, and global alerts. ```tsx import { Avatar, Badge, Button, Icon, SidebarFrame } from 'moraine' import { For } from 'solid-js' export function FrameRender() { const cloudNav = [ { label: 'Kubernetes Clusters', icon: 'i-lucide:server', active: true }, { label: 'Serverless Functions', icon: 'i-lucide:zap' }, { label: 'Edge Storage', icon: 'i-lucide:database' }, { label: 'Virtual Networks', icon: 'i-lucide:network' }, { label: 'IAM & Security', icon: 'i-lucide:shield-check' }, { label: 'Metrics & Observability', icon: 'i-lucide:activity' }, ] const clusters = [ { name: 'k8s-prod-primary', nodes: '48 nodes', region: 'us-east-1', health: 'Healthy' }, { name: 'ingress-edge-mesh', nodes: '16 nodes', region: 'global-anycast', health: 'Healthy' }, { name: 'db-replica-pool', nodes: '24 nodes', region: 'eu-west-1', health: 'Degraded' }, ] return (
{/* Global Topbar outside the SidebarFrame */}
HyperScale Cloud
{/* Embedded SidebarFrame taking remaining height */} Infrastructure {(item) => ( {item.label} )} Region: us-east-1

Active Kubernetes Clusters

Manage and observe distributed workload clusters

Total CPU Allocation
74%
Cluster Memory Pool
61%
Network Ingress
1.4 Gbps
{(cluster) => (
{cluster.name}
{cluster.nodes} • {cluster.region}
{cluster.health}
)}
) } ``` ### Mobile Sheet and desktop Resizable Combine `SidebarFrame` with the `Resizable` primitive to provide interactive panel sizing on desktop while automatically falling back to an accessible mobile Sheet on compact viewports. ```tsx import { Button, Icon, Resizable, SidebarFrame, useSidebarFrame } from 'moraine' import { For, Show } from 'solid-js' function FileExplorerContent() { const files = [ { name: 'src', type: 'folder-open', level: 0 }, { name: 'components', type: 'folder', level: 1 }, { name: 'navigation', type: 'folder-open', level: 1 }, { name: 'sidebar-frame.tsx', type: 'file-code', level: 2, active: true }, { name: 'sidebar-frame.recipe.ts', type: 'file-code', level: 2 }, { name: 'index.ts', type: 'file-code', level: 1 }, { name: 'package.json', type: 'file-json', level: 0 }, { name: 'README.md', type: 'file-text', level: 0 }, ] const getIcon = (type: string) => { switch (type) { case 'folder': return 'i-lucide:folder' case 'folder-open': return 'i-lucide:folder-open' case 'file-json': return 'i-lucide:file-json' case 'file-text': return 'i-lucide:file-text' default: return 'i-lucide:file-code' } } return ( <> Explorer: Moraine
{(file) => (
{file.name}
)} ) } function EditorContent() { return ( {/* Tab bar */}
sidebar-frame.tsx
index.ts
{/* Editor code area */}
// Moraine Responsive SidebarFrame Primitive
export function{' '} SidebarFrame (props: SidebarFrameProps) {'{'}
const [local, rest] ={' '} splitProps (props, ['variant', 'side', 'isMobile'])
const resolved ={' '} createStyles (sidebarFrameRecipe, local)
return (
{''}
{'
'}
{'{local.children}'}
{'
'}
{''}
)
{'}'}
{/* Status Bar */}
main* 0 errors, 0 warnings
TypeScript 5.8 UTF-8 Ln 12, Col 24
) } function ResizableLayout() { const frame = useSidebarFrame() return ( {(state) => ( )} } > ) } export function SheetResizableRender() { return (
) } ``` ### Forced mobile mode Force `isMobile` mode to demonstrate touch-first layouts, quick action cards, and slide-over navigation drawers on compact screens. ```tsx import { Avatar, Badge, Button, Icon, SidebarFrame } from 'moraine' import { For, Show } from 'solid-js' export function ForcedMobile() { const mobileNav = [ { label: 'Overview', icon: 'i-lucide:home', active: true }, { label: 'Cards & Wallets', icon: 'i-lucide:credit-card', badge: '3' }, { label: 'Transfers & Payments', icon: 'i-lucide:arrow-left-right' }, { label: 'Analytics & Insights', icon: 'i-lucide:pie-chart' }, { label: 'Security & Limits', icon: 'i-lucide:shield-check' }, { label: 'Customer Support', icon: 'i-lucide:message-square' }, ] const transactions = [ { name: 'Stripe Payout', type: 'Deposit', amount: '+$3,450.00', positive: true }, { name: 'Figma Subscription', type: 'Software', amount: '-$15.00', positive: false }, { name: 'Coffee Roasters', type: 'Food & Dining', amount: '-$6.25', positive: false }, ] return (
PocketPay
v1.8
Navigation
{(item) => (
{item.label}
{item.badge} )}
Marcus Lee Premier Account
{/* Mobile Shell Header */}
PocketPay
{/* Mobile Screen Body */}
{/* Balance Card */}
Available Balance
$24,580.45
+12.4% from last month
{/* Quick Actions */}
{/* Recent Activity */}
Recent Transactions
{(tx) => (
{tx.name}
{tx.type}
{tx.amount}
)}
) } ``` ## Attributes | Attributes | Slot | Description | | --- | --- | --- | | `data-mobile` | `sidebar-frame`, `sidebar-frame-sidebar`, `sidebar-frame-item` | Present on the mobile rendering path. | | `data-side` | `sidebar-frame`, `sidebar-frame-sidebar` | Stores the resolved floating or drawer content side. | | `data-variant` | `sidebar-frame`, `sidebar-frame-sidebar` | Stores the resolved visual variant. | | `data-closed` | `sidebar-frame-sidebar`, `sidebar-frame-trigger` | Present when disclosure or transition content is closed. | | `data-expanded` | `sidebar-frame-sidebar`, `sidebar-frame-item-trailing` | Present when the panel, accordion, or menu is expanded. | | `data-disabled` | `sidebar-frame-item`, `sidebar-frame-trigger` | Present when the component, slot, or item is disabled. | | `data-open` | `sidebar-frame-trigger` | Present when the disclosure, popover, or overlay is open. | | `data-active` | `sidebar-frame-item` | Present when the item or trigger is active. | | `data-with-actions` | `sidebar-frame-item` | — | ## Props ### SidebarFrame | Prop | Type | Default | Description | | --- | --- | --- | --- | | breakpoint | number \| undefined | 768 | Max viewport width in pixels that counts as mobile.
Used as `(max-width: ${breakpoint}px)` when `isMobile` is omitted. | | defaultOpen | boolean \| undefined | true | Default open state on desktop. | | isMobile | boolean \| undefined | — | Controlled mobile mode. When omitted, `matchMedia` uses `breakpoint`. | | onOpenChange | ((open: boolean) => void) \| undefined | — | Callback invoked when desktop open state changes. | | open | boolean \| undefined | — | Controlled open state on desktop. | | scrollThreshold | number \| undefined | 60 | Main scroll offset that changes `scrolled` to true. | | side | 'left' \| 'right' \| undefined | 'left' | Side occupied by the sidebar. | | sidebarId | string \| undefined | — | Stable identifier used for associating Trigger `aria-controls` with Sidebar. | | variant | 'default' \| 'floating' \| 'inset' \| undefined | 'default' | — | | children | JSX.Element \| undefined | — | — | | class | SlotClassValue \| undefined | — | Class applied to the component root or trigger element. | | classes | Classes \| undefined | — | Family slot class defaults for this instance. | | style | SlotStyleValue \| undefined | — | Style applied to the component root or trigger element. | | styles | Styles \| undefined | — | Family slot style defaults for this instance. | ### SidebarFrame.Sidebar | Prop | Type | Default | Description | | --- | --- | --- | --- | | ariaLabel | string \| undefined | 'Sidebar navigation' | Accessible name for the mobile navigation Sheet. Native aria-label takes precedence;
title is used when neither native aria-label nor this prop is provided. | | as | T \| undefined | 'aside' | — | | children | JSX.Element \| undefined | — | — | | class | SlotClassValue \| undefined | — | Class applied to the component root or trigger element. | | style | SlotStyleValue \| undefined | — | Style applied to the component root or trigger element. | ### SidebarFrame.SidebarHeader | Prop | Type | Default | Description | | --- | --- | --- | --- | | children | JSX.Element \| undefined | — | — | | class | SlotClassValue \| undefined | — | Class applied to the component root or trigger element. | | style | SlotStyleValue \| undefined | — | Style applied to the component root or trigger element. | ### SidebarFrame.SidebarBody | Prop | Type | Default | Description | | --- | --- | --- | --- | | children | JSX.Element \| undefined | — | — | | class | SlotClassValue \| undefined | — | Class applied to the component root or trigger element. | | style | SlotStyleValue \| undefined | — | Style applied to the component root or trigger element. | ### SidebarFrame.SidebarFooter | Prop | Type | Default | Description | | --- | --- | --- | --- | | children | JSX.Element \| undefined | — | — | | class | SlotClassValue \| undefined | — | Class applied to the component root or trigger element. | | style | SlotStyleValue \| undefined | — | Style applied to the component root or trigger element. | ### SidebarFrame.Main | Prop | Type | Default | Description | | --- | --- | --- | --- | | onScroll | JSX.EventHandlerUnion \| undefined | — | — | | as | T \| undefined | 'div' | — | | children | JSX.Element \| undefined | — | — | | class | SlotClassValue \| undefined | — | Class applied to the component root or trigger element. | | style | SlotStyleValue \| undefined | — | Style applied to the component root or trigger element. | ### SidebarFrame.Trigger | Prop | Type | Default | Description | | --- | --- | --- | --- | | disabled | boolean \| undefined | — | Whether this trigger is disabled. | | ref | Ref \| undefined | — | — | | as | T \| undefined | 'button' | Element or component to render as. | | children | JSX.Element \| undefined | — | Trigger label and visual content. | | class | SlotClassValue \| undefined | — | Class applied to the component root or trigger element. | | style | SlotStyleValue \| undefined | — | Style applied to the component root or trigger element. | ### SidebarFrame.Menu | Prop | Type | Default | Description | | --- | --- | --- | --- | | children | JSX.Element \| undefined | — | — | | class | SlotClassValue \| undefined | — | Class applied to the component root or trigger element. | | style | SlotStyleValue \| undefined | — | Style applied to the component root or trigger element. | ### SidebarFrame.Label | Prop | Type | Default | Description | | --- | --- | --- | --- | | as | T \| undefined | 'div' | — | | children | JSX.Element \| undefined | — | — | | class | SlotClassValue \| undefined | — | Class applied to the component root or trigger element. | | style | SlotStyleValue \| undefined | — | Style applied to the component root or trigger element. | ### SidebarFrame.Item | Prop | Type | Default | Description | | --- | --- | --- | --- | | actions | JSX.Element \| undefined | — | Trailing actions (e.g. action buttons or dropdown menu) rendered alongside the item. | | closeOnSelect | boolean \| undefined | — | Whether activating this item on mobile closes the sheet.
When omitted, items with `href` close the sheet. | | disabled | boolean \| undefined | — | Whether this trigger is disabled. | | href | string \| undefined | — | — | | isActive | boolean \| undefined | — | — | | leading | IconT.Name \| undefined | — | — | | ref | Ref \| undefined | — | — | | trailing | IconT.Name \| undefined | — | — | | as | T \| undefined | 'button' | Element or component to render as. | | children | JSX.Element \| undefined | — | Trigger label and visual content. | | class | SlotClassValue \| undefined | — | Class applied to the component root or trigger element. | | style | SlotStyleValue \| undefined | — | Style applied to the component root or trigger element. | ### SidebarFrame.Submenu | Prop | Type | Default | Description | | --- | --- | --- | --- | | defaultOpen | boolean \| undefined | — | — | | disabled | boolean \| undefined | — | — | | onOpenChange | ((open: boolean) => void) \| undefined | — | — | | open | boolean \| undefined | — | — | | transition | boolean \| undefined | — | — | | unmountOnHide | boolean \| undefined | — | — | | children | JSX.Element \| undefined | — | — | | class | SlotClassValue \| undefined | — | Class applied to the component root or trigger element. | | style | SlotStyleValue \| undefined | — | Style applied to the component root or trigger element. | ### SidebarFrame.SubmenuTrigger | Prop | Type | Default | Description | | --- | --- | --- | --- | | disabled | boolean \| undefined | — | Whether this trigger is disabled. | | leading | IconT.Name \| undefined | — | — | | ref | Ref \| undefined | — | — | | trailing | IconT.Name \| undefined | — | — | | as | T \| undefined | 'button' | Element or component to render as. | | children | JSX.Element \| undefined | — | Trigger label and visual content. | | class | SlotClassValue \| undefined | — | Class applied to the component root or trigger element. | | style | SlotStyleValue \| undefined | — | Style applied to the component root or trigger element. | ### SidebarFrame.SubmenuContent | Prop | Type | Default | Description | | --- | --- | --- | --- | | children | JSX.Element \| undefined | — | — | | class | SlotClassValue \| undefined | — | Class applied to the component root or trigger element. | | style | SlotStyleValue \| undefined | — | Style applied to the component root or trigger element. |