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

Skip Links

Ported from HyperUI’s Skip Links — see Attribution.

Section titled “Basic skip link”
class SkipLinks1Example extends StatelessWidget {
  const SkipLinks1Example({super.key});


  @override
  Widget build(BuildContext context) {
    return const Style(
      'absolute top-0 left-1/2 -translate-x-1/2 -translate-y-full rounded-sm bg-blue-700 px-12 py-3 text-sm font-semibold text-white transition-transform hover:bg-blue-600 focus:translate-y-4 active:bg-blue-600',
      cursor: SystemMouseCursors.click,
      child: Text('Skip to main content'),
    );
  }
}
Section titled “Multiple skip links with dark background”
class SkipLinks2Example extends StatelessWidget {
  const SkipLinks2Example({super.key});


  @override
  Widget build(BuildContext context) {
    return Style(
      'absolute top-0 left-1/2 w-full max-w-sm -translate-x-1/2 -translate-y-full rounded-sm bg-gray-100 p-4 transition-transform focus-within:translate-y-4',
      children: [
        const Style(
          'text-xs font-semibold tracking-wide text-gray-700 uppercase',
          child: Text('Skip to:'),
        ),
        Style(
          'mt-1 flex flex-wrap gap-2',
          children: [
            for (final label in const ['Navigation', 'Content', 'Footer'])
              Style('text-sm font-medium text-blue-700 transition-colors hover:text-blue-600 active:text-blue-600', display: DisplayType.inline, cursor: SystemMouseCursors.click, child: Text(label)),
          ],
        ),
      ],
    );
  }
}
Section titled “Skip links with title and light background”
class SkipLinks3Example extends StatelessWidget {
  const SkipLinks3Example({super.key});


  @override
  Widget build(BuildContext context) {
    return Style(
      'absolute inset-x-0 top-0 flex -translate-y-full items-center gap-3 rounded-sm bg-gray-100 p-4 transition-transform focus-within:translate-y-0',
      children: [
        const Style(
          'text-xs font-semibold tracking-wide text-gray-700 uppercase',
          child: Text('Skip to:'),
        ),
        Style(
          'flex flex-wrap gap-2',
          children: [
            for (final label in const ['Navigation', 'Content', 'Footer'])
              Style('text-sm font-medium text-blue-700 transition-colors hover:text-blue-600 active:text-blue-600', display: DisplayType.inline, cursor: SystemMouseCursors.click, child: Text(label)),
          ],
        ),
      ],
    );
  }
}