Navigation Widgets

Neon supports multi-screen routing, nested navigation stacks, top app bars, and bottom navigation bars.

For the comprehensive routing engine guide covering dynamic URLs, route guards, deep links, and state restoration, see the Navigation & Routing Architecture documentation.

1. AppBar

A top navigation bar with back navigation, titles, and trailing action buttons:

AppBar(
  title: Text('Dashboard'),
  leading: IconButton(
    key: 'btn-menu-drawer',
    icon: Icons.menu,
    onPressed: () => _scaffoldKey.openDrawer(),
  ),
  actions: [
    IconButton(
      key: 'btn-notifications',
      icon: Icons.notifications_none,
      onPressed: () => _openNotifications(),
    ),
  ],
)

2. NavigationBar (Bottom Navigation)

Renders a native Material 3 bottom navigation bar or iOS UITabBar:

NavigationBar(
  selectedIndex: _currentTabIndex,
  onDestinationSelected: (int index) {
    setState(() {
      _currentTabIndex = index;
    });
  },
  destinations: const [
    NavigationDestination(icon: Icons.home, label: 'Home'),
    NavigationDestination(icon: Icons.explore, label: 'Explore'),
    NavigationDestination(icon: Icons.person, label: 'Profile'),
  ],
)

3. TabBar & TabBarView

Horizontal tab switching for partitioned views:

TabBar(
  selectedIndex: _selectedTab,
  onTap: (index) {
    setState(() => _selectedTab = index);
  },
  tabs: const [
    Tab(text: 'General'),
    Tab(text: 'Security'),
    Tab(text: 'Notifications'),
  ],
)

4. NeonNavigator (Hierarchical Stack Widget)

Renders the active route of a NavigatorController and registers it in the widget context:

class AppRoot extends StatelessWidget {
  final NavigatorController controller;

  const AppRoot({required this.controller});

  @override
  NeonWidget build(NeonBuildContext context) {
    return NeonNavigator(
      controller: controller,
      transition: 'slideHorizontal',
    );
  }
}

Child widgets can retrieve the active controller using NavigatorController.of(context) or NeonRouter.of(context).