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

Use child: const AutoRouter() for nested routing.
Wrap the page in Container(color: theme.colors.bgPrimary), then NeoSafeArea, then the page content.

Behavior

The layout does not store which item is active. Set isActive on each NeoSidebarButton from the current route.

Route-based active state

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

Getting Started

AI

Widgets

Layouts

Theming

Utilities

Example

Properties

Required

State Management

Available State Methods

Platform Behavior

Best Practices

Behavior

​Example

​Properties

​Required

​State Management

​Available State Methods

​Platform Behavior

​Best Practices

​Behavior

Example

Properties

Required

State Management

Available State Methods

Platform Behavior

Best Practices

Behavior