Footer

페이지 하단에 고정되는 사이트 푸터 (브랜딩 + 내비게이션 섹션)

페이지 하단의 브랜딩(aside) + 다중 내비게이션 섹션을 한 줄/세로로 배치하는 푸터입니다. horizontal/vertical/center 세 가지 레이아웃을 지원하며 배경/텍스트 색상은 토큰 기반으로 일관됩니다.

Live Preview#

Web

Flutter

class FooterDefaultExample extends StatelessComponent {
  const FooterDefaultExample({super.key});

  @override
  Component build(BuildContext context) {
    return CoFooter(
      aside: div([Component.text('© 2026 CoUI — Industrial Ltd.')]),
      sections: [
        CoreFooterNavData<Component>(
          title: 'Services',
          children: [
            div([Component.text('Branding')]),
            div([Component.text('Design')]),
            div([Component.text('Marketing')]),
          ],
        ),
        CoreFooterNavData<Component>(
          title: 'Company',
          children: [
            div([Component.text('About us')]),
            div([Component.text('Contact')]),
            div([Component.text('Jobs')]),
          ],
        ),
        CoreFooterNavData<Component>(
          title: 'Legal',
          children: [
            div([Component.text('Terms')]),
            div([Component.text('Privacy')]),
            div([Component.text('Cookies')]),
          ],
        ),
      ],
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return CoFooter(
      aside: const Text('© 2026 CoUI — Industrial Ltd.'),
      sections: const [
        CoreFooterNavData<Widget>(
          title: 'Services',
          children: [
            Text('Branding'),
            Text('Design'),
            Text('Marketing'),
          ],
        ),
        CoreFooterNavData<Widget>(
          title: 'Company',
          children: [
            Text('About us'),
            Text('Contact'),
            Text('Jobs'),
          ],
        ),
        CoreFooterNavData<Widget>(
          title: 'Legal',
          children: [
            Text('Terms'),
            Text('Privacy'),
            Text('Cookies'),
          ],
        ),
      ],
    );
  }
}

사용 시기 (When to Use)#

이 컴포넌트를 사용하세요:

사이트 최하단에 회사명/링크/저작권 정보를 배치할 때
여러 카테고리(Services, Company, Legal)의 보조 링크를 모아놓을 때

대신 다른 컴포넌트를 사용하세요:

Dock: 모바일 하단 탭 내비게이션
NavigationBar: 데스크톱 상단 전역 내비게이션

기본 사용법 (Basic Usage)#

CoFooter(
  aside: const Text('© 2026 CoUI — Industrial Ltd.'),
  sections: const [
    CoreFooterNavData<Widget>(
      title: 'Services',
      children: [
        Text('Branding'),
        Text('Design'),
        Text('Marketing'),
      ],
    ),
    CoreFooterNavData<Widget>(
      title: 'Company',
      children: [
        Text('About us'),
        Text('Contact'),
        Text('Jobs'),
      ],
    ),
  ],
)

Props / Parameters#

`CoFooter`#

속성	타입	기본값	설명
`sections`	`List<CoreFooterNavData<W>>`	필수	렌더링할 nav 섹션 목록
`aside`	`W?`	null	브랜딩/로고 슬롯 (sections 앞에 배치)
`layout`	`CoreFooterLayout?`	`horizontal`	horizontal/vertical/center
`backgroundColor`	`Color?` / `String?`	null → `surfaceContainer`	배경색 override
`textColor`	`Color?` / `String?`	null → `onSurfaceVariant`	기본 텍스트 색
`padding`	`EdgeInsetsGeometry?` / `double?`	null	외부 패딩 override
`semanticLabel`	`String?`	`'footer'`	스크린리더 landmark label

`CoreFooterNavData<W>`#

속성	타입	기본값	설명
`title`	`String?`	null	섹션 제목 (titleSmall + semibold). 없거나 빈 문자열이면 생략
`children`	`List<W>`	필수	섹션 안의 링크/노드 목록

레이아웃 (Layouts)#

값	동작
`horizontal` (기본)	sections + aside가 한 줄에 wrap. 공간 부족 시 자동 줄바꿈
`vertical`	sections + aside가 위→아래로 stack, leading 정렬
`center`	sections + aside가 위→아래로 stack, center 정렬 + text-center

크로스 플랫폼 차이점 (Platform Differences)#

항목	Flutter	Web
클래스명	`CoFooter`	`CoFooter`
섹션 데이터	`CoreFooterNavData<Widget>`	`CoreFooterNavData<Component>`
backgroundColor / textColor	`Color?`	`String?` (CSS rgba)
padding	`EdgeInsetsGeometry?`	`double?` (px, 양쪽 동일 적용)
레이아웃 구현	`Wrap` / `Column`	flex (`flex-wrap` / `flex-col`)

NavigationBar: 상단 내비게이션
Dock: 모바일 하단 탭 내비게이션

Footer

Footer#