Sidebar

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

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

Property	Type	Default	Description
`items`	`List<HuxSidebarItemData>`	required	List of navigation items
`onItemSelected`	`Function(String)`	required	Callback when item is selected
`selectedItemId`	`String?`	`null`	Currently selected item ID
`header`	`Widget?`	`null`	Optional header widget
`footer`	`Widget?`	`null`	Optional footer widget
`width`	`double`	`250`	Width of the sidebar
`padding`	`EdgeInsets`	`vertical: 16`	Padding around items

HuxSidebarItemData Properties

Property	Type	Default	Description
`id`	`String`	required	Unique identifier for the item
`label`	`String`	required	Display label for the item
`icon`	`IconData?`	`null`	Optional 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

Navigation Structure

Selection Management

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

Responsive Design

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

Accessibility

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

HuxButton - Action buttons within sidebar
HuxAvatar - User avatars in sidebar footer
HuxBadge - Notification badges on items
HuxTooltip - Tooltips for collapsed sidebar

Getting Started

Components

Advanced

Overview

Basic Usage

Simple Sidebar

Sidebar with Header

Sidebar with Footer

Navigation Items

HuxSidebarItemData

Multiple Items

Properties

HuxSidebar Properties

HuxSidebarItemData Properties

Styling

Custom Width

Custom Padding

States

Selection State

Integration Examples

With Routing

With Responsive Layout

Best Practices

Theme Integration

​Overview

​Basic Usage

​Simple Sidebar

​Sidebar with Header

​Sidebar with Footer

​Navigation Items

​HuxSidebarItemData

​Multiple Items

​Properties

​HuxSidebar Properties

​HuxSidebarItemData Properties

​Styling

​Custom Width

​Custom Padding

​States

​Selection State

​Integration Examples

​With Routing

​With Responsive Layout

​Best Practices

​Theme Integration

​Related Components

Overview

Basic Usage

Simple Sidebar

Sidebar with Header

Sidebar with Footer

Navigation Items

HuxSidebarItemData

Multiple Items

Properties

HuxSidebar Properties

HuxSidebarItemData Properties

Styling

Custom Width

Custom Padding

States

Selection State

Integration Examples

With Routing

With Responsive Layout

Best Practices

Theme Integration

Related Components