Sidebar
Persistent application-shell navigation with icon collapse, responsive offcanvas behavior and complete content ownership.
GET STARTED
Import
Import only the shell primitives you use from the granular Sidebar entry point.
Application shell
The Sidebar owns layout and collapse state. PanelMenu owns the navigation tree, so both components remain focused and independently reusable. Collapse the shell, then activate a rail icon to open its accessible child-menu flyout.
Hover-expand icon rail
Desktop icon rails can expand temporarily after a controlled pointer delay. The persisted open model stays unchanged, and keyboard focus prevents focused content from collapsing underneath the user. Hover the rail below.
Shell variants
Sidebar shares an edge, floating adds exterior breathing room, and inset creates a softer embedded shell. These variants do not change behavior or content APIs.
sidebar
floating
inset
Responsive offcanvas
Below the configured breakpoint, the same navigation becomes offcanvas. The trigger remains connected through native ARIA state without owning the menu implementation.
Content composition
NeuralMenu and NeuralPanelMenu can share one Sidebar. Both adopt the same width, icon-rail alignment, hover expansion and responsive collapse state; PanelMenu keeps ownership of its hierarchical flyouts.
Unstyled and typed slots
Structural layout, responsive state and accessibility remain while consumer classes own every visible surface.
Component boundaries
Use Sidebar for persistent application navigation. Use Drawer for a transient panel containing arbitrary tasks. Use PanelMenu for an inline hierarchical menu, whether or not it lives inside a Sidebar.
SIDEBAR
Accessibility
A named navigation landmark with an explicit trigger and predictable modal behavior only when the layout becomes an overlay.
Navigation landmark
The panel renders a native aside. Supply ariaLabel or ariaLabelledby so assistive technology can distinguish it from other page landmarks.
Trigger contract
neuralSidebarTrigger synchronizes aria-controls and aria-expanded with the target id. Apply it to a native button or NeuralButton.
Focus and dismissal
Modal offcanvas mode traps Tab, supports Escape and backdrop dismissal, moves focus inside on open, and restores the original trigger after close.
RTL and responsive mode
Start and end are logical edges. The media query changes only collapse behavior, preserving one navigation structure and one controlled model across viewport sizes.
Reduced motion and SSR
Motion duration collapses under prefers-reduced-motion. matchMedia and focus work are browser guarded for SSR and hydration safety.
SIDEBAR
API
Standalone shell primitives, a controlled Signal model and one serializable semantic state event.
Components and directives
NeuralSidebarLayoutneural-sidebar-layoutFlex application shell and overlay containing block.
NeuralSidebarneural-sidebarResponsive navigation landmark and state owner.
NeuralSidebarHeaderneural-sidebar-headerBranding and shell-level actions.
NeuralSidebarContentneural-sidebar-contentIndependent scrolling navigation region.
NeuralSidebarFooterneural-sidebar-footerAccount and secondary actions.
NeuralSidebarMain[neuralSidebarMain]Flexible application content directive.
NeuralSidebarTrigger[neuralSidebarTrigger]External accessible toggle directive.
NeuralSidebarLabel[neuralSidebarLabel]Label hook hidden cleanly when the Sidebar becomes an icon rail.
NeuralSidebarInitialFocus[neuralSidebarInitialFocus]Preferred focus target when a modal offcanvas Sidebar opens.
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| id | string | generated | Stable target id used by external triggers. |
| open | model<boolean> | true | Expanded, collapsed or offcanvas visibility state. |
| side | 'start' | 'end' | 'start' | Logical placement that mirrors in RTL. |
| variant | 'sidebar' | 'floating' | 'inset' | 'sidebar' | Visual relationship with application content. |
| collapseMode | 'none' | 'icon' | 'offcanvas' | 'icon' | Desktop collapse behavior. |
| iconMenu | 'flyout' | 'hidden' | 'flyout' | Presents top-level child menus beside a collapsed icon rail or hides them. |
| openOnHover | boolean | false | Temporarily expands a collapsed desktop icon rail without mutating the controlled open model. |
| hoverOpenDelay | number | 100 | Delay in milliseconds before pointer hover expands the icon rail. |
| hoverCloseDelay | number | 180 | Delay in milliseconds before an unfocused hovered rail collapses. |
| responsive | boolean | true | Enables media-query mode switching. |
| breakpoint | string | '64rem' | Maximum width used by the mobile media query. |
| mobileMode | 'none' | 'icon' | 'offcanvas' | 'offcanvas' | Collapse behavior below the breakpoint. |
| overlay | boolean | false | Forces overlay/backdrop behavior in any mode. |
| showBackdrop | boolean | true | Controls visual backdrop rendering independently from overlay positioning and modal focus behavior. |
| modal | boolean | true | Contains Tab focus while an overlay is open. |
| dismissibleBackdrop | boolean | true | Allows backdrop pointer dismissal. |
| closeOnEscape | boolean | true | Allows Escape dismissal in overlay mode. |
| closeOnMobile | boolean | true | Closes an expanded shell when it enters the mobile breakpoint. |
| closeOnNavigation | boolean | true | Closes an open offcanvas Sidebar after Angular navigation completes. |
| blockScroll | boolean | true | Locks document scrolling while a modal overlay Sidebar is open. |
| width | string | '16rem' | Expanded panel inline size. |
| iconWidth | string | '3.5rem' | Collapsed icon-rail inline size. |
| ariaLabel | string | null | 'Application navigation' | Accessible navigation landmark name. |
| ariaLabelledby | string | null | null | Visible label reference. |
| unstyled | boolean | false | Removes NeuralNg visual classes. |
| sidebarClass | string | '' | Additive panel classes. |
| classes | NeuralSidebarClasses | {} | Typed layout and section class slots. |
Models and events
[(open)]Controlled expanded and offcanvas visibility Signal model.
stateChangeEmits open, mobile, mode, reason and the optional native event.
hoverChangeEmits the temporary hover expansion state and originating pointer or focus event without mutating open.
Typed class slots
rootApplication shell layout root.
backdropModal offcanvas backdrop.
panelSidebar navigation panel.
headerHeader section.
contentScrollable content section.
footerFooter section.
Public types
NeuralSidebarSide · NeuralSidebarVariant · NeuralSidebarCollapseMode · NeuralSidebarClasses · NeuralSidebarStateChange
SIDEBAR
Design tokens
Layout, panel geometry, overlay treatment, section spacing and motion are independently tokenized.
--neural-sidebar-layout-min-heightMinimum block size of the complete Sidebar application shell.
--neural-sidebar-layout-backgroundBackground behind the Sidebar panel and main application region.
--neural-sidebar-main-backgroundBackground surface of content marked with neuralSidebarMain.
--neural-sidebar-colorComponent foreground color.
--neural-sidebar-backgroundComponent background surface.
--neural-sidebar-borderComponent border shorthand.
--neural-sidebar-radiusComponent corner radius.
--neural-sidebar-shadowComponent box shadow.
--neural-sidebar-backdropBackdrop color shown while an overlay Sidebar is open.
--neural-sidebar-backdrop-filterBackdrop filter applied behind an open overlay Sidebar.
--neural-sidebar-header-paddingInternal spacing of the projected Sidebar header section.
--neural-sidebar-content-paddingInternal spacing of the independently scrollable Sidebar content.
--neural-sidebar-footer-paddingInternal spacing of the projected Sidebar footer section.
--neural-sidebar-menu-gapSpacing between menu items.
--neural-sidebar-floating-marginOuter spacing around the floating Sidebar variant.
--neural-sidebar-inset-marginOuter spacing around the inset Sidebar variant.
--neural-sidebar-durationComponent animation duration.
--neural-sidebar-easingComponent animation easing curve.
--neural-sidebar-rail-item-widthRail item inline size.
--neural-sidebar-rail-label-offsetRail label positional offset.
--neural-sidebar-rail-label-paddingRail label internal spacing.
--neural-sidebar-rail-label-colorRail label foreground color.
--neural-sidebar-rail-label-backgroundRail label background surface.
--neural-sidebar-rail-label-borderRail label border shorthand.
--neural-sidebar-rail-label-radiusRail label corner radius.
--neural-sidebar-rail-label-shadowRail label box shadow.
--neural-sidebar-rail-label-font-sizeRail label font size.
--neural-sidebar-rail-label-durationRail label animation duration.
--neural-sidebar-rail-label-z-indexRail label stacking order.
--neural-sidebar-flyout-widthFlyout inline size.
--neural-sidebar-flyout-max-heightFlyout maximum block size.
--neural-sidebar-flyout-offsetFlyout positional offset.
--neural-sidebar-nested-flyout-offsetLogical inline gap between adjacent nested flyout panels in a collapsed icon rail.
--neural-sidebar-nested-flyout-widthInline size of second-level and deeper flyout panels in a collapsed icon rail.
--neural-sidebar-flyout-paddingFlyout internal spacing.
--neural-sidebar-flyout-colorFlyout foreground color.
--neural-sidebar-flyout-backgroundFlyout background surface.
--neural-sidebar-flyout-borderFlyout border shorthand.
--neural-sidebar-flyout-radiusFlyout corner radius.
--neural-sidebar-flyout-shadowFlyout box shadow.
--neural-sidebar-flyout-durationFlyout animation duration.
--neural-sidebar-flyout-z-indexFlyout stacking order.