Sidebar

Start from a working Neo app shell, then wrap your nested AutoRouter with NeoSidebarLayout as shown below.

Example

NeoSidebarLayout(
  sidebarChildren: [
    NeoSidebarButton(
      label: "Dashboard",
      icon: (style) => style == .duotone
          ? PhosphorIconsDuotone.house
          : PhosphorIconsRegular.house,
      isActive: true,
      onPressed: () => context.router.push(const DashboardRoute()),
    ),
    NeoSidebarButton(
      label: "Products",
      icon: (style) => style == .duotone
          ? PhosphorIconsDuotone.tag
          : PhosphorIconsRegular.tag,
      onPressed: () => context.router.push(const ProductsRoute()),
    ),
    NeoSidebarButton(
      label: "Orders",
      icon: (style) => style == .duotone
          ? PhosphorIconsDuotone.receipt
          : PhosphorIconsRegular.receipt,
      badgeText: "12",
      badgeColor: theme.colors.danger,
      onPressed: () => context.router.push(const OrdersRoute()),
    ),
  ],
  child: const AutoRouter(),
),

Properties

Required

List<Widget>

required

The list of widgets to display in the sidebar. While you have full flexibility, most of the time this will be NeoSidebarButton widgets. You can also include other widgets like a logo, workspace dropdown, progress card, etc.

Widget

required

The main content widget that will be displayed alongside the sidebar. Typically const AutoRouter() when using Neo’s recommended routing approach, but can be any widget that represents your main content area.

State Management

The sidebar layout uses Riverpod providers to manage its state:

StateNotifierProvider

Controls the sidebar’s visibility and collapse state. Access via ref.watch() or ref.read().

Available State Methods

// Collapse the sidebar
ref.read(neoCurrentSidebarStatesProvider.notifier).setCollapsed(true);

// Expand the sidebar
ref.read(neoCurrentSidebarStatesProvider.notifier).setCollapsed(false);

// Hide the sidebar
ref.read(neoCurrentSidebarStatesProvider.notifier).setHidden(true);

// Show the sidebar
ref.read(neoCurrentSidebarStatesProvider.notifier).setHidden(false);

final sidebarState = ref.watch(neoCurrentSidebarStatesProvider);
final isCollapsed = sidebarState.isCollapsed;
final isHidden = sidebarState.isHidden;
final hideText = sidebarState.hideText;

Platform Behavior

Desktop (768px and above)

Swipe gestures: Control collapse/expand state
Content behavior: Main content area scales horizontally when collapsing/expanding

Mobile (below 768px)

Swipe gestures: Control hide/show state
Content behavior: Content slides slightly offscreen to make room for sidebar

Best Practices

Recommended with AutoRouter: Use child: const AutoRouter() for nested routing.
Safe area handling: Structure your pages with Container(color: theme.colors.bgPrimary) → NeoSafeArea → your content for proper full-screen behavior.
Active State Management: Determine active sidebar buttons from the current route path:

Route-based active state

final isActive = AutoRouter.of(context).currentPath.toLowerCase().startsWith("/dashboard");

Integration Notes

Internal Components: Never use NeoSidebar directly; NeoSidebarLayout handles everything and provides the complete Neo experience.
Safe Area Intelligence: Automatically handles safe areas and removes them during full-screen transitions.
Route-Based Active State: The sidebar no longer manages active item state internally. Instead, determine active state based on your routing system (e.g., using AutoRouter.currentPath).

Getting Started

AI

Widgets

Layouts

Theming

Utilities

Example

Properties

Required

State Management

Available State Methods

Platform Behavior

Best Practices

Integration Notes

​Example

​Properties

​Required

​State Management

​Available State Methods

​Platform Behavior

​Best Practices

​Integration Notes

Example

Properties

Required

State Management

Available State Methods

Platform Behavior

Best Practices

Integration Notes