components/navbars/flutstrap_navbar library Components Navigation

Flutstrap Navbar

A high-performance, responsive navigation bar with Bootstrap-inspired styling, smooth animations, and optimized state management for large navigation structures.

Usage Examples

// Basic navbar with active state
FlutstrapNavbar(
  brandText: 'My App',
  items: [
    FSNavbarItem(label: 'Home', onTap: () {}, isActive: true),
    FSNavbarItem(label: 'About', onTap: () {}),
    FSNavbarItem(label: 'Services', onTap: () {}),
  ],
  variant: FSNavbarVariant.primary,
)

// Navbar with dropdowns and custom branding
FlutstrapNavbar(
  brand: Row(
    children: [
      Icon(Icons.rocket, color: Colors.white),
      SizedBox(width: 8),
      Text('Flutstrap', style: TextStyle(color: Colors.white)),
    ],
  ),
  items: [
    FSNavbarItem.simple(label: 'Home', onTap: () {}),
    FSNavbarItem.dropdown(
      label: 'Products',
      children: [
        FSNavbarItem(label: 'Web Apps', onTap: () {}),
        FSNavbarItem(label: 'Mobile Apps', onTap: () {}),
      ],
    ),
  ],
  showSearch: true,
  onSearch: (query) => print('Search: $query'),
  position: FSNavbarPosition.fixedTop,
)

Accessibility

• Full screen reader support with proper semantic labels
• Keyboard navigation support for all interactive elements
• Focus management for dropdowns and mobile menu
• Proper ARIA attributes for navigation landmarks
• High contrast support for all variants

Usage Examples

// Basic navbar with active state
FlutstrapNavbar(
  brandText: 'My App',
  items: [
    FSNavbarItem(label: 'Home', onTap: () {}, isActive: true),
    FSNavbarItem(label: 'About', onTap: () {}),
    FSNavbarItem(label: 'Services', onTap: () {}),
  ],
  variant: FSNavbarVariant.primary,
)

// Navbar with dropdowns and custom branding
FlutstrapNavbar(
  brand: Row(
    children: [
      Icon(Icons.rocket, color: Colors.white),
      SizedBox(width: 8),
      Text('Flutstrap', style: TextStyle(color: Colors.white)),
    ],
  ),
  items: [
    FSNavbarItem.simple(label: 'Home', onTap: () {}),
    FSNavbarItem.dropdown(
      label: 'Products',
      children: [
        FSNavbarItem(label: 'Web Apps', onTap: () {}),
        FSNavbarItem(label: 'Mobile Apps', onTap: () {}),
      ],
    ),
  ],
  showSearch: true,
  onSearch: (query) => print('Search: $query'),
  position: FSNavbarPosition.fixedTop,
)

Accessibility

• Full screen reader support with proper semantic labels
• Keyboard navigation support for all interactive elements
• Focus management for dropdowns and mobile menu
• Proper ARIA attributes for navigation landmarks
• High contrast support for all variants

Classes

FlutstrapNavbar

Flutstrap Navbar

FSNavbarConfig

Flutstrap Navbar Configuration

FSNavbarItem

Navbar Item Data

Enums

FSNavbarPosition

Flutstrap Navbar Positions

FSNavbarVariant

Flutstrap Navbar Variants