Top app bar

Basic principles

Persistent

매 화면의 최상단에 위치합니다. 스크롤 시 사라질 수 있습니다.

Guiding

앱 사용 시 안정적인 가이드 역할을 합니다.

Consistent

사용자가 쉽게 익숙해질 수 있도록 위치와 콘텐츠를 일관성 있게 유지합니다.

Anatomy

- Navigation은 최 좌측에 위치합니다.
- 타이틀은 navigation의 우측에 위치합니다.
- Action 버튼은 navigation의 우측에 위치합니다.
- Overflow 메뉴는 최 우측에 위치합니다.

1. Container
2. Navigation icon (optional)
3. Title (optional)
4. Action items (optional)
5. Overflow menu (optional)

네비게이션 버튼과 우측 액션 버튼 용법

네비게이션 버튼 자리에 다른 유형의 버튼을 사용하지 않습니다.  
우측 버튼 영역에서는 icon 버튼과 text 버튼은 혼용해 사용하지 않습니다.

Caution

정해진 자리에 다른 유형의 버튼을 사용하거나 우측 버튼 영역에 icon 버튼과 text 버튼을 혼용해 사용하지 않도록 주의합니다.

스크롤 시 타이틀 인터랙션

서비스 내에서 일관성 있는 타이틀 형태를 유지합니다.

Don’t

스크롤 시 타이틀이 유지되는 경우와 사라지는 경우가 혼재하지 않도록 합니다.

타이틀 말줄임

타이틀 텍스트를 말줄임하거나 자르지 않습니다.

Caution

타이틀을 명확히 인지할 수 있도록 말줄임은 지양합니다.

타이틀이 길어지면 앱바 길이를 늘리고 텍스트를 줄바꿈합니다.