Basic
Wrap the sidebar and main content in a provider so triggers, rails, and menu state share one context.
Icons
Icons by @ng-icons/tabler-icons
The component library does not provide icons.
Component Blueprint
Sidebar
Composable application sidebars with provider state, variants, collapsible modes, menu primitives, rail, trigger, skeletons, and RTL support.
02 Usage
TS
import { FrSidebarModule } from '@frame-ui-ng/components/sidebar';HTML
<div frSidebarProvider>
<aside frSidebar>
<div frSidebarHeader>
<a frSidebarMenuButton size="lg" href="#">
<span>Atlas Studio</span>
</a>
</div>
<div frSidebarContent>
<div frSidebarGroup>
<div frSidebarGroupLabel>Workspace</div>
<div frSidebarGroupContent>
<ul frSidebarMenu>
<li frSidebarMenuItem>
<a frSidebarMenuButton active href="#">
<span>Dashboard</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div frSidebarFooter>
<a frSidebarMenuButton variant="outline" href="#">
<span>Settings</span>
</a>
</div>
<div frSidebarRail></div>
</aside>
<main frSidebarInset>
<button frSidebarTrigger type="button">Toggle sidebar</button>
</main>
</div>03 Examples
Icon Collapse
Use collapsible="icon" when the collapsed state should keep the sidebar rail visible for icon navigation.
Scrollable Content
Give the provider a bounded height. The sidebar keeps its header and footer fixed while FrSidebarContent owns vertical scrolling.
Resizable Bounds
Set minSize and maxSize to clamp rail resizing. Without minSize, the sidebar measures its widest content and keeps that width readable.
Disable Rail Resize
Set resizable to false when the sidebar should keep a fixed width. The rail remains part of the layout but no longer starts drag resizing.
Variants
Use sidebar, floating, or inset variants depending on whether the panel should feel attached or card-like.
Menu Composition
Compose menu buttons with badges, actions, and nested submenus for richer app navigation.
Controlled
Bind the provider open input and listen for openChange when parent state should own expansion.
Skeleton
Use menu skeleton rows while navigation data is loading or permissions are being resolved.
Right Side
Set side="right" for secondary panels, inspectors, or workflows that should attach to the opposite edge.
RTL
Use logical properties and side placement to support right-to-left application shells.
04 Custom Styling
Override sidebar tokens on the provider, sidebar, or any ancestor to tune width, surfaces, borders, active states, radius, and motion.
05 Token Inspector
Hover the provider, sidebar, header, content, menu, active button, badge, rail, or inset to inspect the tokens used by the composed shell.
06 Design Tokens
Use these CSS custom properties to tune sidebar width, surfaces, text, borders, active states, menu rhythm, shadows, motion, and mobile layering.
SCSS
--frame-sidebar-width: 16rem;
--frame-sidebar-width-icon: 3.5rem;
--frame-sidebar-width-mobile: 18rem;
--frame-sidebar-bg: var(--frame-background);
--frame-sidebar-color: var(--frame-foreground);
--frame-sidebar-muted-color: var(--frame-muted-foreground);
--frame-sidebar-border: var(--frame-border);
--frame-sidebar-accent: var(--frame-accent);
--frame-sidebar-accent-color: var(--frame-accent-foreground);
--frame-sidebar-primary: var(--frame-primary);
--frame-sidebar-primary-color: var(--frame-primary-foreground);
--frame-sidebar-ring: var(--frame-ring);
--frame-sidebar-radius: var(--frame-radius-lg);
--frame-sidebar-margin: 0.5rem;
--frame-sidebar-padding: 0.5rem;
--frame-sidebar-gap: 0.5rem;
--frame-sidebar-menu-button-height: 2rem;
--frame-sidebar-menu-button-radius: var(--frame-radius-md);
--frame-sidebar-shadow: 0 20px 60px rgb(0 0 0 / 0.12);
--frame-sidebar-transition-duration: 200ms;
--frame-sidebar-z-index: 40;
--frame-sidebar-mobile-backdrop: rgb(0 0 0 / 0.42);