Skip to content
HyperUI for Flutter
HyperUI for Flutter requires the Style package — this site itself ships no pub package.

Breadcrumbs

Ported from HyperUI’s Breadcrumbs — see Attribution.

Base

Section titled “Base”

Includes a dark: variant — toggle the site theme (top right) to preview it.

class CurrentColorIcon extends StatelessWidget
    implements StyleReplacedElementWrapper {
  const CurrentColorIcon(this.svg, {super.key});


  final String svg;


  @override
  Widget build(BuildContext context) {
    final color = IconTheme.of(context).color ?? const Color(0xFF000000);
    return SvgPicture.string(svg, theme: SvgTheme(currentColor: color));
  }
}


const _chevronDividerSvg =
    '''<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/></svg>''';


class Breadcrumbs1Example extends StatelessWidget {
  const Breadcrumbs1Example({super.key});


  @override
  Widget build(BuildContext context) {
    return Style(
      'flex justify-center p-6',
      child: Style(
        'flex items-center gap-1 text-sm text-gray-700 dark:text-gray-200',
        children: [
          const Style(
            'block transition-colors hover:text-gray-900 dark:hover:text-white',
            cursor: SystemMouseCursors.click,
            child: Text('Home'),
          ),
          Style(
            'rtl:rotate-180',
            child: Style(
              'size-4',
              child: CurrentColorIcon(_chevronDividerSvg),
            ),
          ),
          const Style(
            'block transition-colors hover:text-gray-900 dark:hover:text-white',
            cursor: SystemMouseCursors.click,
            child: Text('Category'),
          ),
          Style(
            'rtl:rotate-180',
            child: Style(
              'size-4',
              child: CurrentColorIcon(_chevronDividerSvg),
            ),
          ),
          const Style(
            'block transition-colors hover:text-gray-900 dark:hover:text-white',
            cursor: SystemMouseCursors.click,
            child: Text('Product'),
          ),
        ],
      ),
    );
  }
}

Base with home icon

Section titled “Base with home icon”

Includes a dark: variant — toggle the site theme (top right) to preview it.

class CurrentColorIcon extends StatelessWidget
    implements StyleReplacedElementWrapper {
  const CurrentColorIcon(this.svg, {super.key});


  final String svg;


  @override
  Widget build(BuildContext context) {
    final color = IconTheme.of(context).color ?? const Color(0xFF000000);
    return SvgPicture.string(svg, theme: SvgTheme(currentColor: color));
  }
}


const _homeSvg =
    '''<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg>''';


const _chevronDividerSvg =
    '''<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/></svg>''';


class Breadcrumbs2Example extends StatelessWidget {
  const Breadcrumbs2Example({super.key});


  @override
  Widget build(BuildContext context) {
    return Style(
      'flex justify-center p-6',
      child: Style(
        'flex items-center gap-1 text-sm text-gray-700 dark:text-gray-200',
        children: [
          Style(
            'block transition-colors hover:text-gray-900 dark:hover:text-white',
            cursor: SystemMouseCursors.click,
            child: Style('size-4', child: CurrentColorIcon(_homeSvg)),
          ),
          Style(
            'rtl:rotate-180',
            child: Style(
              'size-4',
              child: CurrentColorIcon(_chevronDividerSvg),
            ),
          ),
          const Style(
            'block transition-colors hover:text-gray-900 dark:hover:text-white',
            cursor: SystemMouseCursors.click,
            child: Text('Category'),
          ),
          Style(
            'rtl:rotate-180',
            child: Style(
              'size-4',
              child: CurrentColorIcon(_chevronDividerSvg),
            ),
          ),
          const Style(
            'block transition-colors hover:text-gray-900 dark:hover:text-white',
            cursor: SystemMouseCursors.click,
            child: Text('Product'),
          ),
        ],
      ),
    );
  }
}

Slash divider

Section titled “Slash divider”

Includes a dark: variant — toggle the site theme (top right) to preview it.

class CurrentColorIcon extends StatelessWidget
    implements StyleReplacedElementWrapper {
  const CurrentColorIcon(this.svg, {super.key});


  final String svg;


  @override
  Widget build(BuildContext context) {
    final color = IconTheme.of(context).color ?? const Color(0xFF000000);
    return SvgPicture.string(svg, theme: SvgTheme(currentColor: color));
  }
}


