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

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

| Platform | Status | Note |
| --- | --- | --- |
| Figma | Done |  |
| React | Not Planned | React 구현이 불필요하여 제공되지 않습니다. |
| Lynx | Not Ready |  |
| iOS | Not Planned |  |
| Android | Done |  |

## Anatomy

![Bottom Navigation의 Anatomy 이미지 (KR)](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/6a8caf12-66cc-44f8-9e9e-79f80db93fb1)

![Bottom Navigation의 Anatomy 이미지 (EN/JP)](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/38e0b76d-6255-4c5b-aa84-e57497395fef)

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/d7a597dd-26b4-4d1b-877e-b8e2ddcce80d)

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/4234e06e-3d68-4b43-a9f8-30336b6e4451)

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/4b2ef8ef-ece3-45a8-b8e5-22e4e7b4426e)

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

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

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

![Label 간결하게 작성하기 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/dbee422c-fa8e-4d8b-816e-a6ddb9ee0b13)

탭 라벨은 짧고 간결하게 작성하세요. (한글 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/602c367c-62da-4530-b83a-f6d3ff0dd5ed)

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 스타일을 혼용하지 마세요.**