# Bottom Navigation
URL: /components/bottom-navigation
Source: https://github.com/daangn/seed-design/blob/dev/docs/content/components/bottom-navigation.mdx

앱의 루트 페이지 하단에 고정되어 있는 네비게이션 바로, 다섯 개의 상위 탭 간 이동을 제공합니다.

## Anatomy

![Bottom Navigation의 Anatomy 이미지 (KR)](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/8c1b4e7a-42bc-4d39-bdac-4d2940eb0ba6)

![Bottom Navigation의 Anatomy 이미지 (EN/JP)](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/be2be2d4-d5c4-480f-8316-4dfd588a733f)

Bottom Navigation은 아이콘과 라벨로 구성된 탭 아이템, 그리고 이를 감싸는 Container로 이루어집니다. 각 탭 아이템에는 [Notification Badge](/components/notification-badge)를 표시할 수 있습니다.

북미와 일본의 글로벌 앱에서는 Bottom Navigation 중앙에 브랜드 컬러의 글쓰기 버튼이 위치합니다. 이 버튼을 선택하면 탭 이동이 아닌 글쓰기 화면으로 바로 이동합니다.

### Divider 두께

iOS에서 상단 Divider는 1px로 구현됩니다(@2x에서 0.5pt, @3x에서 0.33pt). Figma에서는 일반적으로 @3x 화면을 기준으로 작업하므로, 0.33px로 그려져 있으니 참고해 주세요.

## Properties

### State

![Bottom Navigation의 State - Selected/Unselected 상태에서 각각 Enabled, Disabled](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/22b88265-b0e2-45a9-9566-6c27aff72c7f)

Bottom Navigation의 탭 아이템은 Selected/Unselected 상태에서 각각 Enabled, Disabled 상태를 가집니다.

### Badge Property

![Bottom Navigation의 Badge Property - Small, Large 사이즈](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/174e67db-c688-4cb5-82c7-9d1881655f1d)

Bottom Navigation의 탭 아이템에는 [Notification Badge](/components/notification-badge)를 표시할 수 있습니다.

[Notification Badge](/components/notification-badge)는 Small, Large 두 가지 사이즈로 표시할 수 있습니다.

| Size      | 설명                                                               |
| --------- | ---------------------------------------------------------------- |
| **Large** | 라벨을 포함해 구체적인 알림 수나 상태 정보를 제공합니다. 채팅과 같이 알림의 세부 정보가 중요한 경우 사용합니다. |
| **Small** | 간결한 도트 형태로, 텍스트 없이 상태 변화만 표시합니다. 알림의 존재 여부만 중요한 경우 사용합니다.        |

## Guidelines

### Bottom Navigation 넓이

![Bottom Navigation의 최대 너비 480px 제한 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/1c5c4741-1f0e-4caf-8eb6-291c72417900)

Bottom Navigation의 내부 컨테이너는 최대 너비를 480px으로 제한하여, 화면이 넓어져도 탭 아이템들이 과도하게 퍼지지 않도록 합니다.

**iOS는 최대 넓이를 적용할 수 없어 화면이 넓어져도 좌우 여백 없이 탭 아이템이 균등하게 배치됩니다.**

### Label은 간결하게 작성하기

![Label 간결하게 작성하기 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/754cbb76-22a4-42b5-adb1-e625696b3a00)

탭 라벨은 짧고 간결하게 작성하세요. (한글 5자, 영문 10자 이내) 폰트 스케일이 큰 경우 라벨이 줄바꿈될 수 있습니다.

**콘텐츠 영역을 충분히 확보하기 위해 Bottom Navigation에는 폰트 스케일링이 적용되지 않습니다.**

### 항목 개수

<DontImage body="5개 이상의 항목을 배치하지 마세요." alt="6개의 항목을 배치한 예시" />

Bottom Navigation 탭 아이템은 5개를 넘지 않도록 해주세요. 더 많은 구분이 필요하다면 화면 상단에 [Tabs](/components/tabs)를 사용하는 것을 고려해주세요.

### 탭에 Badge 표시하기

![탭에 Badge 표시하기 예시 - Small, Large 사이즈](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/db62ca5d-05a0-421f-97a5-03829ca94e50)

Bottom Navigation 탭 아이템에 [Notification Badge](/components/notification-badge)를 표시할 수 있습니다.

Badge는 두 가지 사이즈로 제공됩니다. Small 사이즈는 새로운 활동을 점으로 표시하고, Large 사이즈는 알림 숫자를 표시합니다.

Large 사이즈는 1부터 99까지 표시되며, 100 이상일 경우 99+로 표시됩니다. 0일 때는 표시되지 않습니다.

3개 이상의 탭에 Badge가 표시되지 않도록 주의해주세요.

### 아이콘 스타일

<DontImage body="Fill 스타일과 Line 스타일을 혼용하지 마세요." alt="아이콘 스타일 - Fill 스타일과 Line 스타일을 혼용한 예시" />

탭 아이콘은 Fill 스타일을 사용하세요. 활성화 여부는 컬러 톤으로 구분합니다.

**Fill 스타일과 Line 스타일을 혼용하지 마세요.**