MobileNav

MobileNav is the phone web's tab bar: a row of a product's destinations at the bottom of every top-level page. The selected destination's icon sits in a yellow sticker. Pushed pages cover it. The iOS and Android apps draw the same destinations with their own system tab bar instead (Navigation).

跟随页面浅色深色并排

When to use

How the tab bar works with Back and pushed pages, and how many destinations it holds, is in Navigation. Nothing is attached above the tab bar; where working agents appear instead is in Working agents. Which destinations a product has is on its own page (Raft Chat).

Anatomy

• MobileNavRoot: the edge bar, on layer-card (in dark mode on layer-frame, the same dark layer as the tab header), with a line-seam along its top edge and padding for the bottom safe area. It runs the full width at the bottom edge; it is never a floating pill.
• MobileNavItem: one destination: a 22px icon, then its label.
• MobileNavLabel: the label, in text-label. It truncates.

Search and More

A product can give one of the tab bar's slots to Search and make its last tab More. Raft Chat does both, in its mobile app and on the phone web.

• Make Search a tab like the others: its page is a top-level page, with no Back, and the bar stays with Search selected. Search never shows an attention dot. How its page and its results behave is in Navigation.
• Make the last tab More when a product has more destinations than fit. More's top-level page is a page of its own that lists the remaining destinations at its top; each row opens a pushed page under More, with Back. A link to one of those pages opens it under More, with More selected.

raft-ui draws both with MobileNavItem. Separate parts for a floating pill and a Search button (MobileNavPill, MobileNavSearch) are no longer planned.

Behavior

• Hide the bar while the on-screen keyboard is open. Pinned above the keyboard, it would cover the field being typed in and the composer. When the keyboard closes, bring the bar back with the platform's default transition, not an instant jump, so people can see the navigation return rather than wonder where it went.
• Show the bar only on top-level pages: a page with Back never shows it (Navigation). Pushed pages cover it; menus, dialogs and bottom sheets leave it as it is.
• Keep the bar in place while a page scrolls. Don't hide it on scroll: it is how people know where they are.
• Tapping the selected item scrolls its page to the top, and on Search focuses the field. Each tab keeps its page's scroll position and filters while another tab is open (Navigation).

States

The sticker wraps only the icon, not the whole item: a yellow item adds another strip of frame at the bottom of the screen, and wrapping only the icon halves the color while the selection still reads at a glance (Navigation).

Content

• Label every item, in Title Case (Typography). Keep a label to at most 8 Latin letters or 4 Chinese characters, so 5 items fit at 320px; a longer one truncates.
• Which items can show an attention dot is the product's choice. Say other news inside the page instead.
• Show a dot, never a count, on the tab bar: the count belongs inside the page, next to what it counts.
• Dot More only for something inside More that shows nowhere else, and show the same dot on the row that caused it, so people can find what is new.

Accessibility

• MobileNavRoot renders a nav. Name it with aria-label="Primary".
• MobileNavItem renders the Base UI Button; selected sets aria-pressed. For an item that navigates, render a link (render={<a href="…" />} with nativeButton={false}) and set aria-current="page" on the selected one: raft-ui sets neither on a link.
• The visible label names the item. When an item shows an attention dot, give it an aria-label that says both: "More, new reply to your feedback". The dot itself is aria-hidden.