04. Bottom navigation

Main tab

Use a bottom navigation bar to change the screen displayed at the top for each tab through the main tab. Each tab should have its own view. Tabs should be displayed at all times, even when the user scrolls up and down a list. It’s recommended that you provide four or fewer text-type tabs (maximum of five), and name each screen title the same as the corresponding bottom tab.
Don’t provide a more options button for a tab. The user can’t move between tabs by swiping the body area horizontally. Don’t place tabs above the keyboard.

Phone – Portrait view

Omit the app title on the screen where the main tab is provided. However, when the main tab represents the app, display the main tab’s name as the title at the top.

Tablet – Landscape & split view

Specify the maximum distance between the tabs so that the distance between them doesn’t exceed the set value.

1Margin

2W=1

Sub tab

Use a subtab to show the categories displayed on the current screen separately. Provide text-type subtabs at the top. Subtabs can be fixed, but they can also be scrollable if there are five or more of them. The user can move between subtabs by swiping the text body area horizontally.

Phone

Tab string

All navigation tabs at the bottom should be displayed on a single screen when the default font size is used.
Exceptionally, scroll can be applied.

1If a user scrolls horizontally within a tab, when the default font size is applied.

2It’s recommended that you use fixed-type tabs with default font size, even when the strings are translated into different languages.

3In order not to allow each tab scrollable, make sure that each of translated or abbreviated tab string doesn’t exceed N characters. (Even if a bottom tab string is abbreviated, the complete string should be used for its app bar title. Display the complete string in landscape view and on tablets.)

4Exceptionally the tab is allowed to scroll when a larger font size is applied and unavoidably exceeds the tab area.

Phone

1Portrait view

2Landscape view