const _slashDividerSvg =
    '''<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m9 20.247 6-16.5"/></svg>''';


class Breadcrumbs3Example extends StatelessWidget {
  const Breadcrumbs3Example({super.key});


  @override
  Widget build(BuildContext context) {
    return Style(
      'flex justify-center p-6',
      child: Style(
        'flex items-center gap-1 text-sm text-gray-700 dark:text-gray-200',
        children: [
          const Style(
            'block transition-colors hover:text-gray-900 dark:hover:text-white',
            cursor: SystemMouseCursors.click,
            child: Text('Home'),
          ),
          Style(
            'rtl:rotate-180',
            child: Style('size-4', child: CurrentColorIcon(_slashDividerSvg)),
          ),
          const Style(
            'block transition-colors hover:text-gray-900 dark:hover:text-white',
            cursor: SystemMouseCursors.click,
            child: Text('Category'),
          ),
          Style(
            'rtl:rotate-180',
            child: Style('size-4', child: CurrentColorIcon(_slashDividerSvg)),
          ),
          const Style(
            'block transition-colors hover:text-gray-900 dark:hover:text-white',
            cursor: SystemMouseCursors.click,
            child: Text('Product'),
          ),
        ],
      ),
    );
  }
}

Slash divider with home icon

Section titled “Slash divider with home icon”

Includes a dark: variant — toggle the site theme (top right) to preview it.

class CurrentColorIcon extends StatelessWidget
    implements StyleReplacedElementWrapper {
  const CurrentColorIcon(this.svg, {super.key});


  final String svg;


  @override
  Widget build(BuildContext context) {
    final color = IconTheme.of(context).color ?? const Color(0xFF000000);
    return SvgPicture.string(svg, theme: SvgTheme(currentColor: color));
  }
}


const _homeSvg =
    '''<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg>''';


const _slashDividerSvg =
    '''<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m9 20.247 6-16.5"/></svg>''';


class Breadcrumbs4Example extends StatelessWidget {
  const Breadcrumbs4Example({super.key});


  @override
  Widget build(BuildContext context) {
    return Style(
      'flex justify-center p-6',
      child: Style(
        'flex items-center gap-1 text-sm text-gray-700 dark:text-gray-200',
        children: [
          Style(
            'block transition-colors hover:text-gray-900 dark:hover:text-white',
            cursor: SystemMouseCursors.click,
            child: Style('size-4', child: CurrentColorIcon(_homeSvg)),
          ),
          Style(
            'rtl:rotate-180',
            child: Style('size-4', child: CurrentColorIcon(_slashDividerSvg)),
          ),
          const Style(
            'block transition-colors hover:text-gray-900 dark:hover:text-white',
            cursor: SystemMouseCursors.click,
            child: Text('Category'),
          ),
          Style(
            'rtl:rotate-180',
            child: Style('size-4', child: CurrentColorIcon(_slashDividerSvg)),
          ),
          const Style(
            'block transition-colors hover:text-gray-900 dark:hover:text-white',
            cursor: SystemMouseCursors.click,
            child: Text('Product'),
          ),
        ],
      ),
    );
  }
}

Grouped with chevron divider

Section titled “Grouped with chevron divider”

Includes a dark: variant — toggle the site theme (top right) to preview it.

class Breadcrumbs5Example extends StatelessWidget {
  const Breadcrumbs5Example({super.key});


  @override
  Widget build(BuildContext context) {
    return Style(
      'flex justify-center p-6',
      child: Style(
        'flex overflow-hidden rounded border border-gray-300 bg-white text-sm text-gray-700 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200',
        children: const [
          Style(
            'block h-10 bg-gray-100 px-4 leading-10 transition-colors hover:text-gray-900 dark:bg-gray-700 dark:hover:text-white',
            cursor: SystemMouseCursors.click,
            child: Text('Home'),
          ),
          Style(
            'relative flex items-center',
            children: [
              Style(
                'absolute inset-y-0 -start-px h-10 w-4 bg-gray-100 [clip-path:_polygon(0_0,_0%_100%,_100%_50%)] rtl:rotate-180 dark:bg-gray-700',
              ),
              Style(
                'block h-10 pr-4 pl-6 leading-10 transition-colors hover:text-gray-900 dark:hover:text-white',
                cursor: SystemMouseCursors.click,
                child: Text('Category'),
              ),
            ],
          ),
        ],
      ),
    );
  }
}