Skip to main content

​
Overview

HuxSidebar is a complete navigation component that provides a consistent sidebar layout with header, navigation items, and optional footer. It handles selection state management automatically and provides a clean API for sidebar navigation in your Flutter applications.

​
Basic Usage

​
Simple Sidebar

Basic sidebar with navigation items: 
HuxSidebar(
  items: [
    HuxSidebarItemData(
      id: 'dashboard',
      icon: LucideIcons.home,
      label: 'Dashboard',
    ),
    HuxSidebarItemData(
      id: 'settings',
      icon: LucideIcons.settings,
      label: 'Settings',
    ),
  ],
  selectedItemId: 'dashboard',
  onItemSelected: (itemId) => print('Selected: $itemId'),
)
Sidebar with custom header content: 
HuxSidebar(
  header: Padding(
    padding: const EdgeInsets.all(16),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          'My App',
          style: TextStyle(
            fontSize: 20,
            fontWeight: FontWeight.bold,
          ),
        ),
        SizedBox(height: 4),
        Text(
          'Navigation',
          style: TextStyle(fontSize: 14, color: Colors.grey),
        ),
      ],
    ),
  ),
  items: navigationItems,
  selectedItemId: selectedId,
  onItemSelected: handleItemSelection,
)
Include footer content like user profile or settings: 
HuxSidebar(
  items: navigationItems,
  selectedItemId: currentRoute,
  onItemSelected: navigateToRoute,
  footer: Padding(
    padding: const EdgeInsets.all(16),
    child: Row(
      children: [
        HuxAvatar(name: 'John Doe', size: HuxAvatarSize.small),
        SizedBox(width: 12),
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text('John Doe', style: TextStyle(fontWeight: FontWeight.w500)),
              Text('[email protected]', style: TextStyle(fontSize: 12)),
            ],
          ),
        ),
      ],
    ),
  ),
)

​
HuxSidebarItemData

Define individual navigation items: 
HuxSidebarItemData(
  id: 'unique-id',           // Required: Unique identifier
  label: 'Dashboard',        // Required: Display label
  icon: LucideIcons.home,    // Optional: Leading icon
)

​
Multiple Items

Create a list of navigation items: 
final items = [
  HuxSidebarItemData(
    id: 'dashboard',
    icon: LucideIcons.home,
    label: 'Dashboard',
  ),
  HuxSidebarItemData(
    id: 'analytics',
    icon: LucideIcons.barChart,
    label: 'Analytics',
  ),
  HuxSidebarItemData(
    id: 'settings',
    icon: LucideIcons.settings,
    label: 'Settings',
  ),
];

​
Properties

​
HuxSidebar Properties

PropertyTypeDefaultDescription
itemsList<HuxSidebarItemData>requiredList of navigation items
onItemSelectedFunction(String)requiredCallback when item is selected
selectedItemIdString?nullCurrently selected item ID
headerWidget?nullOptional header widget
footerWidget?nullOptional footer widget
widthdouble250Width of the sidebar
paddingEdgeInsetsvertical: 16Padding around items

​
HuxSidebarItemData Properties

PropertyTypeDefaultDescription
idStringrequiredUnique identifier for the item
labelStringrequiredDisplay label for the item
iconIconData?nullOptional leading icon

​
Styling

​
Custom Width

Adjust sidebar width for your layout: 
HuxSidebar(
  width: 280,  // Custom width
  items: navigationItems,
  onItemSelected: handleSelection,
)

​
Custom Padding

Control spacing around navigation items: 
HuxSidebar(
  padding: EdgeInsets.all(20),
  items: navigationItems,
  onItemSelected: handleSelection,
)

​
States

​
Selection State

Items automatically show selected state based on selectedItemId:
  • Selected: Highlighted with primary color background
  • Unselected: Default appearance with hover state
  • Hovered: Subtle background change on mouse hover

​
Integration Examples

​
With Routing

Integrate with your app’s routing system: 
class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _currentRoute = 'dashboard';

  void _handleNavigation(String itemId) {
    setState(() {
      _currentRoute = itemId;
    });
    // Navigate to route
    Navigator.pushNamed(context, '/$itemId');
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        HuxSidebar(
          items: [
            HuxSidebarItemData(id: 'dashboard', icon: LucideIcons.home, label: 'Dashboard'),
            HuxSidebarItemData(id: 'users', icon: LucideIcons.users, label: 'Users'),
            HuxSidebarItemData(id: 'settings', icon: LucideIcons.settings, label: 'Settings'),
          ],
          selectedItemId: _currentRoute,
          onItemSelected: _handleNavigation,
        ),
        Expanded(
          child: ContentArea(route: _currentRoute),
        ),
      ],
    );
  }
}

​
With Responsive Layout

Make sidebar responsive to screen size: 
LayoutBuilder(
  builder: (context, constraints) {
    final bool isWideScreen = constraints.maxWidth > 800;
    
    return Row(
      children: [
        if (isWideScreen)
          HuxSidebar(
            width: 250,
            items: navigationItems,
            selectedItemId: currentRoute,
            onItemSelected: handleNavigation,
          ),
        Expanded(child: ContentArea()),
      ],
    );
  },
)

​
Best Practices

  • Always maintain a selected state
  • Update selected item when route changes
  • Provide visual feedback for current location
  • Consider highlighting active section in multi-level navigation
  • Hide sidebar on small screens and use drawer instead
  • Adjust sidebar width based on screen size
  • Consider collapsible sidebar for medium screens
  • Ensure touch targets are at least 44x44 pixels
  • Ensure keyboard navigation works smoothly
  • Provide clear focus indicators
  • Use semantic labels for screen readers
  • Maintain sufficient color contrast (WCAG AA)

​
Theme Integration

HuxSidebar automatically adapts to your app’s theme:
  • Light Mode: Clean white background with subtle borders
  • Dark Mode: Dark background with appropriate contrast
  • Selected State: Uses theme primary color
  • Hover State: Subtle background change based on theme
⌘I